Convert PNG to ICO

How it works

The source PNG is resampled three times — to 16, 32 and 48 pixels — and each result is written as a complete PNG. Those three PNGs are then assembled into an ICO container: a six-byte header saying how many images follow, then a sixteen-byte directory entry per image recording its dimensions, color depth, byte length and offset, then the image data itself.

That is the entire format. An ICO has no compression of its own and no pixel data of its own; it is a table of contents in front of some files. Understanding that explains most of the confusion around it, including why a "single-size ICO" is technically valid and practically pointless.

Each size is resampled from your original rather than from the previously generated one. Chaining downscales is the common shortcut and it visibly softens the smallest entry, which is the one that matters most because it is the one in the browser tab.

Why not just rename a PNG

It nearly works, which is what makes it a trap. Browsers are forgiving enough that a PNG served at /favicon.ico often displays, so the mistake survives testing. Where it fails is everything else that reads the file: Windows shortcut icons, some feed readers, older browsers, and any tool that parses the ICO directory before decoding. Those see a malformed container and show nothing.

The other failure is quality. A renamed 512-pixel PNG forces every consumer to downscale it themselves, at whatever quality their renderer happens to offer, on every draw. Supplying a 16-pixel version you have looked at yourself is the entire point of the format.

Declaring it in your HTML

Dropping favicon.ico at the site root is enough on its own — browsers request that exact path whether or not you mention it. Declaring it explicitly is still worth doing, because it lets you control caching and stops a stale icon surviving a redesign:

<link rel="icon" href="/favicon.ico" sizes="any">

sizes="any" is the part people leave out. Without it, a browser that also finds an SVG or PNG declaration has no way to know the ICO carries several resolutions, and may pick the wrong one for the surface it is drawing.

A modern set is usually the ICO plus one larger PNG, each doing the job it is good at:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

The ICO covers the browser tab and the Windows taskbar, where 16 and 32 pixels are what actually get drawn. The PNGs cover home-screen shortcuts and install prompts, which want something much larger. Neither replaces the other, which is why the thirty-year-old format is still in the list.

Designing for sixteen pixels

Sixteen pixels is 256 pixels in total, less than a single character of this sentence. Two things follow, and both are worth accepting before you generate anything.

Detail disappears completely. Gradients become flat color, thin strokes vanish or alias into gray, and text stops being text. The second example above is the common version of this: a wordmark that reads perfectly at 48 pixels and is unreadable at 16.

Contrast carries further than shape. An icon that is a dark form on a light field stays recognizable at any size; one built from two mid-tones will not. Look at your 16-pixel entry at actual size, next to a real tab bar, before shipping it — the preview at 400 percent is reassuring and tells you nothing.