Favicons and App Icons: Making an ICO That Every Browser Displays

The .ico format is a small archive of images at different sizes, each possibly stored as a PNG or as a BMP with an alpha mask. That is its advantage over a plain PNG: the browser can pick the 16-pixel version for a tab and the 48-pixel version for a bookmark list, each drawn at its native size instead of scaled from one master. A modern ICO typically carries 16, 32 and 48 pixel entries.

If you supply only a PNG, most browsers will scale it and the result depends on their scaler. A 512-pixel PNG scaled down to 16 pixels loses thin strokes and fine detail; a hand-tuned 16-pixel entry stays legible because it was drawn for that size. This is why the best favicons are not simple downscales.

Browsers ask for 16 and 32 pixels for tabs, and 48 for some bookmark and history views. Windows shortcut icons use 48 and 256. iOS uses a 180-pixel Apple touch icon, Android uses 192 and 512 for the home screen and splash, and web app manifests want 192 and 512 with a purpose declaration. A single ICO with 16, 32 and 48 plus a 180 PNG and two manifest PNGs covers essentially everything.

Serving the right size matters for more than looks. A browser asked for a 16-pixel icon and given a 512-pixel one must decode and downscale it, which costs work on every tab and can produce a blurry result on displays without good filtering. Small files also mean the favicon request does not compete with the page for bandwidth on a slow connection.

At 16 pixels there is no room for text, gradients or thin outlines. A single strong shape with high contrast against both light and dark browser chrome is the only reliable approach. Detailed logos should be simplified for the favicon: drop the wordmark, thicken the strokes, increase the padding slightly so the shape is not clipped by the rounded tab, and check the result at actual size rather than at 400 percent.

Test on both a light and a dark tab bar. A dark logo on transparency disappears in dark mode; a light logo on transparency disappears in light mode. The usual fix is a filled background shape behind the mark, or two variants selected by a media query, which most modern browsers support through the manifest or a prefers-color-scheme link.

Browsers cache favicons aggressively, often beyond normal cache headers, and some store them per profile in a way that survives a hard refresh. After deploying a new icon you may see the old one for hours or days. The reliable trick is to change the filename, for example from favicon.ico to favicon-v2.ico, and update the link tags, because a new URL has no cached entry.

Also check that the file is actually being served at the root path the browser probes automatically, and that the server returns the correct content type. A 404 at /favicon.ico, or an HTML error page served with a 200, is a common reason a valid icon never appears. Declaring the icon explicitly in the page head removes the guesswork.