Favicon Generator

Why one favicon is never enough

The favicon looks like a single 16×16 icon. In practice a modern site is asked for that icon at six or more sizes, by contexts that have nothing in common with each other.

Who asks for what

• 16×16 and 32×32 — browser tabs and the address bar. On a high-DPI display the 32 px asset is what actually gets rasterised, even for a slot that is nominally 16 px.
• 48×48 — Windows taskbar and desktop shortcuts, plus what Internet Explorer-era code paths still request via favicon.ico.
• 180×180 — apple-touch-icon, used when someone adds your site to an iOS home screen.
• 192×192 and 512×512 — Android and the web app manifest. 512 is also what some platforms request for splash screens and store listings.
• SVG — increasingly the right answer for the browser tab itself, since it scales to any density from one file.

Ship only a 16×16 and every one of those other contexts upscales it. Upscaling a 16 px raster to 180 px produces exactly the blur you would expect.

The ICO file: a container, not a format

This trips people up constantly. favicon.ico is not an image format in the way PNG is — it is a small container that can hold several images at different resolutions. Historically it held BMP data; since Windows Vista it can hold PNG data, which is what modern generators produce and why a well-built ICO can be smaller than the sum of its parts.

Browsers still request /favicon.ico by default when no icon is declared. That default request is why you should either provide the file or explicitly declare an icon — otherwise you get a 404 in your logs from every visitor, forever.

Apple's icon is the awkward one

iOS applies a rounded-corner mask and, on older versions, a gloss highlight to apple-touch-icon. It does not add padding. If your icon has content touching the edges, iOS will clip it. The fix is to author that size with a few percent of transparent margin built in — which is why a single auto-cropped square is not always the ideal source for the 180 px variant.

The manifest, and why it matters beyond icons

A manifest.webmanifest declares your icon set, name, colours and display mode. With it, Android offers "Add to Home Screen" and Chromium-based desktop browsers offer installation. Without it, you have icons but no installable app. The icons entry wants both 192 and 512, and the 512 should be "purpose": "any maskable" if you have a maskable variant, because Android will otherwise crop it unpredictably.

The update problem

Favicons are cached aggressively — sometimes more aggressively than the rest of your site. Changing the file without changing the URL often means visitors keep seeing the old icon for weeks. Append a version query (/favicon-32.png?v=2) or change the filename whenever the icon changes. Similarly, if you want to check what a social platform has cached of your site, that is a separate cache with its own debugger tool.

Choosing a source image

Start from square artwork, ideally 512×512 or larger, with the important content inset from the edges. Detail that reads at 512 will vanish at 16 — favicons that survive shrinking are built from a bold silhouette, not from a detailed illustration. If you only have a detailed logo, consider a simplified variant for the small sizes rather than accepting mush.