Favicon images use bandwidth. The favicon.ico file is downloaded by each new visitor. You want to optimize it to reduce bandwidth costs and server load. Read about the process that yielded a 832 byte reduction of most visits to Yahoo, one of the most popular sites in the world.
This article shows one way to optimize favicon images. It uses ImageMagick.
Yahoo favicon before this article: 1150 bytes [larger] My compression results: 318 bytes <-- Big savings! Yahoo favicon after this article: 318 bytes
First, we use ImageMagick, a free image manipulation command line toolset, to reduce the size of favicons. You will need to download and install the ImageMagick applications. ImageMagick is open-source and has many powerful options that are not available elsewhere, but are not as easy to use as those in Photoshop.
ImageMagickHere you need to get your favicon image. If you do not have a suitable favicon, search for a favicon generator on Google and you wil find several choices. For this tutorial, we can put the favicon from any any website in the C:\ directory folder. The location of the favicon will be C:\favicon.ico.
Here we will invoke ImageMagick from the command line and specify the -colors option to reduce the color palette of the favicon. We see the Yahoo favicon as the example.
Command line convert -colors 4 C:\favicon.ico C:\out.ico convert -colors 8 C:\favicon.ico C:\out.ico convert -colors 16 C:\favicon.ico C:\out.ico Description Use ImageMagic to reduce color palette to 4 colors. Process "favicon.ico" and make new file "out.ico".
I applied the color reduction algorithm with ImageMagick to three different favicons to demonstrate the savings. My results show that Yahoo could eliminate hundreds of bytes from their favicon without quality loss. In the three favicons tested, the 8 color setting was used in ImageMagick. The Digg favicon had a small loss of quality. The Yahoo and dotnetperls.com favicons had no loss in quality.
Digg favicon Before: 1150 bytes After: 318 bytes Yahoo favicon Before: 1150 bytes After: 318 bytes dotnetperls.com favicon Before: 1406 bytes After: 318 bytes
Because favicons are loaded last in most browsers, the perceived performance of your site won't be improved much by saving 832 bytes per load. Also, you might not save packets sent over the network by reducing the favicon size. The total HTTP content and header would fit onto one packet in both cases.
One problem you may have when running a website is that you can get thousands of requests for favicon.ico in subdirectories, which will return a 404. The solution here is to copy favicon.ico to the subdirectory. Strangely, many webmasters have noted that a GoogleToolbar user agent will request these.
Updated: March 15, 2009.
This tutorial was written and published on Dot Net Perls on February 17, 2009. At that time, Yahoo.com served a 1150 byte favicon to every visitor. When I checked Yahoo.com again several months later on May 29, 2009, Yahoo is serving the 318 byte favicon on all requests. Therefore it is likely that this tutorial saves 832 bytes from most accesses to the second most popular website in the world. There are no other guides to using ImageMagick in this way.
We saw how you can use ImageMagick to reduce the byte size of your favicon images. It is worthwhile to reduce the size of your favicon to 318 bytes. This is possible if your favicon does not have a large number of colors. Favicons are 16 x 16 pixels and high quality imagery isn't critical. Websites such as Digg and Yahoo could save many gigabytes a day by compressing their favicon images. In Yahoo's case, this was done losslessly.
Compression Tips