How to Add a Favicon to Your Knack App?

 

In order to help users save time and avoid the struggle of identifying your application in their web browser you must implement a Favicon. 

This will also be practical for users to locate the application when there are too many tabs open at the same time. Additionally, a Favicon will make the design stand out and be visible, bringing brand recognition to your work.

FAVICON ICON P5.png

Do you want to try? Follow this steps guide to implement it:


1. Create the Favicon image in *.ico or *.png format

2. Upload it to a cloud repository like Amazon S3

        link.rel = 'shortcut icon';

        link.href = 'https://soluntech-www.s3.amazonaws.com/Logo+Icon+-+125+x+125.png'; // Update this reference with your favicon URL path

        document.getElementsByTagName('head')[0].appendChild(link);};


3. Insert this piece of code in your Knack app

 var UpdateFavicon = function () {
      var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
      link.type = 'image/x-icon';

4. Add this code to the 'render.any' event

$(document).on('knack-scene-render.any', function(event, scene) {
            UpdateFavicon();
})

Incorporate this into all of your Knack apps and tell us how it goes!

Let’s make IT Happen!

 
Low-CodeGuest UserKnack, faviconComment