How to force ie11 to request a new favicon?

问题:

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:

1. The first favicon upon entering the site works. I just can't replace it after logging in.
2. 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. :<

回答1:

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.

回答2:

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.

回答3:

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.

回答4:

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:

<link rel="shortcut icon" href="interdit.ico"> 

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