How to force ie11 to request a new favicon?

Question

I am working on a website which changes its favicon depending on the user details logged in. A controller processes this request at the back-end and sends the appropriate favicon for the site. So far, I avoided the favicon getting cached by most browsers through this:

<link rel="shortcut icon" type="image/x-icon" href="resources/favicon.ico?v=${date.time}"/>

However, the favicon still gets cached in ie11. No requests were received by the controller when I turned on debug on Netbeans.

Things to note:

The first favicon upon entering the site works. I just can't replace it after logging in.
I typed the favicon url in the address bar and it returned the correct favicon.

I've been looking around but I can't find a solution to this problem. :<

score 3 · Accepted Answer · answered Apr 06 '15 at 03:51

Using JavaScript to change the favicon in IE11:

HTML

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

JS

// Chrome allows you to simply tweak the HREF of the LINK tag.
// Firefox appears to require that you remove it and readd it.
function setFavicon(url)
{
    removeFavicon();
    var link=document.createElement('link');
    link.type='image/x-icon';
    link.rel='icon';
    link.href=url;
    document.getElementsByTagName('head')[0].appendChild(link);
    if (window.console) console.log("Set FavIcon URL to " + getFavicon().href);
 }

function removeFavicon()
{
    var links=document.getElementsByTagName('link');
    var head=document.getElementsByTagName('head')[0];
    for(var i=0; i<links.length; i++)
    {
        if(links[i].getAttribute('rel')==='icon'){
             head.removeChild(links[i])
        }         
    }      
}

Demo: http://www.enhanceie.com/test/favicon/dynamic.htm

NOTE: This works in Chrome, Firefox, IE11+. It doesn't work in IE10 or earlier, Opera 12.15, or Safari 6.0.5(mac). Combine this method with your favicon.ico?v=xxxx method for earlier browsers.

I was pursuing this solution, thinking it was required for my project, but I eventually realized that the path to the icon I was using did not have a leading slash. Chrome still managed to find the icon, but IE11 could not, probably because it was reading it as a relative path where everywhere but the home page it would fail to find the file. Sharing in case anyone else encounters this specific behavior difference between browsers. — Ross Llewallyn, May 07 '18 at 19:45

score 1 · Answer 2 · edited May 23 '17 at 12:13

1

Are you sure its not just cached locally. I think the issue is that IE11 doesn't want to look for a new favicon and is using a locally cached one.

Try forcing it to fetch the favicon. See the answer by Alex here: How do I force a favicon refresh

You should be able to get the new favicon showing on your device on IE11 by following those steps.

Alternatively you could completely rename the favicon and use the new name with a link tag. <link rel="shortcut icon" href="/images/new-favicon-name.ico" />

Another neat trick in the same thread: How do I force a favicon refresh

Using the hash of the file as the version guarantees unique names.

edited May 23 '17 at 12:13

Community

1
1

answered Apr 06 '15 at 03:39

Mo Beigi

1,614
4
29
50

Yes, it is cached. Yes, EI11 doesn't look for a new favicon. I mentioned it in the question that: 1. the browser does not request for a new favicon even after adding a ${date.time} URL parameter which is similar to [hash query string](http://stackoverflow.com/questions/2208933/how-do-i-force-a-favicon-refresh/24166149#24166149) 2. the favicon is supposed to *change after the user logs in*. Performing [hard refresh, restart](http://stackoverflow.com/questions/2208933/how-do-i-force-a-favicon-refresh/5239747#5239747) would still require the default favicon to appear after restarting. – Maggie Apr 06 '15 at 05:30

philippe_b · Answer 3 · 2015-04-08T16:44:14.950

Warning: although this answer is (in my opinion) a good advice, it does not work with IE11

Adding URL parameters to the regular favicon path is a useful technique to update a favicon and force browsers to reload it. However, browsers and notoriously known to be very lazy when it comes to favicon loading. So refreshing your favicon that often is probably beyond the power of the extra URL parameter technique.

I advice you to give a try to favicon.js. This JavaScript library is designed to create dynamic favicons and let you do quite amazing stuff.

score 0 · Answer 4 · edited Feb 27 '16 at 23:23

To change a favicon and make sure that the new favicon will be displayed instead of the old one, an easy and dummy way is to change the name of the favicon, you don't have to call it favicon.ico, call it anything.ico and put the usual line of code in the head section:

&lt;link rel="shortcut icon" href="interdit.ico"&gt;

and upload the ico file : anything.ico (change anything for whatever you want).

How to force ie11 to request a new favicon?

4 Answers4

Linked