Favicon.ico Compression Tutorial

Favicon images use bandwidth.

The favicon.ico file is downloaded by each new visitor. We can optimize it to reduce bandwidth costs. This process yielded an 832 byte reduction of most visits to Yahoo, a popular site.

Favicon compression results

Yahoo favicon before this article: 1150 bytes [larger]
My compression results:             318 bytes [smaller]
Yahoo favicon after this article:   318 bytes

Intro. First, we use ImageMagick, a free image manipulation command line tool set. You will need to download and install the ImageMagick applications. ImageMagick is open-source and has many powerful options that are not available elsewhere.

ImageMagick: www.imagemagick.org

If you do not have a suitable favicon, search for a favicon generator on Google. You will find many choices. We can put the favicon from any website in the C:\ directory folder. The location of the favicon will be C:\favicon.ico.

ImageMagick convert. Here we will invoke ImageMagick from the command line. We specify the "-colors" option to reduce the color palette of the favicon. We see the Yahoo favicon as the example. The file has since been changed on Yahoo.

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".

Savings. 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.

Colors: In the three favicons tested, the 8 color setting was used in ImageMagick.

Results: The Digg favicon had a small loss of quality. The Yahoo and Dot Net Perls favicons had no loss in quality.

Digg favicon

Before: 1150 bytes
After:  318  bytes

Yahoo favicon

Before: 1150 bytes
After:  318  bytes

 favicon

Before: 1406 bytes
After:  318  bytes

Performance. 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.

Note: The total HTTP content and header would fit onto one packet in both cases.

404 errors. 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 404 errors. The solution here is to copy favicon.ico to the subdirectory.

Note: Strangely, many webmasters have noted that a GoogleToolbar user agent will request these.

Yahoo. This tutorial was published 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.

Therefore: This tutorial saved 832 bytes from most accesses to this website. There are no other guides to using ImageMagick in this way.

Summary. ImageMagick reduces the byte size of favicons. It is worthwhile to reduce the size of your favicon to 318 bytes. This is possible if your favicon has few colors. Favicons are small. High-quality images are not critical.

So: Websites such as Digg and Yahoo could save many gigabytes a day by compressing their favicon images.

Related Links