How to Make a Favicon That Doesn't Look Blurry
A blurry favicon is one of the more noticeable small polish issues a site can have — browser tabs are small, so any softness in the icon is immediately visible. It's almost always caused by one thing: relying on a single image and letting the browser scale it, instead of generating a dedicated version for each size that actually gets requested.
Generate a full set in your browser (no upload, free)
The Favicon Generator on keptlocal takes one image and produces every size modern browsers and devices request, entirely on your device.
- Upload a square (or square-ish — it gets center-cropped) image.
- Check the size previews at 16, 32, 48, and 180px to confirm detail survives the shrink.
- Click Generate & download .zip.
- Unzip, drop the files into your site's static asset root, and add the included
<link>tags to your<head>.
Why resizing once isn't enough
A favicon isn't displayed at one fixed size — it's requested independently, at a specific pixel dimension, by whatever surface is showing it. A browser tab wants 16×16 or 32×32. iOS specifically looks for a 180×180 image tagged as apple-touch-icon when a user bookmarks your site to their home screen — and if it can't find one, it falls back to screenshotting your page, which looks considerably worse than almost any icon would. Android and PWA install prompts look for 192×192 and 512×512 PNGs per the Web App Manifest spec. Serving a single image and relying on the browser to scale it on the fly produces soft edges at small sizes, because generic image scaling doesn't know which details in your logo matter enough to preserve.
Designing something that survives 16 pixels
Most blurry-favicon complaints trace back to the source design, not the resizing step. A few things that hold up at small sizes:
- One simple shape, not a full logo. A wordmark with your company name reads fine at 200px and turns into illegible gray mush at 16px. Use just the symbol or a single initial for the favicon version.
- Strong contrast. Favicons sit against both light and dark browser chrome depending on the viewer's OS theme — a mark with low contrast against its background can vanish in one theme even if it looks fine in the other.
- Minimal fine detail. Thin lines, small text, and subtle gradients don't survive being scaled down to a handful of pixels. Bold, simple geometry does.
- Centered composition. Since non-square sources get center-cropped automatically, keep your subject centered with a little margin so nothing important gets clipped.
What the ICO format actually contains
A .ico file isn't a single image — it's a small container holding multiple images at different sizes, each labeled with its dimensions, so a requesting browser picks the size closest to what it actually needs rather than scaling one image up or down. Older ICO files encoded each size as raw BMP data; modern ones (including what this tool generates) embed standard PNG data instead, which every current browser and operating system reads correctly and which compresses considerably smaller.
Privacy: what happens to your image
Every resize happens on an HTML5 canvas in your browser, and the final ZIP is built locally with JSZip. Your source image is never uploaded — open DevTools → Network while generating and you'll see nothing sent.
Generate a favicon set now with keptlocal's free Favicon Generator — no upload, no signup. Need to crop your logo to square first? Try Crop Image.
Frequently asked questions
Why is my favicon blurry even though my logo is high resolution?
What's the actual minimum I need — just favicon.ico?
Do I need to update my HTML, or does the browser find favicon.ico automatically?
My source logo has a transparent background — does that carry through?
Can I use a non-square source image?
Turn one image into a complete favicon set — free, in your browser.
No upload. No signup. Runs in your browser.