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

    When changing the favicon, keep in mind that you need to:

    • Change the favicon file in all modules that expose screens in your app
    • Reload the app data, to ensure the app loads the new favicon. If you are using Chrome, right-click the tab with your app and select Reload. You can also clear the entre browser cache.

    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.

    • Was this article helpful?