Adding a favicon to your website

**Mooofasa** · 02-21-2008, 01: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, 01:35 PM

Bump for reference.

**tamar** · 04-30-2008, 07: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, 09:20 PM

I'd just go with this:

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

no mime type.

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

thanks buddy that helps alot

**aschecht** · 05-03-2008, 05: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, 02: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, 03: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, 06: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-04-2008, 11:29 PM

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, 01:04 PM

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

02-21-2008, 01:02 AM	#1 (permalink) Adding a favicon to your website
Mooofasa Defies a Status Latest Blog Post: Plugged Posts: 1,585 Name: Michael (mik) Land Location: England Talkupation:	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 3232, 4848, 128128, 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. __________________ Pseudocrap.net - Personal blog on education, life, humour and reviews. Opera Browser - The fastest and best free web browser. Opera Dev Tools - The advantage of Firefox has just been left behind.

04-30-2008, 01:35 PM	#2 (permalink) Re: Adding a favicon to your website
Mooofasa Defies a Status Latest Blog Post: Plugged Posts: 1,585 Name: Michael (mik) Land Location: England Talkupation:	Bump for reference. __________________ Pseudocrap.net - Personal blog on education, life, humour and reviews. Opera Browser - The fastest and best free web browser. Opera Dev Tools - The advantage of Firefox has just been left behind.

04-30-2008, 07:59 PM	#3 (permalink) Re: Adding a favicon to your website
tamar Ultra Talker Latest Blog Post: Confessions and Reflections of a [Former] ... Posts: 418 Name: Tamar Weinberg Location: New York Talkupation:	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. __________________ Techipedia: All About Social Media

04-30-2008, 09:20 PM	#4 (permalink) Re: Adding a favicon to your website
yangyang Experienced Talker Latest Blog Post: My CSS reset, reset.css Posts: 46 Talkupation:	I'd just go with this: <link rel="shortcut icon" href="favicon.ico"> no mime type. __________________ Permanent PR4 Links <= $5 Complete Handbook of Hosting Coupons 40000 pages+1900 images = Free Instant Site!

05-04-2008, 03:52 PM	#8 (permalink) Re: Adding a favicon to your website
Mooofasa Defies a Status Latest Blog Post: Plugged Posts: 1,585 Name: Michael (mik) Land Location: England Talkupation:	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. __________________ Pseudocrap.net - Personal blog on education, life, humour and reviews. Opera Browser - The fastest and best free web browser. Opera Dev Tools - The advantage of Firefox has just been left behind.

04-30-2008, 09:39 PM	#5 (permalink) Re: Adding a favicon to your website
RevelationZ Novice Talker Posts: 14 Name: Jermaine Talkupation:	thanks buddy that helps alot

05-03-2008, 05:09 PM	#6 (permalink) Re: Adding a favicon to your website
aschecht Extreme Talker Posts: 165 Name: A Location: San Jose, CA Talkupation:	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

05-04-2008, 02:30 PM	#7 (permalink) Re: Adding a favicon to your website
TheHosted Junior Talker Posts: 3 Name: TheHosted Talkupation:	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">

05-04-2008, 06:04 PM	#9 (permalink) Re: Adding a favicon to your website
aschecht Extreme Talker Posts: 165 Name: A Location: San Jose, CA Talkupation:	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

05-08-2008, 01:04 PM	#11 (permalink) Re: Adding a favicon to your website
vectorialpx Super Talker Latest Blog Post: Intamplari si amintiri [0 comentarii] Posts: 112 Name: irimia octavian Location: Romania Talkupation:	.gif is oke... why you have doubts and why you make your life complicate? __________________ my photos, my website, my blog [RO language] vectorial pixel web services :: and, sorry for my English !