Skip to main content
OutSystems

How to set a favicon tag

A big thanks to Jorge Almeida, one of our community members, for submitting this how-to.

Question 

How to set a Favicon associated with your OutSystems application?

Answer

In OutSystems, by default, the Favicon displayed for applications is the  OutSystems logo. Favicon is the icon visible for your app in the browser and is also known as shortcut icon, website icon, tab icon, URL icon or bookmark icon.

To use a custom Favicon for your applications:

  1. Add the AddFaviconTag action, included in the HTTPRequestHandler extension, as a dependency of your application. AddFaviconTag, allows setting the favicon for the current page;
  2. Import the source file of the icon you want to use as an image or upload the file as a resource.
  3. Call the AddFaviconTag action from the preparation of the screens where you want to display it.

STEP1 - Add AddFaviconTag action as a dependency

  1. Click on  Manage Dependencies...:
  2. Search for HTTPRequestHandler on the left pane and select it toview its public elements. 
  3. Select the AddFaviconTag action to use it in your application.

STEP2 - Add the source file of the icon

You can add the source file for your icon using one of two methods, importing the icon to the images folder or uploading it to the resources folder of your application. For favicon you should use a small image with the same width and height, typically 16 pixels by 16 pixels (or its multiples). Allowed image formats are png, jpg and gif. 

Method #1 - uploading as an image

  1. In the Interface tab, right-click on the images folder and click on Import Image...  to upload the icon to the images folder.

Method #2 - uploading as a resource

  1. Create your .ico image using, for example, this website http://www.favicon.cc/. Be careful not to rename it as favicon.ico (as this is the default name looked up by browsers). 
     
  2. Go the Data tab and scroll down all the way until you find the Resources folder.
     
  3. Right-click on the Resources folder, click Import Resource and then select your image or logo:

     
  4. Select Add as Resource in the popup that shows up.

     
  5. In the properties of the new resource, set the Deploy Action property, to Deploy to Target Directory.

STEP 3 - Call the AddFaviconTag action 

To set the same favicon across all screens of your application, an option is to call the AddFaviconTag from the Menu web block, as this block is already injected into all application screens. To do this:

  1. In the Interface tab, navigate to the Menu web block, located under the Common UI Flow. Select the Menu web block and add a Preparation action. In flow of the Preparation action, call the AddFaviconTag action
  2. Open the property editor by double-clicking on the IconFilename property and set the IconFilename property to IconFilename property and set the IconFilename property to img/<file_name>.<file_format> where:
    • img/ is the directory from where the Platform deploys images during publishing;
    • <file_name>.<file_format> is the full name of your icon or logo. The file format should be set to png, jpg or gif. 

      In the example above the value for property IconFilename was replaced by “./img/zepellin.png”.

See it in action

  1. Publish your application clicking on the 1-Click Publish button or by pressing F5.
  2. Confirm the image was correctly deployed by visiting the URL for the resource https://<your_application_path>/<your_filename>.<format_filename> or https://<your_application_path>/img/<your_filename>.<format_filename> if you imported your icon to the images folder.

    In this example, the working application was called "Favicon" and the URL for the image was https://(...). outsystemscloud.com/Favicon/zepellin.png.
    This image is quite large (128px by 128px,a multiple of 16 px by 16 px) but when used as favicon it will be resized by the browser.
  3. Visit your app to see your new favicon.

More information

  • Was this article helpful?