How to Add a Favicon to Your Knack App?

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.


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 = ''; // Update this reference with your favicon URL path



  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) {



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


Let’s make IT Happen!