For an Angularjs app, two tabs show the same favicon. I need different favicons in both the tabs.

Published Sep 15, 2017Last updated Sep 18, 2017


I have a single page angularjs application. In the main page i have a favicon set like below

<link href="img/favicon-flag.ico" rel="icon" type="image/x-icon">

On the click of an edit link in this main page, a new tab opens and i have the below code to dynamically add a new fav icon. The "url" parameter has the link to the new FAVICON.

var setFavicon = function (url) {
var link = document.querySelector("link[rel*='icon']");
if (link.href.indexOf(url) === -1)
link.type = "image/x-icon";
link.rel = "icon";
link.href = url;

When the above code runs. Both the tabs in the browser get updated to the new favicon.I need oly the edit tab with the new favicon. I am not sure why IE11 is behaving this way. Same code works perfectly fine in Chrome. Can you please let me know why this is happening.

I tries clearing cache and browser history and restrted IE11. Still no luck. Please help me out.

Discover and read more posts from Arahanth
get started