HTML Forum

**Mooofasa** · 02-21-2008, 02:02 AM

There have been a few topics on this matter, so let's make it clear.

Best practice
For the sake of IE compatibility, use an ICO format. It must contain at least 16 pixels by 16 pixels and no more than 256 colours. You should add 32*32, 48*48, 128*128, etc etc icons for people who want to shortcut your site on their desktop. It is also ideal to name it favicon and have it in the root directory of your site. Some older browsers supported favicon by finding the file in the root directory but did not read the link tag for it.

The code

HTML Code:

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

This will make it appear on all supporting browsers.

Alternatives
If you're not worried about it displaying in IE then you can use one of three formats: ICO, GIF or PNG. PNG is possibly your best bet, but if you want it animated go for GIF. PNG is supported at 32 bits on Firefox 2, Opera 9 and Safari 3 (Windows). To use GIF or PNG you should change the type to either image/gif or image/png.

For additional and up to date information on the favicon, check Wikipedia.

**Mooofasa** · 04-30-2008, 02:35 PM

Bump for reference.

**tamar** · 04-30-2008, 08:59 PM

You might want to point people to a favicon creator like this: http://tools.dynamicdrive.com/favicon/

Adding .ico to the end of your .gif or .jpg won't cut it.

**yangyang** · 04-30-2008, 10:20 PM

I'd just go with this:

<link rel="shortcut icon" href="favicon.ico">

no mime type.

**RevelationZ** · 04-30-2008, 10:39 PM

thanks buddy that helps alot

**aschecht** · 05-03-2008, 06:09 PM

Great thread - I was just trying to understand all of this favicon stuff.

Question - How does one post parallel favicon.ico files with different sizes? In other words, I want a 16x16px icon for the browser's address bar, a 32x32px for WinXP desktop, and a 48x48px icon for Vista, others.

Does one just post the 48x48px .ico file and its compressed for the lower res needs? Or does one post three different versions of the favicon.ico file? And if that's the case, how do you name them?

Andrew

**TheHosted** · 05-04-2008, 03:30 PM

Hello,

Where do you put the favico in the .html page? I've always put it after my cascading style sheet like the example below. Thanks for your help.

<title>TheHosted.com</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="http://www.thehosted.com/images/favicon.gif">

**Mooofasa** · 05-04-2008, 04:52 PM

It will automatically use the icon size that is required. When making icon files, you often have the capacity to use various sizes and colour depths.

So long as it is in the <head> section, it doesn't matter.

**aschecht** · 05-04-2008, 07:04 PM

Moofasa,

Thanks for the follow-up. After reading more (but having no personal experience with this), it sounds like the .ico file format is actually an archive of sorts that includes the files of various dimensions and color depths. Then, with a single .ico file, an application can pick out the exact image that is best suited for it (ie. 16x16 for browser's address bar, 32x32 for WinXP desktop, etc).

Am I understanding this correctly?

When one creates a .ico file, does the designer have to create each of the component files individually or do they just design it once and the program saves it in all of the appropriate file formats?

Andrew

**pzn** · 05-05-2008, 12:29 AM

Quote:

Originally Posted by TheHosted

Hello,

Where do you put the favico in the .html page? I've always put it after my cascading style sheet like the example below. Thanks for your help.

<title>TheHosted.com</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="http://www.thehosted.com/images/favicon.gif">

As Moofasa stated anywhere in the <head>, but make sure that you use a .ico instead of a .gif!

**vectorialpx** · 05-08-2008, 02:04 PM

.gif is oke... why you have doubts and why you make your life complicate?

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!