Set A Favicon In Your Joget App

Introduction

Adding a favicon to your Joget app enhances the user experience by providing a small, recognizable icon in the browser's address bar. Favicons are typically 16×16 pixels and help users identify your application quickly. This guide will show you how to set a favicon in your Joget app by adding custom JavaScript code.

How does it work?

The process involves inserting a JavaScript snippet into your Userview settings. The code will load the favicon during page load and ensure it displays correctly across different browsers. You'll need to replace the provided file path with the correct path to your favicon image.

1. Go to Userview Builder > Settings > Custom JavaScript.
2. Copy and paste the provided JavaScript code.
   

   // Set the Favicon as the page is loading
   $("#favicon").attr("href","/jw/plugin/our.theme.Theme/images/favicon.ico");
    
   $(document).ready(function() {
       // Set the Favicon after page load, in case the above doesn't set it properly
       $("head").append('<link rel="shortcut icon" href="/jw/plugin/our.theme.Theme/images/favicon.ico"/>');
       // This might be required as well in some browsers
       $('link[rel="shortcut icon"]').attr('href','/jw/plugin/our.theme.Theme/images/favicon.ico');
   }

   The code includes additional commands to ensure the favicon loads correctly, even after loading the page.

3. Update the file path to point to your favicon file.