Optimizing Favicons For The World's Top 500 Websites

Alright, who really gives much thought to Favicons, right? Well, we certainly do, and you should too. Our latest investigation uncovered a rather surprising fact: Favicons, those tiny icons that adorn browser tabs, are universally bloated, unoptimized, and uncompressed across the internet. Not only that, but they’re also consuming far more bandwidth than necessary. Today, we’re excited to announce that we’re open-sourcing our ultimate solution to this issue. But before we unveil our remedy, let’s take a closer look at the jaw-dropping findings from our tests.

A Brief History of Favicons

In case you’ve been out of the loop for the past two decades, let’s start by revisiting what a Favicon is and its role in the online world.

A Favicon, short for favorite icon is a small image typically measuring 16×16 pixels. You’ve probably seen it displayed in the address bar of your favorite browser. Additionally, Favicons can be found in browser tabs, bookmarks, and search history. For web developers, larger versions of the Favicon (up to 256×256 pixels) serve as additional branding real estate, allowing for more prominent and recognizable branding on the web.

In 2003, the Microsoft ICO file format was selected as the standard method for defining this graphic element. This decision was driven by the ICO format’s versatility as a container, allowing for multiple sizes of bitmaps to be stored within. This means that instead of scaling a single image to fit various display resolutions, a web browser can select the most appropriate image size from the ICO file. The result? Custom-drawn icons for multiple resolutions, ensuring a more polished and visually appealing appearance compared to scaled images.

Pushing the Limits of an ICO Format

A few days ago, we embarked on an intriguing experiment. We crawled the top 500 websites worldwide and collected their respective Favicons. Our next step was to analyze how many individual images authors had packed into the ICO container and determine the extent to which they could be further compressed. The results of our investigation were truly staggering.

We discovered that nearly 98% of all websites distribute uncompressed pixel data within their ICO containers. However, through our optimization efforts, we were able to achieve an average reduction in Favicon size of over 70%. This represents a significant amount of savings, especially considering that Favicons on many high-profile websites are not exactly small to begin with.

The absolute maximum savings we achieved were remarkable, reaching 98.64%. For instance, we reduced the size of an icon found on Brilio.net (Alexa #339) from a staggering 161KB (165,662 bytes) to a mere 2.19KB (2,248 bytes). Serving a Favicon of 161KB is typically not advisable, but we’ll delve deeper into that aspect shortly.

Savings were measured using the following formula:

100 * (original - optimized) / original

Interesting Favicon stats

On average, across the top 500 websites we analyzed, Favicons include 2.2 different sizes. The most common combination typically consists of 16×16 and 32×32 sizes. This observation isn’t particularly surprising, considering that the default size displayed by every browser is 16×16. The additional 32×32 file functions as a 2x variant, catering to high DPI screens, such as “Retina” displays.

The highest number of sizes we encountered in a single file was 12, observed on Zoho.com (Alexa #78). Interestingly, Zoho opted to include four variants—16, 24, 32, and 48 pixels—in addition to each variant having different bit depths: 4, 8, and 32 bits per pixel (bpp).

As for the average size of a Favicon file in 2021, it stands at approximately 12.13 KB (12,429 bytes). This figure is still around 70% higher than what it ideally should be, highlighting the widespread issue of Favicons being larger than necessary.

Hall of Shame: 10 Largest Favicons

Since we have all the necessary data, why not compile a list of the top 10 heaviest and most bloated Favicons found on the Internet? Here it is:

The websites listed above experience significant monthly traffic, and the amount of bandwidth wasted is simply astonishing. Assuming that serving a 190 KB Favicon exceeds even the most generous web performance budgets, let’s take a closer look at our #1:

Let’s put this into perspective — 427 kilobytes of data are used to pack six PNG files into a Favicon. In Japan, where the majority of Goo.ne.jp’s audience resides, the cost of receiving this single file is $0.04 USD. Meanwhile, in Canada, a GET request to www.goo.ne.jp/favicon.ico will set you back $0.06 USD.

If you’re interested in accessing the dataset used to compile the above results, please don’t hesitate to reach out to us. We’ll provide you with the original and optimized Favicons, as well as the individual PNGs that formed the final ICO file. Simply contact us through our website.

Favicons Done Right

After preparing different sizes of your icons in PNG format, quantizing the images in RGB(A) space, performing dirty alpha cleaning, and utilizing Zopfli for Deflate compression, it’s time to generate a proper Favicon. For instance, you can create the ICO file using ImageMagick (although it’s not recommended) with the following command:

$ 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 take a closer 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. Following this are 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.

The simplicity and flexibility of the ICO format still make sense even 18 years after its introduction.

Open Sourcing icopack

It’s time to unveil our internal tool used for efficiently creating Favicons from individual PNG files. We proudly present “icopack”, and at this juncture, you should definitely check it out here. This tool comprises 140 lines of highly performant C code with zero external dependencies, released under GPLv3.

icopack is designed for a singular purpose—to assemble a perfectly valid ICO file from any given optimized (and highly compressed) PNG files. To create a new Favicon, simply execute the following command:

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

Upon running this simple yet remarkably efficient program, you’ll swiftly notice that the resulting ICO files weigh a fraction of the size produced by tools like ImageMagick, icotool, or any other executable intended for the creation of Windows Icon files.