Thursday 31 January 2013

favicon working in all browsers

code goes here for favicon :

<link rel="icon" href="http://www.example.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.example.com/favicon.ico"
 type="image/x-icon" />

why doesn't the favicon for my site appear in IE7?
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.



No comments:

Post a Comment

Do you think it could be useful for you? Share your thoughts with us!