Favicon-Generator

Design for sixteen pixels

The favicon appears in a browser tab at 16 pixels square. That is 256 pixels in total, which is roughly the area of a full stop in this paragraph.

At that size a detailed logo becomes a smudge. Wordmarks are unreadable. Fine strokes vanish. Anything with more than one or two distinct elements merges into a shape with no meaning.

The favicons that work are simplified marks: a single letter, a distinctive symbol, or the one recognisable element extracted from a larger logo. The [msm_tool slug="favicon-generator"] draws every size from your original, so the small ones are as sharp as the source allows — but no amount of sharpness rescues a design with too much in it.

The files you actually need

• An ICO at the site root containing 16, 32 and 48 pixel versions. Browsers request /favicon.ico without being told to, so this one works even if your markup is missing.
• 180×180 PNG for the Apple touch icon, used when someone adds the site to an iOS home screen.
• 192×192 and 512×512 PNG for Android and the web app manifest.

The link markup is generated alongside, because getting the sizes attribute right is most of what makes a favicon appear reliably rather than intermittently.

Why the ICO holds several sizes

It is an old format and that is its one genuine advantage: it can contain multiple resolutions in a single file, and the browser picks whichever it needs. A 32-pixel display gets the 32-pixel version rather than a downscaled 48.

That matters because downscaling in the browser is worse than drawing each size from the original. A 16-pixel icon rendered down from a 512-pixel PNG looks noticeably softer than one drawn at 16 pixels directly.

Start from a square

A non-square source is fitted with space at the sides, which makes the icon sit smaller in its own frame than it needs to. Crop to a square before generating.

Slightly counterintuitively, the mark should also fill most of that square. Icons are displayed small enough that generous padding is wasted area — whatever whitespace the browser adds around the tab is doing that job already.

Contrast matters more than colour

The icon appears against a browser tab that may be light or dark, a bookmark bar, a history list, and a phone home screen with an unknown wallpaper behind it.

A mark that relies on a light background disappears in half of those. Either give the icon its own solid background so it carries its context with it, or test the transparent version against both light and dark. Most sites are better served by a filled shape than by a transparent glyph.

Favicons are cached aggressively

Browsers hold onto them well past the point of reason — longer than they cache most other assets, and not always cleared by a normal reload.

So do not conclude a new icon has failed because you cannot see it. Force a reload, or open the icon's URL directly to confirm the new file is being served. If it is correct there, it is correct, and everyone else will see it before you do.

Source image

At least 512 pixels square, so every size is drawn down from the original rather than up from something smaller. If the logo exists as an SVG, export a large PNG from that rather than resizing an existing raster.

A quick test

Shrink your logo to 16 pixels and look at it from normal reading distance. If you cannot tell what it is, neither can anyone else — and the answer is a simpler mark rather than a better generator.