Not being a standard, there is much conflicting advice on creating and publishing favicons. This is my understanding of best practice.
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.
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