Skip to main content
OutSystems

How to set a favicon tag

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

In OutSystems, by default, the favicon displayed for Web Applications is the OutSystems logo. How do I choose and set a custom favicon for my Web Application?

Answer

If your Web Application uses a SILK UI Template go to the Resources folder inside the Data Tab, right click favicon.ico, click Replace Resource... and select your custom favicon. Don't forget to republish your application.

Change Resource

If your Web Application does not use a SILK UI Template follow these steps to use a custom favicon:

  1. Add the AddFaviconTag action from the HTTPRequestHandler extension, as a dependency of your application.

    Manage Dependencies

  2. Go to the Interface Tab, right click the Images folder, click Import Image... and select your custom favicon.

    Import Images

    If you are using .ico images they will not be listed in the Import Image... window. As a workaround navigate to where your image is placed, manually input/paste the file name (for example favicon.ico) in the File name field and press Open.
  3. To use the same favicon across all the screens of your application include the AddFaviconTag action inside the Preparation of the Menu Web Block. Set the IconFilename to "/<menu_module>/img/<your_favicon>.<file_type>".

    Where <menu_module> is the Module where the Menu Web Block is contained, <your_favicon>.<file_type> is the custom favicon filename and extension. In this case since the Menu Module is Testand the custom favicon is named customfavicon.pngthe IconFilenameis "/Test/img/customfavicon.png"

    Calling the AddFaviconTag action inside the Preparation of the Menu Web Block will change the favicon in all the Web Screens where the Menu Web Block is used. If you only want to use the custom favicon in certain screens call the AddFaviconTag action only inside the Preparation of those screens.

After these steps your Web Application should have a new favicon.

  • Was this article helpful?