Guide

Why your favicon looks blurry

Last updated 1 September 2026

A favicon that looks crisp in your design tool and mushy in the tab is almost never a file format problem. It is a scale problem, and there are four distinct causes.

1. It was downscaled in one jump

Resampling a 512 pixel image straight to 16 pixels forces the algorithm to average roughly a thousand source pixels into each output pixel. Thin features get averaged into their surroundings and vanish. Halving repeatedly — 512, 256, 128, and so on — preserves far more definition, because each step only averages four pixels into one.

Most tools do the single jump. If your icon looks soft only at the smallest size, this is usually why.

2. The strokes are thinner than a pixel

At 16 pixels, a line that occupies 0.6 of a pixel cannot be drawn as a line. The renderer spreads it across two pixels at partial opacity, and what you designed as a crisp stroke arrives as a grey smear. Line-art icons and light-weight typefaces hit this constantly.

The fix is not sharpening — it is thickening. Heavier weights, fewer strokes, larger counters.

3. Contrast that measures worse than it looks

This is the one that surprises people. White text on a bright orange or yellow background looks perfectly legible at full size, but the two colours are close in luminance. Once antialiasing has softened the edges at 16 pixels, there is not enough separation left and the shape dissolves into its own background.

White on a mid-orange measures around 2:1. The same orange with near-black letters measures over 9:1 — same tile, same design, legible instead of muddy. Dark-on-light is why road signage looks the way it does.

4. Too much detail to begin with

A 16×16 tile holds 256 pixels. A full logo with a wordmark, a gradient and a thin outline has more information than that grid can represent, so the renderer discards most of it. The result is not a small version of your logo — it is a different, worse image.

Favicons that work are usually one letter, one symbol, or one bold shape. If your brand mark is complex, the favicon should be a fragment of it rather than a shrunken copy.

How to actually check

Judging a favicon by a large preview is the root mistake. Look at the 16 pixel render magnified, so you can see the individual pixels a browser will draw, and check the contrast of that render rather than of the two colours you picked. If detail has already vanished at that size, no amount of file-format tuning will bring it back.

faviconflow shows both while you work: a magnified 16×16 grid, and a contrast reading taken from the shipped raster rather than from your colour pickers.