How to Create a Favicon ICO From PNG or SVG (Without the Blur)

You exported your logo at 512 × 512, renamed it favicon.ico, dropped it in the site root — and the browser tab now shows a grey smudge, a cropped corner of your wordmark, or nothing at all. This is the single most common favicon mistake, and it isn't a file-naming problem. An ICO is a container: it can hold several bitmaps at different sizes, and the browser picks the one that matches the slot it needs to fill. Give it one giant image and the browser downscales it on the fly, badly.

Below is how to create a favicon ICO that holds 16, 32 and 48 px frames, how to hand-tune the smallest one so it stays legible, and when you should skip ICO-first thinking entirely in favour of an SVG favicon plus an apple-touch-icon PNG.

Why a 512 px logo turns to mush at 16 px

A browser tab icon is roughly 16 CSS pixels wide (32 on a 2× display). Scaling 512 px down to 16 px means every output pixel is an average of about 1,024 input pixels. Three things break at once:

• Thin strokes vanish. A 4 px outline in the original becomes 0.125 px — the resampler turns it into a faint grey wash.
• Text becomes noise. Any wordmark under about 6 characters tall is unreadable; a tagline is pure texture.
• Padding eats the icon. Logos exported with generous transparent margins lose another 20–30% of their usable area, so the mark looks tiny and off-centre.

The fix isn't a better resampling algorithm. It's different artwork at different sizes — which is exactly what a multi-size ICO file is for.

What should actually be inside the ICO

Three embedded bitmaps cover every real-world use:

• 16 × 16 — browser tab, bookmarks bar, address bar on 1× displays.
• 32 × 32 — tabs on HiDPI/Retina screens, Windows taskbar and shortcuts.
• 48 × 48 — Windows desktop shortcuts and some bookmark grids.

You can add 64 or 256 px frames, but they mostly inflate the file; modern surfaces that want big icons read your PNG or SVG instead. A three-size ICO typically lands around 5–15 KB.

Hand-tune the 16 px version before you convert

This is the step almost everyone skips, and it's the one that separates a crisp favicon from a smudge. Open your logo in your design tool and create a dedicated 16 × 16 artboard:

• Crop to the mark. Drop the wordmark and tagline. Use the monogram, symbol or first letter only.
• Trim the padding to 1 px on each side so the shape fills the square.
• Thicken strokes until nothing is thinner than 1 px at final size, and widen counters (the holes in letters like a, e, o) so they don't fill in.
• Raise contrast. Mid-greys disappear against both light and dark tab bars; push the mark darker or add a solid brand-colour background tile.
• Snap to the pixel grid so vertical and horizontal edges land on whole pixels — that alone removes most of the perceived blur.

Export three PNGs: favicon-16.png, favicon-32.png (slightly more detail allowed) and favicon-48.png (close to the full mark). Those become your ICO frames.

Route A: build the ICO online in a minute

If you don't want to install anything, upload your tuned artwork to the PNG to ICO converter and let it generate the 16, 32 and 48 px frames into a single favicon.ico. Start from the largest clean square you have — ideally the 48 px export, or a 256 px version with the padding already trimmed — so the small frames are derived from a tight crop rather than a logo floating in whitespace.

Two practical tips: keep transparency on so the icon sits well on both light and dark tab bars, and preview the result at actual size in a real browser tab before you call it done. If you also need WebP, AVIF or PDF conversions for the same project, the broader image converter hub covers those formats too.

Route B: ImageMagick, for repeatable builds

If the favicon is part of a build pipeline, ImageMagick does it in one line. The quick version, straight from a single square PNG:

magick logo-512.png -define icon:auto-resize=48,32,16 favicon.ico

The better version, using your hand-tuned exports so each frame is real artwork rather than a downscale:

magick favicon-48.png favicon-32.png favicon-16.png favicon.ico

Starting from a vector logo? Rasterise at high density first so edges stay sharp, then build the ICO:

magick -background none -density 600 logo.svg -resize 48x48 -define icon:auto-resize=48,32,16 favicon.ico

Verify what landed inside the container with magick identify favicon.ico — you should see three lines, one per embedded size.

When an SVG favicon plus apple-touch-icon beats ICO

Modern browsers happily accept an SVG favicon, and it has two advantages: one file scales to every density, and it can respond to dark mode via a prefers-color-scheme media query inside the SVG itself. If your mark is a simple geometric shape or monogram, SVG is the better primary icon.

You still want the other two files. Keep favicon.ico as the fallback for older browsers and for tools that fetch the root path blindly, and add a 180 × 180 apple-touch-icon.png for iOS home-screen bookmarks — iOS ignores SVG and ICO there, and composites your PNG onto a rounded square, so give it a solid (non-transparent) background and a little breathing room around the mark.

A note on complex artwork: detailed illustrations, gradients and fine text don't become legible just because they're vector. If your logo is busy, simplify it for the SVG favicon too — a vector logo converted to a favicon still needs the 16 px crop treatment.

The exact link tags to paste

Put the files in your site root and these four lines in <head>. Order matters less than the sizes and type hints, which let the browser choose correctly.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

The sizes="32x32" on the ICO line is a hint, not a lie — it tells supporting browsers the file is useful at that size while the embedded 16 and 48 px frames remain available. The manifest is where you declare 192 × 192 and 512 × 512 PNGs for Android home screens and PWA installs.

Ship it and confirm it actually changed

Favicons are cached aggressively — by the browser, by your CDN, and sometimes by the OS. After deploying:

• Load https://yoursite.com/favicon.ico directly and hard-refresh to confirm the new file is being served.
• Purge the CDN cache for /favicon.ico, /icon.svg and /apple-touch-icon.png.
• Test in a fresh private window, and check both a light and a dark browser theme.
• Zoom the tab area in a screenshot to see whether the 16 px frame is really your tuned artwork or a downscale of the big one.

If the icon is still wrong, the usual culprits are a stale CDN edge, a framework that injects its own default favicon link, or an ICO containing a single oversized frame. Run magick identify favicon.ico — if it prints one line, rebuild it with all three sizes.

Favicon FAQ

Why does my favicon look blurry only in some browsers?

Because each browser picks a different frame. One may grab the 32 px bitmap and show it at 16 px; another downscales your only 512 px image. Supplying real 16, 32 and 48 px frames removes the guesswork.

Do I still need favicon.ico in 2025?

Yes, as a fallback. Plenty of crawlers, feed readers and legacy browsers request /favicon.ico at the root regardless of your link tags. It's a few kilobytes of insurance.

Can I convert an SVG straight to ICO?

You can, but rasterise through a high-density PNG first (as in the ImageMagick example) rather than letting a converter guess. Export a clean square PNG from your vector, then build the ICO from it.

What size should apple-touch-icon.png be?

180 × 180 px, PNG, with a solid background. iOS scales it down for smaller devices, so one file is enough.

Should the favicon have a transparent background?

For the ICO and SVG, transparency usually works best so the icon adapts to light and dark tab bars. For the apple-touch-icon, use an opaque background — iOS fills transparency with black.