Firefox(+Camino), Safari, and Opera:

These browsers are easy to setup and only require a 16×16 image file (png, jpg, or gif) and a link tag in the head tag of your code.

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

IE7:

IE 7 is a little more tricky. First, IE requires an actual icon file. Not just a jpg or png renamed with an ico extension. But no worries there are a few sites online that will convert your images into ico format for you.

IE automaticaly checks the root directory for a file called favicon.ico, so thats where I recommend placing your image. (/favicon.ico)

You don’t need any link code snippet to make this work, but if you wanted to force IE to find it and or change it for another page you can use the following link code in the head tag.

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

I wrap this code with an IE conditional comment. Although the other browsers recognize this code, it’s not correct if your trying to produce accurate XHTML, because of the space in “shortcut icon”.

<!--[if IE]>
	<link href="/favicon.ico" type="image/x-icon" rel="shortcut icon" />
<![endif]-->

Troubleshooting IE:

If your favicon doesn’t show up immediatly it’s because you need to clear your temporary files as well as your browser history. That should force IE to update the favicon.

Also make sure that your not preventing IE from cacheing your favicon. You’ll need to check your headers, using a tool like fiddler. But most likely you won’t need to worry about this.

If you have any questions don’t hesitate to drop me an email.

This entry was posted on Tuesday, February 17th, 2009 at 5:23 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.