Menu
We have a custom session mechanism in our application, that allows user to have different session (e.g., different credentials) in each browser tab, even if URLs are the same. This mechanism works great in all major browsers including IE (v11).
The problem
We want to supply each browser tab with different favicon (with different color) to indicate which tab belongs to which session. To do that, we set different favicon URL depending on session using
<link rel='icon' href='url_to_favicon_session_id' type='image/ico'/>
It works great in Firefox and Chrome, however IE seems to share favicon between all tabs pointing at the same URL (icon is the same in each tab, order of loading determinates favicon visible in each tab).
The question
Can we force IE somehow to not share favicons across browser tabs with the same URLs?
Note, changing URL is not an option here.
Minimal Working Example
Below full code snippet to reproduce problem (put it on a webserver to run in IE with HTML5 support; Open this file in many tabs of the same browser).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script type="text/javascript">
var icons = [
"http://google.com/images/google_favicon_128.png",
"https://assets-cdn.github.com/favicon.ico",
"https://www.microsoft.com/favicon.ico?v2",
"https://s.yimg.com/rz/l/favicon.ico",
"http://www.stackoverflow.com/favicon.ico",
];
var idx = localStorage["favicon"];
if (idx === undefined) {
idx = 0;
} else {
idx = parseInt(idx);
}
localStorage["favicon"] = (idx + 1) % icons.length;
var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'icon';
link.href = icons[idx];
document.getElementsByTagName('head')[0].appendChild(link);
</script>
</head>
<body>
Open this page in multiple tabs. Favicon should be different in each tab.
</body>
</html>
674
Favicons were traditionally associated with a site, but since they can be included via markup in a page, you could, if you wanted, have a different favicon for each page of your site, or even for each request of a page.
To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico".
Nowadays, favicons are displayed right above the address bar regardless of whether the website is bookmarked or not. And in the small chance that a website doesn't have a favicon, the browser will display a generic browser symbol. 2. In addition to the address bar, favicons can also be found in the browser history.
A favicon is a small, 16x16 pixel icon used on web browsers to represent a website or a web page. Short for “favorite icon,”' favicons are commonly displayed on tabs at the top of a web browser,—but they're also found on your browser's bookmark bar, history and in search results, alongside the page url.
In my experience, IE, along with almost all other browsers, uses a cache mechanism separate from the cache of the page to prevent constant retrieval of favicons. This means that changes to the favicon can be unpredictable unless the url is changed and the cache for the domain cleared. The only reliable way I can see around this is to add a unique id to identify the tab for each session forcing IE to cache each sessions's icon separately.
You can try a GET variable (i.e. yoursite.com/page?sessionid), however, in my experience, IE still cache's the favicon across page in the same domain regardless of GET variable. In fact, Microsoft's documentation says that you can use the link tag to get different pages to have different favicon's, however, I often find that IE's favicon cache won't update even if you change the link tag without clearing the cache. Also, IE won't display a favicon at all if you have all caching turned off. And, it appears that in some versions of IE, the link tag doesn't take precedence over whatever favicon is at the default location either.
I have had some success with using a routing script to get requests to the right page and then appending the sessionid as part of the path (ie. yoursite.com/page/sessionid), however. This requires a bit of extra work in your routing script to ignore the sessionid but it is the only thing, in my experience, that worked simi-reliably to get IE to recognize different favicon's for different sessions.
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
