Favicon generator

How to use it

1. Choose a square image of 512 pixels or more, or type one or two initials and pick a background colour.
2. Type your site’s name for the web manifest.
3. Check the 16 × 16 preview: that is the size people actually see.
4. Download the zip and copy the link tags into your site’s head.

The sizes, and where each one is required

Most favicon generators emit twenty files for browsers that no longer exist. These five are the ones with a published requirement behind them. 16×16 and 32×32 are the classic favicon and its high-density counterpart — the browser tab, the bookmark list, the Windows taskbar. 180×180 is the Apple touch icon, the size Apple’s own Safari Web Content Guide uses in its example; it is a 60 pt icon at 3×, and iOS scales it down for every smaller device, so one file does all of them.

192×192 and 512×512 come from Chrome’s installability criteria, which are explicit that an installable web app “must include a 192px and a 512px icon”. Those two go in the web manifest rather than in a link tag, which is why the download includes a site.webmanifest listing them.

Why there is no .ico file

The traditional favicon is a multi-resolution .ico. Every browser in current support reads <link rel="icon" type="image/png"> instead, so the only thing ICO still uniquely covers is a client that requests /favicon.ico without ever reading your HTML — and those clients accept a PNG served at that path. So the zip contains a favicon.ico that is a 32×32 PNG under that name. That is deliberate, it works, and it is said here rather than implied.

Designing one that reads at 16 pixels

A favicon is sixteen pixels across in the place it is seen most. A detailed logo becomes a smudge at that size. Use one shape or one or two letters, high contrast, and no fine lines — and check the 16×16 preview above rather than the 512, because the 512 will look fine no matter what you feed it.