What is currently the best way to get a favicon to display in all browsers that currently support it?
Please include:
Which image formats are supported by which browsers.
Which lines are needed in what places for the various browsers.
views:
2171answers:
9
+27
Q:
What is currently the best way to get a favicon to display in all browsers that support Favicons?
+2
A:
Having a favicon.* in your root directory is automatically detected by most browsers. You can ensure it's detected by using:
<link rel="icon" type="image/png" href="/path/image.png" />
Personally I use .png images but most formats should work.
Ross
2008-08-31 20:22:39
IE6 cannot handle PNGs correctly.
donut
2009-12-31 00:59:47
+7
A:
I use .ico format and put the following two lines within the <head> element:
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
John Topley
2008-08-31 20:46:21
+3
A:
Favicon must be an .ico file to work properly on all browsers.
Modern browsers also support PNG and GIF images.
I've found that in general the easiest way to create one is to use a freely available web service such as favicon.cc.
Antti Sykäri
2008-08-31 21:15:54
+18
A:
It might also be worth including the 'favicons' for the iPhone here as well; that is if the user chooses to add your website to their home screen. The code used in this case is as follows:
<link rel="apple-touch-icon" href="touch.png" />
The dimensions should be 57x57 pixels. Alternatively you can omit the link tag and just put a file called 'apple-touch-icon.png' in the root directory of your website.
different
2008-08-31 21:21:46
OK, I'm having a 'Microsoft is getting on my nerves' day. I can't get this to work in Internet Explorer, despite the fact that it shows the favicon for the stackoverflow site. Are there any other settings that affect this, such as doctype?
belugabob
2008-11-27 11:54:31
FYI - I found the answer. If you refer to the site via http://localhost:8080/index.html , it doesn't work - if you use the actual name of the machine (http://machineName:8080/index.html) everything functions as you'd expect.I can't even begin to understand this behaviour - anybody care to try?
belugabob
2008-11-27 12:23:23
Update - the behaviour is caused by the browser caching the icon. Clearing the temporary internet files will cure this, if you feel happy losing your cache.
belugabob
2008-11-27 14:47:51
Would it be neater to put the IE version of the link in an IE conditional comment?
EoghanM
2008-12-02 10:40:13
+2
A:
Just in case anyone is wondering how to create .ico files, there are several online tools that can help. A Google search will reveal many such tools:
Google search for: favicon creator
Charles Roper
2008-09-01 17:12:05
+3
A:
There is also a site where you can check how the favicon of any page is made
There you can see a tutorial about making favicons, image types and resolutions, it's nice!