This is a re-posting of a post originally published on 2007-03-01. The original can be found here. This version has been updated to match what is currently reality.
When I was at Microsoft, I was the developer tasked with fixing the Favicon story for IE7. The original IE6 behavior was to download the favicon once--when a user made a site a Favorite. I do not want to go too deep into the details of how this craziness works, but the key piece of information to understanding why it seemed so broken is this: a mapping between the url of the site the url for the site's Favicon would be stored in IE's History database and the actually bits of the icon would be stored in the temporary Internet files folder. Thus, if you cleared your history or your cache, or the item expired out of either one, the icon would be gone forever.
Fast-forward to IE7. It has been over two (three?) years since IE6 shipped. We want to implement tabbed browsing, and we want the tabs to display the correct Favicons. So I updated the Favicon code to always download the icon on a first visit. The code also remembers if there is no Favicon (404) or it was invalid in some way (ExtractIcon() failed).
Here is a Mini-Faq (with one bonus question at the end) that I wrote while I was at Microsoft:
Q: How do I make a favicon appear for my site in IE7?
A: There are two ways. The first is to put a file in the root of your domain called favicon.ico. The second is to use a <link> tag with the rel="shortcut icon" value and the href value set to the URL for the Icon you wish to display.
Q: How often does IE download the favicon?
A: IE will download the icon when a user first visits the site. The icon is stored in the Temporary Internet Files folder on the client machine. Additional metadata about the favicon is stored in the user's Url History database. If either store is cleared, or items relating to the favicon have naturally expired, then the icon will be downloaded again on the next visit. If more than one page (or site) shares the same favicon, it is only downloaded once. IE takes great pains to download the icon as few times as possible to reduce load on the server.
Q: I see the wrong favicon for some sites I visit. How do I fix this?
A: If the history database has become corrupted in some way, this can happen. The simplest solution is just to use Delete Browsing History (on the Tools menu) to clear the cache and the history store.
Q: I put a favicon.ico on my site as you described, but it still doesn't appear.
A: It must actually be a .ico (an Icon) file. Bitmaps, pngs, gifs, etc, will not work. IE7 will download your favicon to the Temporary Internet Files folder and call ExtractIcon() on the file. If this fails, we will show the default icon instead of your favicon.
Q: I verified that my favicon really is an icon, but it still doesn't appear.
A: Since IE loads your icon out of the Temporary Internet Files folder, it must be able to actually store it there. If you are setting the no-cache directive for the icon file, then IE will not be able to display your icon and will display the default icon instead. You can use Fiddler to verify.
Q: How do I create a different favicon for every page on my site?
A: Put a different tag on each page, pointing to a different icon.
Q: I changed my site's favicon to a different icon, but the old one still shows in IE. How do I force IE to update?
A: If you just put the favicon.ico file in the root of your domain, IE doesn't have any way of knowing if it changed. To force an update, you need to use a tag and point to a different filename than you previously used. The current filename is compared against the known filename stored in the Url History database. When IE sees the filename has changed, it will download your new icon. Alternatively, you can ask your users to clear their history and cache (Tools->Internet Options->Delete Browsing History), which will also force IE to download the new file.
Q: What is still broken?
A: Two things: (1) If you specify an alternate location via <link> tag, the href member must be fully-qualified and does not respect the <base> tag. (2) The <link> tag must have "shortcut icon" as the rel value, but this is in violation of the W3C spec that says whitespace in the rel tag denotes a list of values. IE treats "shortcut icon" as a single value. Luckily this still works for other browsers who see "shortcut" and ignore it and only pay attention to the "icon" string.
That should cover most of the questions I've received about favicons in IE7. If you have more questions, feel free to ask.
14 comments:
Hi, I found the information on your site to be very helpful in correcting the problems I was having with updating my new favicon. (I had a favicon and then replaced it with a new favicon.) I still have one issue though. I forced IE to update by deleting my browsing history. But now I'm wondering if all the people who had visited my site when I had the old favicon will also have to delete their browsing history in order to be able to see my new favicon. Is there anything I can do to ensure my new favicon will replace my old favicon on everyone else's browser?
Thank you so much for your help.
Nice post... Btw, is there any way to keep Favicon in I.E Bookmarks (together with fav. collection)?
I have placed my favicon.ico file in the images folder and using the link rel tag to specify the relitive path/favicon.ico file. Still IE 6 is not at allo displaying the icons, But IE7 is.
Inspecting the temp int. files folder has favicon.ico file but with the default IE icon and not the one that i created. BTW i created the ico file using Visual Studio Icon Editor.
Please input your suggestations to this...
Thanks in advance,
Pratik Chhichhia
If I currently don't have a favicon, what would be a good <link> tag (for all pages) to avoid unnecessary requests to /favicon.ico until I have an icon for the site?
Hi Jeff,
I followed all of the instruction I found online but I still can not get my favicon to appear in IE7 (Vista SP1):
- favicon file is in the root directory
- image is 32x32
- it is an .ico file
- code:
{link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /}
{link rel="icon" href="favicon.ico" type="image/x-icon" /}
- the page is not published yet
- cleaned Internet cache
- I do not see my favicon in Temporary Internet Files folder before or after cleaning cache and launching the page
- works in Firefox and Opera
** I have noticed that Firefox is not reading .ico file unless it is named “favicon.ico”.
Is there anything else I might have missed?
Thank you!
Melinda: You have to change the filename in order to make clients update. Use the <link> tag to specify.
Bobo: If you use NTFS IE will store the favicon in an alternate data stream on the .url file. You may have to visit each favorite once after switching to NTFS to force this to update.
Prateec: Relative urls don't work, as I said above. It must be fully qualified.
mg: Unfortunately I don't think there is a way to stop it. Just create an empty file called favicon.ico--I will download it once, realize it can't extract the icon, then store that info in the history database and won't ask again for two weeks or so. It doesn't solve the problem completely, but it does mitigate it somewhat.
Anna: If you post a link to your website, I can try to have a look.
I have solved the Blogger issue. By adding different sections of code before the closing /head tag, the icon appears on my blog.
The problem remains for my main site. Www.carinajorgensen.com does not have the favicon in my IE browser. I have tried adding the different codebits I used in Blogger's HTML as well without change. And ofcourse clearing browser history.
Thank you, very helpful!
Greetings,
I am testing a site across multiple browsers. So far it has worked fine in Firefox, IE7, and IE8. In IE6, however, I bookmarked the homepage, but browsing to other pages in the same site removes the icon (e.g. if I add a query string to the page or remove them, the favicon disappears and a new bookmark is required). Is this a shortcoming of IE6? I'm asked by my employer to find answers from certified personnel :(. Help please. Thanks a bunch in advance!
To add to this blog and ALL teh other comments, I just completed troubleshooting and correcting a specific XP Pro SP3 and IE8 issue where every other compination of XP and IE work, but not this one.
If the favicon was anything other than 16 by 16 px, it would not display. and if the favicon was animated it would not display a transparent background.
The solution was to create a favicon of 16 by 16 pix and not present an animated icon.
Why does the favicon HAVE to be in the root folder, why can't it be neatly tucked away with all of my other images?
All the other browsers allow tidyness!!!!
Hi Jeff,
thanks for the article. I have a problem though. On the site www.juliekinnear.com I still cannot get the favicon to appear in IE 7 and IE 8.
I have tried a simple 16x16 icon, one with indexed colors, tried linking to the favicon directly through the proper html tag, clearing the cache etc.
I have literaly tried all known options and still no luck.
Any suggestions on where could be the problem? Did I missed something?
Thanks
Victor
Hi Jeff,
Thanks for your article on this subject. I think I've followed all of your suggestions but still not seeing my site's favicon.ico appearing in IE. Can you take a look at the site for me and see if there's something amiss?
http://www.nbm.org/
Thanks!
B.R.
Helped me a lot. +1
Post a Comment