Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

 

 

OutSystems

How to change a favicon in Reactive Web Apps

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • This document explains how to change the default icon and replace it by your favicon. OutSystems Reactive Apps use the OutSystems logo as the default favicon from Service Studio > Data > Resources > favicon.png.

    The default favicon

    You need to change the favicon file in all modules that expose screens in your app.

    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 Service Studio, go to the Data tab > Resources, right-click favicon.png and select Change Resource. A file dialog opens.

      Help menu to edit resource, favicon

    2. In the Change Resource file dialog, select a PNG image to set it as a new favicon.

      Service Studio resizes the image to the favicon standard dimensions.

    3. Publish your module and open it in the browser. You should see a new icon in the browser tab.

    Use an ICO image as a favicon

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

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

      Properties showing favicon with ICO extension

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

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

    4. Check if some elements in the module use the old icon and update them if needed. Press Ctrl+F or click the search icon, 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.

    7. Publish your app and open it in the browser. You should see a new icon in the browser tab.

    Troubleshooting

    If your new favicon isn't showing, it may be because the old favicon is still in the browser cache. If you are using Chrome, right-click the tab with your app and select Reload.

    • Was this article helpful?