Skip to main content

 

Front-End

 

 

OutSystems

How to set a favicon in Reactive Web Apps

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • 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?