views:

2171

answers:

9

What is currently the best way to get a favicon to display in all browsers that currently support it?

Please include:

  1. Which image formats are supported by which browsers.

  2. Which lines are needed in what places for the various browsers.

+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
IE6 cannot handle PNGs correctly.
donut
+2  A: 

Wikipedia to the rescue

Paul Tomblin
+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
+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
favicon.cc rules!
Jonathan Barbero
+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
+2  A: 

IE6 cannot handle PNG's correctly, be warned.

nt
+39  A: 
bmatthews68
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
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
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
Would it be neater to put the IE version of the link in an IE conditional comment?
EoghanM
32x32?? Isn't 16x16 the norm?
Eduardo Molteni
+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
+3  A: 

There is also a site where you can check how the favicon of any page is made

getfavicon.org

There you can see a tutorial about making favicons, image types and resolutions, it's nice!