Favicon generator

Sixteen pixels is the whole problem

A favicon in a browser tab is sixteen pixels across. That is smaller than the full stop at the end of this sentence on most screens, and it is where almost every logo falls apart.

Wordmarks are the usual casualty. Six letters across sixteen pixels gives each letter under three pixels of width, which is not enough for a letter, so it reads as a grey smudge. Fine lines disappear. Gradients turn to mud. Anything with an outline loses the outline.

No generator can fix that, including this one, which is why the previews above are drawn at their true size rather than scaled up to look reassuring. If the 16px version is unreadable, the answer is a simpler mark: drop the wordmark and keep the symbol, thicken the strokes, or use a single letter.

You need four files, not forty

Favicon generators have a habit of handing you thirty files for devices that stopped existing a decade ago. The set that actually earns its place in 2026 is small:

• favicon.ico at 16, 32 and 48. Not because browsers prefer it, but because a browser with no link tags to guide it still asks for /favicon.ico, and some software outside the browser takes nothing else.
• An SVG icon. This is the one modern browsers prefer, because it is sharp at any size and usually smaller than the PNGs. It is also the one file this page cannot make for you: export it from whatever drew the logo.
• apple-touch-icon.png at 180, for a site saved to an iOS home screen.
• Two PNGs at 192 and 512 referenced from a web manifest, for Android and for an installed web app.

The zip contains all of those except the SVG, plus the manifest and the snippet to paste into your head.

Transparency, and why Apple gets its own rule

A transparent background is right for the ICO and the manifest icons. It lets the mark sit on whatever colour the browser chrome happens to be, which matters because that colour changes with the theme.

The Apple touch icon is the exception. iOS composites a transparent icon onto black, which is almost never what the logo was drawn for, so this page always flattens that one onto a background even when the rest keep their transparency. If you picked a colour above, it uses that. Otherwise it uses white.

A note on the square

A favicon is square and most logos are not. Fitting the whole mark in leaves space at the sides, which keeps the mark intact but makes it smaller in an already tiny box. Filling the square crops, which uses every pixel but can cut the ends off a wide logo. Neither is right in general, so both are above and the previews show what each one does.