How to Add a Favicon to Your Knack App?

API & Customization Show & Tell
1

Hello Folks!

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.

![](upload://onqwbztgyFlNCKrPodR052hANM5.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);};

 

  1. 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';

 

  1. 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!

 

1 Like