How to change website favicon dynamically

Question

I have a web application that's branded according to the user that's currently logged in. I'd like to change the favicon of the page to be the logo of the private label, but I'm unable to find any code or any examples of how to do this. Has anybody successfully done this before?

I'm picturing having a dozen icons in a folder, and the reference to which favicon.ico file to use is just generated dynamically along with the HTML page. Thoughts?

Answer 1

Hello @kartik,

Yes,you can do it by using the following code:

(function() {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.edureka.co/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
})();

Hope it helps!!
Thank you!!

Answer 2

There is a way of doing it through javascript and the developer framework as shown below.

JavaScript

$('head').append('<link id="dynamic-favicon" rel="shortcut icon" href="https://www.XYZ.com/favicon.ico" />');

This works by adding a link to the head of the page, which changes the shortcut icon of the page to the specified image. Causing the image on the tab in the browser to change.