A Three-Size Favicon Was 15 KB and the Same Images Were 1.3 KB

The same logo, packaged as an .icoat increasing numbers of sizes:

file	sizes inside	size
favicon.ico	16 only	1,150 B
favicon.ico	16, 32, 48	15,086 B
favicon.ico	16, 32, 48, 64, 128	99,678 B

Adding two sizes multiplied the file by thirteen. Adding two more took it to nearly a hundred kilobytes — for an icon that is displayed at sixteen pixels.

The arithmetic gives it away

An uncompressed image with four bytes per pixel costs width × height × 4:

• 16 × 16 × 4 = 1,024
• 32 × 32 × 4 = 4,096
• 48 × 48 × 4 = 9,216

Add those up: 14,336 bytes. The measured three-size file is 15,086 — the difference is the directory at the front telling a reader where each image starts.

Do the same for five sizes and you get 96,256 against a measured 99,678. The format is not doing anything clever. It is storing raw bitmaps end to end.

That is because .icois built on the same idea as BMP: a header, then a grid of pixel values, with no compression step. We measured what that costs in the general case — the same image was 722 times bigger as a BMP— and a favicon is that same effect in miniature, one copy per size.

The individual PNGs are tiny by comparison: about 437, 447 and 450 bytes for the three sizes, roughly 1,334 in total. A PNG of a flat-colored logo compresses extremely well. The .icothrows all of that away.

What to actually ship

Modern browsers do not need the .icofor the sizes. The practical arrangement is:

One small favicon.ico, 16 and 32 only. It exists for older browsers and for the request that arrives at /favicon.icowhether you asked for it or not. At two sizes it is a few kilobytes rather than a hundred.

PNGs for everything else, declared in the HTML. A 180-pixel PNG for iOS home screens, a 192 and a 512 for Android and PWA manifests. Each compresses properly, each is fetched only when needed, and each can be cached separately.

An SVG if you have one. A single vector file serves every size at once and browsers have supported rel="icon"with SVG for years. On a logo like this one that is 1,823 bytes for all sizes, which is about where a vector starts winning anyway.

Which sizes are genuinely needed, rather than the twenty a generator will offer, is its own measurement.

Check what is inside one you already have

magick identify favicon.ico

It prints one line per image in the file, with the dimensions of each. That tells you immediately whether the icon a previous developer left behind is carrying two sizes or twelve, and the file size tells you what those are costing.

It is worth doing on any site you have inherited. A favicon generated by a tool set to "all sizes" is one of the more common pieces of unnoticed weight in a site's root, and it is fetched by every browser on the first visit.

Why the request happens whether you want it or not

Browsers ask for /favicon.icoeven when the HTML declares icons elsewhere, because the convention predates the declaration. A site with no file there returns a 404 for every new visitor.

So the pragmatic arrangement is a small .icoat the default path to absorb that request, and the good icons declared in the HTML for everything that reads the HTML. Two sizes in the .icois enough; the twelve-size file is answering a question nobody asked.

The practical version

Favicon generatorproduces the set. PNG to icobuilds the .icowhen you want to choose exactly which sizes go in — and choosing is the point, because each one costs its full uncompressed weight. ICO to PNGgoes the other way when you have inherited an icon and want the images out of it.

There is one more reason to keep the file small that has nothing to do with bytes. The favicon is requested early, often before the page has finished parsing, and on a slow connection it competes with things the reader is actually waiting for. A hundred-kilobyte icon is not just weight; it is weight fetched at the worst possible moment in the load.