Blog

Optimizing Favicons For The World's Top 500 Websites

Okay, who really cares about Favicons? Well, we do and you definitely should too. Our recent study revealed that all Favicons served around the Internet are bloated, unoptimized, uncompressed, and suck up bandwidth way more than they should be. Today we are open sourcing our ultimate remedy for this problem but, before we reveal it, let’s first explore the eye-popping results of our tests.

Favicons
 

A brief history of Favicons

In case you’ve been in a coma for the past 20 years, let me first remind you what a Favicon is and how it’s used and distributed around the Web.

A Favicon is a small, usually 16×16 pixel image displayed in the address bar in your favourite browser. You can also find them in tabs, bookmarks, and search history. The largest (256×256 pixels) essentially serve as additional real-estate for branding used by web developers.

The Microsoft ICO file format was chosen in 2003 to be the standard way to define this graphic element. The reason for this choice is that the ICO format is a container which allows multiple sizes of bitmap to be stored inside. A web browser can choose the most appropriate image size based on the display resolution instead of scaling a single image to fit. A scaled image could look acceptable, but a custom-drawn one for multiple resolutions always looks better.

Pushing the limits of an ICO format

A few days back, we decided to run an interesting experiment. We crawled the world’s top 500 websites and downloaded their respective Favicons. Next, we checked how many individual images authors had packed into the ICO container and how much further they could be compressed. The results were staggering.

Nearly 98% of all the websites ship uncompressed pixel data in an ICO container. On average we were able to bring the Favicon size down by over 70%. That’s an enormous amount of savings given the fact that Favicons found on some of the highest-profile websites are not exactly small.

The absolute maximum savings we were able to achieve was 98.64%, bringing the size of an icon found on Brilio.net (Alexa #339) from 161KB (165662 bytes) to just 2.19KB (2248 bytes). Serving a 161KB Favicon is generally not the best idea, but we will get to that later.

Savings were measured using the following formula:

100 * (original - optimized) / original

Interesting Favicon stats

On average, across the top 500 websites we tested, Favicons include 2.2 different sizes. The most popular combination is usually 16×16 and 32×32. Not really a surprise as the default size displayed by every browser is 16×16. The additional 32×32 file serves as a 2x variant for high DPI screens (think “Retina”).

The maximum number of sizes we found in a single file was 12 used by Zoho.com (Alexa #78). For unknown reasons, Zoho decided to ship four variants - 16, 24, 32, and 48 px. Additionally each at different bit depths - 4, 8, and 32 bpp.

The average size of a Favicon file in 2021 is 12.13 KB (12429 bytes). Yes, still around 70% more than it should be.

Hall of shame: 10 largest Favicons

Because we have all the data we need, why not create a list of the top 10 heaviest and most bloated Favicons found on the Internet? Here it goes:

PlaceAlexa RankSiteBeforeAfterSavings %
10#409Inquirer.net97.34 KB9.21 KB90.53%
9#280Geeksforgeeks.org99.08 KB6.59 KB93.34%
8#277Trello.com105.63 KB17.95 KB82.99%
7#296Shaparak.ir110.15 KB16.41 KB85.09%
6#496Newstrend.news110.79 KB12.77 KB88.47%
5#339Brilio.net161.77 KB2.19 KB98.64%
4#387Nypost.com165.68 KB14.56 KB91.21%
3#325Loom.com167.68 KB14.67 KB91.24%
2#456Livejournal.com190.15 KB21.24 KB88.82%

The websites above receive intense monthly traffic and the amount of bandwidth wasted is just astonishing. If you correctly assume that serving a 190 KB Favicon does not fit into even the most generous web performance budgets, have a look at our #1:

PlaceAlexa RankSiteBeforeAfterSavings %
1#440Goo.ne.jp427.74 KB16.64 KB96.01%

Let’s say this out loud - four hundred and twenty seven kilobytes of data (mis)used to pack six PNG files into a Favicon. In Japan, where most of the audience of Goo.ne.jp live, the cost of receiving this single file is $0.04 USD. In Canada, a GET request to www.goo.ne.jp/favicon.ico will set you back $0.06 USD.

If you’d like to get access to the dataset used to compile the above results, please reach out to us. We will provide you with the original and optimized Favicons as well as individual PNGs that formed the final ICO file.

Favicons done right

After you’ve prepared different sizes of your icons in a PNG format, quantized the images in RGB(A) space, took care of dirty alpha cleaning and used Zopfli for Deflate compression, now it’s time to generate a proper Favicon. For example, using ImageMagick (not recommended) you can create the ICO file like this:

$ convert 01.png 02.png favicon.ico

The result of that operation is a bloated, uncompressed Favicon that is orders of magnitude larger than the sum of the individual PNG files. Why is that? Let’s have a look at what constitutes a valid ICO file.

The ICO format has a relatively simple structure - a 6-byte ICONDIR identifies the file as an ICO and contains the count of images inside. This is followed by a set of 16-byte ICONDIRENTRY structures, one for each image. Each ICONDIRENTRY structure contains the image size, bit depth and absolute offset of each bitmap in the file.

OffsetSize (bytes)Purpose
02Reserved. Must always be 0.
22Specifies image type: 1 for icon (.ICO) image, 2 for cursor (.CUR) image. Other values are invalid.
42Specifies number of images in the file.
ICONDIR
OffsetSize (bytes)Purpose
01Specifies image width in pixels. Can be any number between 0 and 255. Value 0 means image width is 256 pixels.
11Specifies image height in pixels. Can be any number between 0 and 255. Value 0 means image height is 256 pixels.
21Specifies number of colors in the color palette. Should be 0 if the image does not use a color palette.
31Reserved. Should be 0.
42In ICO format: Specifies color planes. Should be 0 or 1.
62In ICO format: Specifies bits per pixel.
84Specifies the size of the image's data in bytes
124Specifies the absolute offset of the BMP or PNG data in the ICO file
ICONDIRENTRY (one per image)

The simplicity and flexibility of the format makes sense even 18 years after it was introduced.

Open sourcing icopack

It’s high time we unveil our internal tool used to efficiently create Favicons from individual PNG files. We call it icopack and, at this point, you should definitely check it out. It’s 140 lines of highly-performant C code with zero external dependencies released under GPLv3.

icopack does one thing and one thing alone - assembles a perfectly valid ICO file from any given optimized (and highly compressed) PNG files. To create a new Favivon, simply call:

$ icopack output.ico icon-1.png icon-2.png icon-N.png

After running this simple, yet extremely efficient program, you will quickly realize that the resulting ICO files weigh a fraction of the size produced by ImageMagick, icotool, or any other executable intended for creation of Windows Icon files.

Ready to try Optidash?

Start optimizing your images smarter. Integrate in minutes.

Create Free Account Get In Touch

This website uses cookiesBy using Optidash, you agree to our Cookie Policy.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.