If you don't know what a favicon is, read this
Webmaster-Talk article.
http://www.webmaster-talk.com/articl...important.html

I've seen favicons implemented a number of different ways so
I was wondering if there is any consensus on best practice.

For example I have always omitted the

type=”image/x-icon”

and it hasnt caused any problems.

Similarly some blog authors recommend adding

<link rel=”shortcut icon” href=”/favicon.ico”>

Some recommend creating a 16px by 16px PLUS a 32px by 32px .ico file
since some browsers allow users to create a custtom desktop icon from the URL in 32x32px.

Also, does it make any practical difference whether to use
a relative link or an absolute link to the .ico file?
My memory is a little hazy but I think I had
problems once with using a relative link.
Might be wrong about that though.

A couple of very useful articles here about how to create
an .ico file in PhotoShop
http://www.photoshopsupport.com/tuto...r/favicon.html

and some more advanced possibilities.
http://perishablepress.com/press/200...bout-favicons/

Interestingly, if you read both articles you will find out how to add an animated GIF as your favicon.
I've seen then before and always wondered how they were implemented.

Great article thanks for sharing!

is there any different way..? i think there's only one way to do that.. been using favicon for my site too..

Originally Posted by bogs

is there any different way..? i think there's only one way to do that.. been using favicon for my site too..

If you read my post again you will see that there are different ways
of getting the same result. IE has idiosyncratic behavior though
so I was asking if anybody has advice on best practice.

So what code do you use on your site for the favicon. Please share?

I don't use a code as both IE7+ and FF2+ automagically search for a favicon.ico file.

Originally Posted by KellyAX

I don't use a code as both IE7+ and FF2+ automagically search for a favicon.ico file.

You've got a point there but of course it doesn't work for IE6 (I think)
or if you want to use say, an animated GIF file.

Do Safari, Chrome and Opera automatically find the .ico file in the root?

When I updated my files to the XHTML standard I finally added favicon's too.
Had heard of them but never bothered before that.

I use <link rel="shortcut icon" href="favicon.ico" />
It seems to work on many browsers.

The thing I ran into is that Paint Shop Pro does not come with the ability
to make an .ico file. I had to go out and find a plugin.

If I remember correctly, I used 16px files.
My Favicons won't win any awards, but I got rid of those file not found errors.

Simplest way is to simply have the icon in the site root, all browsers will look for the favicon there. ONLY if the image is elsewhere in the site structure do you need to tell browsers where it is located.

Originally Posted by chrishirst

Simplest way is to simply have the icon in the site root, all browsers will look for the favicon there. ONLY if the image is elsewhere in the site structure do you need to tell browsers where it is located.

Perhaps that is the simplest.
But Im not sure its best practice for two reasons.

1) If I want to change the ico file to a non X-icon MIME type like
an animated GIF, the browser needs some instructions on where to find it.

2) I dont think that works in IE6. (Although perhaps in a year or two the retort will be "who cares")

The link worked for me... I have a favicon on FF at least (and what else really matters ). Thanks for posting!

I always just use

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

Nice, thanks for sharing

Nice article and thanks for sharing

The official IANA registered MIME type for ico files is image/vnd.microsoft.icon. Before this was registered, image/x-icon was the accepted option that complied with the rules of using x- for unregistered tokens. Many other erroneous MIME types are still seen, including image/ico, image/icon, text/ico, and application/ico. Many web servers do not come configured with a MIME type setting for .ico files, and may send their default MIME type, which might be text/html or text/plain.

This is what wikipedia has to say,


and just to let you know i have been using that code for the past 6 months or so and it works like a charm on all browsers be it FF , IE6 IE7 and other browsers.

I guess that is what the best code for the Favicon is .

That code should be put up as a sticky as there is always a compatibility problem with the "x-icon" type of thing, [ dont know , read it somewhere ]

Prateek.
PDJSolutions.

im just placing it at the root folder as well and works fine for most users...

There's a lot of free tools in the internet you just need to search.

I have always used:
<link rel="shortcut icon" href="favicon.ico">

it works perfectly for me

I use this code and it's working well on my website.
<link rel="shortcut icon" href="http://mywebsitearethebest.com/images/favicon.gif" />

I use this one ::

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

Originally Posted by thierryB

I use this code and it's working well on my website.
<link rel="shortcut icon" href="http://mywebsitearethebest.com/images/favicon.gif" />

I'd like to see your site but the link appears broken.
I am curious because you have defined a GIF image without
defining the MIME type so in theory it shouldn't work!

If you read the thread, my understanding is that in order to use
anything other the an .ico file, you must define the correct MIME.