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.
- ► 2008 (19)