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?
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.
If your Web Application does not use a SILK UI Template follow these steps to use a custom favicon:
Add the AddFaviconTag action from the HTTPRequestHandler extension, as a dependency of your application.
Go to the Interface Tab, right click the Images folder, click Import Image... and select your custom favicon.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.
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
<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
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.