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:

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. :<

Answer 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.