Why Your Favicon Looks Blurry on Retina Displays (and How to Fix It)

You spent hours on your logo. You exported it as a clean 16×16 favicon. You shipped it. And then you opened your site on a phone — and the icon in the tab looks like a wet smudge. If this sounds familiar, the cause is almost always the same: retina-density displays are rendering your favicon at 2× or 3× its native size, and the browser has nothing higher-resolution to fall back on.

The Quick Diagnosis

Browser tabs render the favicon at a logical 16×16 CSS pixels. On a regular monitor that's 16 physical pixels — fine for a 16×16 source. On a MacBook Retina screen, that's 32 physical pixels. On an iPhone, it can be 48. If you only ship 16×16, the browser is forced to upscale it, and a blurry mess is the inevitable result.

The 2026 Minimum You Need to Ship

For tabs and bookmarks alone, the modern minimum is:

favicon.ico containing both 16×16 and 32×32 (multi-resolution ICO).
favicon-32x32.png as a separate PNG, served via <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />.

That alone fixes 90% of "blurry favicon" complaints. If you also want crisp icons when users add your site to iOS Home Screen or install it as a PWA, you'll need apple-touch-icon.png (180×180), icon-192.png and icon-512.png.

Why Designing at 16×16 Doesn't Work

A common instinct is to "just design the icon at the actual size." This fails because the browser may downscale a 32×32 to fit retina at 16, or upscale your 16×16 to 32 — and downscaling is almost always sharper than upscaling. The professional workflow is the opposite: design at 512×512, then export every smaller size from that master. Each resize step uses the high-resolution original, not a previously downscaled version, so detail is preserved at every output size.

The .ico Format Is Not Dead

You may have read that .ico is "legacy" and PNGs are enough. They're not. Older browsers (still used by a long tail of corporate Windows installs), Windows pinned-tab shortcuts, and many RSS readers all request /favicon.ico by default. Skipping it means a guaranteed 404 in your access logs and a missing icon for those users. The good news: a single .ico file can contain multiple resolutions inside it (16, 32, and 48 are the standard trio).

Cache-Busting After You Fix It

Browsers aggressively cache favicons — sometimes for weeks. After you upload a new pack, users may keep seeing the blurry old one. The fix is to either rename the file (e.g. favicon-v2.ico) or append a query string to the references in your <head>: href="/favicon.ico?v=2". This forces every browser to fetch the new version on the next page load.

The One-Click Fix

Generating all of those sizes by hand in a graphics editor is tedious and easy to get wrong. Our Favicon Generator takes a single source image and produces the full pack — multi-resolution .ico, every PNG size, apple-touch-icon, site.webmanifest and a copy-paste HTML snippet — all in your browser, with no upload. Drop the ZIP into your site root, paste the snippet into your <head>, bump the cache version, and the blur is gone.

Privacy Note

Because the entire pipeline (cropping, resizing, .ico encoding, ZIP packaging) runs locally via the Canvas API, your logo never touches our servers — important when you're working on unreleased branding or a client asset under NDA.

Try the free Favicon Generator to ship a sharp favicon today.