Favicon Looks Blurry? Fix Pixelation

A blurry favicon almost always means the browser is upscaling a file that is too small, downscaling a poorly exported large image, or squeezing a non-square logo into a square box. Favicons render at 16×16 or 32×32 pixels in tabs. Fine details disappear when the source file is wrong.

This guide explains why pixelation happens and how to export a sharp icon set from one master file. Preview sizes in Favicon Check before you ship.

Why favicons look blurry

Browsers do not show your 512×512 upload at full size in a tab. They pick the closest declared size and rasterize it to roughly 16×16 or 32×32 physical pixels.

Blur happens when:

1. Source is too small - 16×16 PNG blown up to 32×32 on retina displays
2. Wrong sizes attribute - browser picks a mismatched file
3. Non-square artwork - logo forced into a square with soft scaling
4. Over-compressed JPG - artifacts visible at thumbnail size
5. Thin lines and small text - illegible at tab size regardless of resolution
6. Screenshot used as icon - soft edges and mixed resolutions

Sharp favicons start with a large master and deliberate downscaling, not the other way around.

Step 1: Check what file the browser actually uses

You may have five icon files but the browser loads the smallest one for tabs.

1. Open Favicon Check and scan your URL.
2. Note each listed file with sizes and dimensions.
3. Download the 32×32 and 16×16 entries.
4. Open them at 100% zoom in an image editor.

If the "32×32" file is actually 16×16 pixels stretched, or a fuzzy JPG, you found the problem.

Wrong sizes metadata

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-512.png">

The browser may downscale 512 to 32, which can work if export quality is good. But declaring sizes="32x32" on a soft or wrong file still looks bad. Match real pixel dimensions to the attribute.

Step 2: Export from a 512×512 master

Workflow that works for most brands:

1. Design on a 512×512 px square artboard.
2. Keep the mark inside the center 80% safe zone.
3. Export PNG at 512, 192, 180, 32, and 16 px using downscaling (bicubic or Lanczos).
4. Build favicon.ico with 16, 32, and 48 px layers.
5. Declare each size in HTML. See the Favicon Sizes Guide.

Never upscale 16×16 to 32×32. Always design large, export small.

The size lab on Favicon Check lets you upload a square PNG and preview tab, bookmark, and home screen contexts before you commit files.

Step 3: Simplify the artwork for small sizes

Logos designed for letterheads rarely survive 16 px.

Do

• Bold silhouette or single-letter monogram
• Solid shapes, high contrast
• 2-3 colors max
• Test at actual pixel dimensions

Avoid

• Full wordmarks with thin type
• Gradients that turn muddy when small
• Hairline strokes under 2 px at export size
• Photographic textures

Export a simplified variant for favicon use if your primary logo is detailed. Many brands use a monogram in tabs and the full logo on the site.

Step 4: Fix non-square sources

Rectangular logos get letterboxed or stretched into a square favicon box.

Crop intentionally to square before export. Center the symbol. Do not rely on the browser to pad unevenly.

If your mark must stay wide, use a square canvas with horizontal padding baked in, not transparent gaps that browsers interpret inconsistently.

Step 5: Use PNG or ICO, not JPG for small icons

JPG compression creates artifacts around edges. At 16×16 those look like blur.

Use PNG-24 for flat graphics. Optimize file size with tools like pngquant after you confirm sharpness.

Step 6: Fix retina / HiDPI tab blur

On retina displays, a 16×16 asset may be displayed in a 32×32 device pixel area. Supply both:

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

If you only ship 16×16, the browser upscales and softness follows.

Step 7: iOS and Android look different from tabs

A sharp tab icon can still look soft on a home screen if apple-touch-icon is low resolution.

Blur on mobile home screen is often a 180×180 or 192×192 problem, not the tab file. Scan with Favicon Check and check manifest and apple-touch entries separately.

Step 8: Validate after export

1. Upload new files to production.
2. Update href if filenames changed.
3. Scan live URL with Favicon Check.
4. Download each size from the results and inspect at 100%.
5. Test in browser tab and on a phone home screen.

If it looks sharp in the checker preview but soft in one browser, clear cache or test incognito. Cached low-res versions can persist for days.

Common blurry favicon mistakes

Exporting from Figma at 1x only

You exported 16×16 once and stopped. Export the full ladder from a 512 master.

Using the same 512 file everywhere

Browsers downscale, but poor downscaling algorithms in some tools soften edges. Pre-render each size.

Tiny text in the icon

"Company name in 8px font" becomes mush. Use a symbol or single letter.

Semi-transparent edges on dark browser UI

White logo on transparent PNG disappears on light chrome and looks fuzzy on dark. Add a subtle background circle or solid backing plate.

Re-screenshotting an existing favicon

Each generation loses quality. Rebuild from vector source.

Low-quality ICO generators

Some online tools produce soft 32×32 layers. Export PNGs yourself from Figma, Sketch, or Illustrator, then bundle with a reliable ICO builder. Download from Favicon Check and inspect at 100% zoom.

Design checklist before export

• Master artboard is 512×512 px
• Mark fits inside center 80% safe zone
• Simplified version for small sizes
• PNG exports at 16, 32, 180, 192, 512
• favicon.ico includes 16 and 32 layers
• Each sizes attribute matches real pixels
• Previewed in Favicon Check size lab
• Tested in tab at 100% and 200% display scaling

Blurry vs missing favicon

Missing favicon troubleshooting lives in Favicon Not Showing. Blurry means the file is found but quality is wrong.

Retina laptops vs standard displays

On Retina MacBooks, tab icons render with more device pixels. Without a 32×32 file, the browser upscales 16×16. Older displays hide the problem. Retina exposes it immediately.

Upload your icon to the Favicon Check size lab and switch between tab preview and enlarged view. If the 32×32 preview already looks soft, the export is wrong, not the display.

FAQ

Why is my favicon blurry in Chrome?

Chrome likely upscales a 16×16 file on a retina display, or downscales a poorly exported large PNG. Ship a crisp 32×32 and 16×16 pair from a vector master.

What is the best size to avoid blur?

Design at 512×512, export 32×32 and 16×16 for tabs, 180×180 for iOS, 192×192 for Android.

Can SVG fix blurry favicons?

SVG stays sharp on desktop browsers that support it. iOS and Android still need raster PNGs. Use SVG plus PNG fallback.

Why does my favicon look fine in the designer but blurry live?

Design tools preview at arbitrary zoom. Export at real pixel sizes and inspect at 100%.

Does favicon.ico reduce quality?

ICO can hold multiple resolutions. Quality depends on what you embed. A sharp 32×32 layer inside ICO looks sharp.

How do I preview blur before deploy?

Upload to the size lab at Favicon Check and check browser tab and home screen previews.

My apple-touch-icon looks blurry on iPhone

Export a dedicated 180×180 PNG from your master. Do not upscale the 32×32 tab icon.

Will compression tools make my favicon blurry?

Aggressive lossy compression can. Use lossless or mild PNG optimization after confirming sharp edges at 100% zoom.

Sharp in Favicon Check but soft in the tab?

Likely cache or a different declared file is active. Compare scan results with view-source and test incognito.

Bottom line

Blurry favicons come from small sources, bad exports, and artwork too detailed for 16 px. Design at 512×512, downscale to each declared size, simplify the mark, and validate with Favicon Check. Sharp tabs are a export problem, not a browser bug.