How to Make a Favicon That Doesn't Look Blurry
Guide · Image Tools
A favicon is displayed as small as 16x16 pixels in a browser tab, which is smaller than most people design at. A logo that looks sharp and detailed at normal size will often turn into an unreadable smudge once it's shrunk that far down — and that's a design problem, not an export problem, so no amount of technical fiddling with the file fixes it after the fact.
Simplify before you shrink
Thin lines, small text, and fine detail all disappear at 16x16px. A favicon needs to read as a shape, not as a picture — a single bold letter, a simplified icon, or a solid silhouette works far better than a shrunk-down version of your full logo with a tagline underneath it. If your logo has multiple elements, pick the single most recognizable one (often just the icon mark, without the wordmark) and use that alone.
High contrast over subtlety
Soft gradients and pastel-on-pastel color combinations that look elegant at full size just turn into gray mush at favicon size. A favicon benefits from stronger contrast than the rest of your brand might normally use — a dark mark on a light background, or vice versa, reads far more clearly in a tiny tab than a subtle two-tone gradient does.
Export every required size, not just one
Browsers and devices don't all request the same favicon size — you need 16x16 and 32x32 for browser tabs, 180x180 for Apple touch icons, and often a larger PNG or an .ico container that bundles several sizes together. Generating only a single large file and letting the browser scale it down produces worse results than exporting each size individually, because scaling algorithms handle "shrink a lot" worse than a purpose-made small version does.
Test it in an actual tab
A favicon that looks fine in an image preview at 100% zoom can still look wrong once it's actually sitting in a browser tab next to eleven other tabs, competing for a few pixels of attention. Load the finished favicon into a real page and look at it in the tab bar before calling it done — it's the one asset on your whole site where "looks right in the editor" and "looks right in production" most often disagree.