Skip to main content
Created for OutSystems 11. Not working on your version? Tell us about it!

 

 

Front-End

 

 

OutSystems

How to set a favicon in Reactive Web Apps

  • Edit
  • This how-to applies to the Reactive Web Apps only.

    By default, OutSystems Reactive apps use the OutSystems logo as the favicon. The name of the default favicon is favicon.png, and it's in Resources, in the Data tab.

    Use a PNG image as a favicon

    Follow these steps to change the favicon in your Reactive Web App to a different PNG image:

    1. In the Data tab > Resources, right-click favicon.png and select Change Resource.

    2. In Change Resource, select a PNG image with the new favicon.

    After publishing your Module, test your app and make sure the new favicon is shown.

    Use a ICO image as a favicon

    Follow these steps to change the favicon in your Reactive Web App to a different ICO image:

    1. In the Data tab > Resources, select favicon.png and change its Name to favicon.ico.

    2. Right-click favicon.ico and select Change Resource.

    3. In Change Resource, select an ICO image with the new favicon.

    4. In Search, enter favicon.png and select Search in this Module.

      If you have just created your app, the 'favicon.png' occurrences in Module search tab shows four occurrences of favicon.png, all in different AddFavicon actions.

    5. In the 'favicon.png' occurrences in Module search tab, select REPLACE ALL OCCURRENCES.

    6. Enter favicon.ico and select OK.

    After publishing your Module, test your app and make sure the new favicon is shown.

    Troubleshooting

    If you are testing your app and your new favicon is not appearing, it may be because the old favicon is still in cache. If you are using Chrome to test your app, right-click the tab with your app and select Reload.

    • Was this article helpful?