We Analyzed 425,909 Favicons

The humble favicon was messily birthed with the pernicious IE5 release. Since that fateful day, browsers have slowly expanded favicon technology to encompass many wildly differing and lightly documented use cases. Here in 2021 favicons are found primarily in browser tabs, home screens, and Google search results, but they continue to pop up in the strangest places.

Recently my team was tasked with building a favicon fetcher. As a warmup, I looked to see how Chrome handles favicon loading. Do you know that the favicon loader in Chrome is many thousands of lines of code? Why is it so complicated?

We realized we knew very little about the favicon ecosystem. Eventually we decided to fetch the Tranco top 100,000 websites and analyze their favicons. We checked each home page for favicons, Apple touch icons, and manifest icons. We also examined fallback locations like /favicon.ico. Here’s a quick table to catch you up:

Table of Contents

• Before We Begin - Favicon Best Practices
• Speed, File Size & Resolution
• ICO Files
• Image Formats
• Icon HTML
• Dominant Color
• Methodology
• About Us
• Further Reading

Before We Begin - Favicon Best Practices

There are many excellent, modern articles that explain favicon best practices in painstaking detail. This is not one of them. Instead, I invite you to read Masa Kudamatsu’s obsessively researched How to Favicon in 2021.

Speed, File Size & Resolution

The average favicon network request takes 130ms, at least from our speedy cloud instance. The top 1,000 websites do a bit better, averaging 80ms. The median favicon file is 1.9k bytes. Not everyone is so considerate, though. Discord’s favicon is a 280k monster. Now that the popular chat app is worth $15B, they should follow Microsoft’s grudging advice from 2007 and turn that 256x256 into a PNG. I bet that would cut down on their Cloudflare bill.

The big winner is the mesmerizing favicon from eventhorizontelescope.org, clocking in at a hefty 7MB. When I downloaded this favicon, the density of my machine increased and nearly collapsed into a black hole.

When we examine all icon files (including apple touch and manifest icons), we find that many websites have higher resolutions. 52.5% of websites have at least one icon that’s 128x128 or greater. 18.3% of websites have one that’s 256x256 or greater.

It’s possible to go overboard, though. Lufthansa has an apple touch icon that’s 7087x5197. The NFL favicon is a bruising 2000x2000.

Hat tip to VSCode, the GOAT icon that fits into a svelte 112 bytes:

BTW, 2% of the favicons we examined are not square. Here’s a weird 40x31 specimen from Zendesk:

Also see the incredibly lazy Apple touch icon from Huge Domains, which simply redirects to their logo. Guys, the three people who added your website to their iOS home screens are not happy:

ICO Files

The ICO file format exhibits surprising staying power. Predating PNG by over a decade, I’ve come to love ICO files despite their many foibles. Foibles which include the lack of a magic number, but I digress.

56% of ICO files contain exactly one image, which isn’t shocking. You know what’s shocking? The hola.org favicon, which contains 20 images. A 12x12, 13x13, 14x14, 15x15, 16x16, 17x17, 18x18, 19x19, 20x20, 21x21, 22x22, 23x23…

Check out this startling ICO with 64 images, all roughly 16x16. I suspect a bug.

The original goal of the survey was to identify trends in ICO file resolutions. I am pleased to present the definitive answer. What percentage of ICO files contain images of various resolutions?

The most common combinations are 16x16, 16x16+32x32+48x48, 16x16+32x32, and 32x32 in that order. These combinations account for 79% of all ICO files.

Image Formats

The vast majority of the favicons offered up by websites are PNG. 71.6% of <link rel=”icon”> images are PNG. 21.1% of /favicon.ico files are secretly PNGs, including Reddit’s. Strangely, only 96.1% of Apple touch icons are PNG. Presumably the other 4% are broken.

Some websites are deeply confused about formats. For example, the uts.edu.au PNG icon is in fact a Photoshop PSD file. A few stalwarts cling to decrepit BMP files, too lazy to upgrade.

SVG is on the move, held back by lack of support in Safari. 1.1% of <link rel=”icon”> files are SVG, increasing to 2.5% for the top 1,000 websites. This is definitely the way to go. Also, 9% of all websites have an SVG mask-icon for Safari.

Unfortunately, the ballooning favicon ecosystem has led to a commensurate rise in the number of icons. For example, Seeking Alpha serves up 26 identical favicon images of varying size. Helpful tip - browsers can resize just as well as Photoshop these days:

Not to be outdone, appmaker.xyz serves up 141 nearly identical favicons for your enjoyment:

Icon HTML

You know, it’s tough to write a web browser. Your browser is expected to display divs, log every click for ad targeting, and also render favicons. To render favicons you rely on the HTML supplied by web pages. Unfortunately, web developers (like me) are incompetent. Not just the little guys, even top tech companies can’t get their HTML right.

Youtube says their icon is 144x144, but it’s 145x145.

<link rel="icon" href=".../favicon_144x144.png" sizes="144x144" />

$ identify https://www.youtube.com/s/desktop/3f03b58f/img/favicon_144x144.png
favicon_144x144.png PNG 145x145 145x145+0+0 8-bit sRGB 1664B 0.000u 0:00.000

Twitter says their favicon is an image/x-icon, but it’s a PNG.

<link rel="shortcut icon" href=".../twitter.ico" type="image/x-icon" />

$ identify https://abs.twimg.com/favicons/twitter.ico twitter.ico PNG 32x32
32x32+0+0 8-bit sRGB 912B 0.000u 0:00.000

The loosely worded favicon section of the HTML living standard makes it clear that the sizes=xxx and types=xxx attributes are just hints. Hints that the browser is free to ignore. In fact, I recommend that browsers ignore these hints because they are wrong much of the time. We calculated a 6.7% error rate for these attributes, where the size is not found in the image or the type does not match the file format.

74% of websites have a <link rel=”icon”>. 43% of websites have an apple touch icon. 13% still have the crusty precomposed variant. The winner for shortest favicon URL goes to https://exe.io/fv.ico, while the longest URLs are at facebookblueprint.com. Those bad boys are pushing 800 characters.

0.2% of pages had a favicon with a data url. This portly 403 from telia.se has a tasteful 140k favicon embedded in a data url.

Dominant Color

We did a hacky image analysis with ImageMagick to survey favicon colors. Here is the dominant color breakdown across our favicons. This isn’t very accurate, unfortunately. I suspect that many multicolored favicons are getting lumped in with purple.

Methodology

We used Go to fetch and normalize favicons. HTTP responses were cached on disk with gohttpdisk. The crawler outputs a CSV. We used Ruby to analyze the results since Go is terrible at data wrangling. We looked for favicons, Apple touch icons, and manifest icons including fallback paths like /favicon.ico. For each domain in the Tranco top 100,000, we tried both https://domain.com and https://www.domain.com before giving up. ImageMagick was used for image processing, as always.

About Us

This analysis and the gigantic icon map were created by Adam, Nathan & Patrick. Enjoy!

Further Reading

• wikipedia Favicon entry & HTML living standard
• How to Favicon in 2021 by Masa Kudamatsu
• tools like RealFaviconGenerator and besticon
• favicon APIs from Google, DuckDuckGo, Icon Horse