Creating a favicon

Not being a standard, there is much conflicting advice on creating and publishing favicons. This is my understanding of best practice.

CREATING
Starting with a canvas size of 32×32 in The Gimp, design your icon. Alpha channel transparency is allowed, keeping in mind that you have no control over the background user agents might use. Save your work as favicon32.png. Merge, do not flatten, layers when you save as png, as flattening removes transparency.

Scale your image to 16×16. You may have to over-sharpen, over-saturate, or heighten the contrast of the original image, change the scaling interpolation method, and/or retouch the image after scaling. Save your work as favicon16.png and close it.

Open favicon32.png again. Right click on the image, select File – Open as Layers, and select favicon16.png. You now have an image with two layers, one for each favicon resolution.

Right click on the image, select File – Save as, and save as favicon.ico. Select the minimum color depth, alpha depth, and palette needed for each layer. Do not use compression. Press “Save”.

Make sure the filesize of your new favicon is not too big.

PUBLISHING TO A STATIC SITE
For a static site, upload your file to (for example) http://example.com/favicon.ico and insert the following code into the <head> of every HTML page on the site:

<head profile="http://www.w3.org/2005/10/profile">
  <link rel="icon" 
        type="image/x-icon"
        href="http://example.com/favicon.ico">
  […]
</head>

TODO: Insure this “profile” stuff works. W3C sez so, so it must be true, but I’ve got a bad feeling about if. If it fails, remove the profile declaration and just use “” like I’ve always done. Check server logs for favicon-related errors.

Broken user agents will not recognize your icon unless it is in uncompressed .ico format, named “favicon.ico” (no other name), and saved to the Apache docroot. Vary from these de facto norms at your own risk. Microsoft products are said to be particularly bad in this regard. The behavior of some user agents includes:

  • Firefox 3: Accepts icons with names other than favicon.ico. No known problems.
  • Opera 10: Accepts icons with names other than favicon.ico. No known problems.
  • Safari 4: Requires the name favicon.ico.

PUBLISHING TO A CMS
For a CMS powered site, see your CMS documentation. In the particular case of Joomla, see the notes on favicons in Joomla.

REFERENCES
Creating a multi-resolution favicon including transparency with the GIMP
How to Add a Favicon to your Site
Alternatively, get something ready-made from sites like favicon.cc that share favicons under the Creative Commons license

Advertisements

About Warren Post

So far: Customer support guy, jungle guide, IT consultant, beach bum, entrepreneur, teacher, diplomat, over-enthusiastic cyclist. Tomorrow: who knows?
This entry was posted in Uncategorized and tagged , . Bookmark the permalink.

One Response to Creating a favicon

  1. Pingback: Adding a new web site to an existing shared hosting account on Pair Networks | A maze of twisty little passages

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s