PNG to ICO: making favicons that actually look good at 16×16

Favicons are tiny — 16×16 pixels for the browser tab, 32×32 for some bookmark UIs, 48×48 or 256×256 for Windows desktop integration. Converting a PNG to an ICO is technically a one-step process, but producing a favicon that actually looks good across all those sizes requires understanding what a favicon is and what makes one work or fail at small scale.

This guide covers the conversion mechanics and, more importantly, the design principles that make the difference between a recognisable favicon and a 16-pixel blur.

Understanding the ICO format

An ICO file is a container — it holds multiple versions of the same icon at different resolutions in a single file. When a browser or operating system displays the icon, it picks whichever resolution best matches the size it needs to render. Modern browsers typically use 32×32 for the tab icon (because of Retina/HiDPI displays) and 16×16 for non-Retina contexts. Windows uses 256×256 for large icons in File Explorer and 48×48 for the Start Menu.

A typical favicon ICO contains 16×16, 32×32, and 48×48 versions. Adding 256×256 makes the icon look correct on Windows desktops too, at a small file-size cost. Skipping any of these sizes means the OS or browser will scale the next-largest version on the fly, which often looks worse than including the proper resolution.

Design rule #1: simplify ruthlessly

The most common reason favicons fail is that the source design is too detailed for 16×16. A logo that includes wordmarks, taglines, fine outlines, or three-colour gradients will lose all of those features at favicon scale. The result is a smudge that doesn't communicate the brand.

The fix isn't better resampling — it's a different design. The favicon should be derived from the brand's visual language but optimised for tiny display: a single dominant glyph, two or three colours maximum, thick strokes that survive 16-pixel rendering, no text. Twitter's bird, Slack's hashtag, GitHub's Octocat-silhouette, Apple's apple — every successful favicon at this scale is essentially a single shape with a recognisable silhouette.

Design rule #2: contrast carries identity

At 16×16 pixels, colour fidelity is essentially gone — you have a few pixels of foreground colour against a few pixels of background colour, and that's about it. What survives is contrast: the silhouette of the foreground against the background. If your favicon has low contrast (light grey on white, dark blue on black), it'll look like a fuzzy blob in the browser tab regardless of how good the source PNG is.

Test your favicon design at 16×16 (zoom out in your image editor) before investing in the conversion. If you can't recognise the brand at that size, redesign rather than re-render. No converter can fix a design that doesn't survive at the target scale.

Source resolution: bigger is better

Start from the largest PNG you have — ideally 512×512 or 1024×1024. The conversion downsamples each output resolution from this source, and downsampling produces sharper results than upsampling. Going from 1024×1024 to 16×16 lets the resampler use Lanczos or bicubic algorithms to preserve edge detail; going from 32×32 to 16×16 has nowhere near as much information to work with.

MegaConvert applies high-quality Lanczos resampling at each output resolution. The result is better than naive nearest-neighbour scaling, but no resampling algorithm can invent detail that wasn't in the source.

Transparency: keep it

PNG supports full alpha-channel transparency, and so does ICO. Anti-aliased edges in your PNG carry over to the ICO with proper alpha — so a circular logo placed against a coloured browser tab background sits naturally instead of showing a hard rectangle around it. If your source PNG has a solid white background where the brand mark sits, the resulting favicon will have a solid white square in the browser tab, which looks much worse than a transparent edge.

If you don't have a transparent PNG source, mask the background in an image editor before converting. The visual difference between transparent-edge favicons and solid-rectangle favicons is one of the biggest quality differentiators in the wild.

Linking the favicon from your HTML

Once you have an ICO file, the standard way to declare it is in the <head> of your HTML:

<link rel="icon" type="image/x-icon" href="/favicon.ico" />

Modern browsers can also read PNG-format favicons via separate tags, which lets you ship multiple resolutions cleanly:

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

For maximum compatibility, ship both — the ICO at /favicon.ico (which browsers fall back to even without an explicit <link> tag) plus PNGs declared explicitly. Modern browsers prefer the PNGs; older browsers and some Windows contexts prefer the ICO.

Sanity-checking the result

After converting, view the ICO at all its bundled sizes to make sure each one looks correct. The 16×16 should be recognisably your brand. The 32×32 should look slightly more detailed. The 48×48 should look like the source design at small size. The 256×256 should look like the source PNG.

If any size looks wrong — pixelated, blurry, or oddly cropped — the source PNG might not have had enough resolution, or the design might be too detailed for that scale. Iterate on the source rather than the converter.

The converter

PNG to ICO — generates a multi-resolution ICO file with 16, 32, 48, and 256 pixel versions packed in. Free, no signup. For a JPEG source, JPG to ICO is the right starting point (though for transparency you'll want PNG).