How to change a favicon in Reactive Web Apps
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.
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.
-
In Service Studio, go to the Data tab > Resources, right-click favicon.png and select Change Resource. A file dialog opens.
-
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.
-
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:
-
In Service Studio, go to the Data tab > Resources, select favicon.png and change its Name to
favicon.ico.
-
Right-click favicon.ico and select Change Resource.
-
In Change Resource, select an ICO image with the new favicon.
-
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.pngand 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.
-
In the 'favicon.png' occurrences in Module search tab, select REPLACE ALL OCCURRENCES.
-
Enter
favicon.icoand select OK. -
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.