Im going to add a favicon to my site but I have seen so many different ways of doing it Im not sure what is the proper way to do it.

The one that I thought looked the best was this, but it didnt work :

<link rel="icon" 
      type="image/ico" 
      href="/images/favicon.ico" />

I've always just added the favicon.ico to the root directory and its worked fine. I've heard of using the .htaccess file to manually do it (never done that myself).

You can also add this to each page, this is the code I remember it being:

<link rel="shortcut icon" href="http://www.website.com/favicon.ico">

I think the href has to be the full link, and not relative to the site... This might depend on browser or I could just be wrong completely.

Which browser? IE or FF

I think with IE this feature is not work.

The proper way is to use both...

<link rel="icon" href="favicon.ico"  type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Originally Posted by kids

I think with IE this feature is not work.

It works.

Wikipedia is your friend. So is search for posts.

Just in case you still can't get it.

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon">

Use the appropriate resolution and color depth.
ICO: include multiple resolutions (the most commonly used being 16×16 and 32×32, with 64×64 and 128×128 sometimes used by Mac OS X) and bit-depths (most common being 4, 8, 24 bpp—i.e. 16, 256 and 16 million colors) in the file.
GIF: use 16×16 in 256 colors.
PNG: use 16×16 in either 256 colors or 24-bit.

Note: favicon.ico, when located in the document root directory, will also be found by some browsers that do not process the link elements, even if it is not linked from anywhere on your site.

Ya I have favicon.icon in my root directory and I put

<link rel="icon" href="favicon.ico"  type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

It works fine in FF but doesnt do anything in IE.

Any suggestions?

Can you give a link to the site in question?

IE only sometimes uses the favicon IF you have the site/page in your favourites. Which oddly enough, is something that it gets right.

It also won't show it if the icon has been made beyond the allowed. That is 16*16 px at 256 colours. More on sizes and colours at Wikipedia link.

So 16 x 16px is the way to go? Does anyone use a special program to make icons or is it safe to use Photoshop or a similar equivalent?

Photoshop works well, or The GIMP for a free alternative.

i design in fireworks or photoshop then export to bmp or png and use this
http://tools.dynamicdrive.com/favicon/

I don't bother using .ico extension. Faveicons work as PNG and GIF too.

Ah thats pretty handy to know, I would usually save/convert to a .ico file purely because I thought it would look better and be compatible for browsers. I've always favoured .png format anyway for most web graphics, now if only I could get IE to stop displaying the wrong favourite icons in places...

I will double check make sure that it is the correct sizes....

chris if thats the case tho why do I see favicons in IE for so many other sites in the address bar, including webmaster-talk?

IE only sometimes uses the favicon IF you have the site/page in your favourites. Which oddly enough, is something that it gets right.

Sometimes it does, sometimes it doesn't.

From the wiki:

Originally, Internet Explorer only used favicons for bookmarks (for instance MSIE 6.0), which created a minor privacy concern in that a site owner could tell how many people had bookmarked their site by checking the access logs to see how many people downloaded the favicon.ico file. However, since newer versions of Internet Explorer (e.g. 7.0) and most other browsers also display the favicon in the address bar on every visit, this is becoming less of an issue.

of course if you want icons at more than one size (say for desktop use too) then you should use the the capabilties if .ico http://en.wikipedia.org/wiki/ICO_%28...file_format%29

does gif or png work in as many browsers as ico??

It's worked for me in Opera 9, FF 2, IE 7 and Safari 3. I haven't tested in Amaya because I have never recieved a page view from that browser.

To be safe, I would suggest using ICO, but if you don't care about non-supporting browsers showing something minor (like I don't) then use PNG/GIF (PNG favicon is up to 24bit).

"(PNG favicon is up to 24bit)." so no alpha transparency then

Originally Posted by davemies

"(PNG favicon is up to 24bit)." so no alpha transparency then

Testing done. Opera 9, FF 2 and Safari 3 (win) all show the icon at 24 bits and 32 bits.

IE 7 doesn't! So the markup I used was:

<link rel="icon" type="image" href="test.png">

To get it working in IE I had to use an ICO format.

<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="test.ico">