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

How to set a favicon in Reactive Web Apps

This FAQ applies to the Reactive Web Apps only.

Follow these steps to set the favicon in your Reactive Web Apps. You need to do two things in Service Studio:

  • Add the favicon to the app resources
  • Load the favicon when the Module loads

In this example we're using favicon.ico. You should edit the Java Script if you're using a different file name.

Service Studio and adding favicon image

  1. Go to the Data tab > Resources > Import resource and select your favicon.ico file. A dialog shows.
  2. In the Add Resource dialog window click Add as resource. The image is added as a resource and you can set other options.
  3. Set the Deploy Action property of the favicon resource to Deploy to Target Directory.
  4. Go to the Logic tab > right-click the Client Action folder > open the Add System Event menu > click On Application Ready. The logic of this new Action opens.
  5. Drag a JavaScript Tool to the Flow. Name it AddFavicon.
  6. Double-click AddFavicon JavaScript Tool to open the JS editor. Add the following code:

    var link = document.createElement('link');
    link.rel = 'icon';
    link.href = 'favicon.ico';
    var head = document.querySelector('head');
    head.appendChild(link);
    
  7. Publish and open your app in a browser.

  • Was this article helpful?