Favicon & App Icon Generator

16 pixels is the real constraint

A favicon appears in a browser tab at 16 × 16 pixels — roughly the size of a single character of text. Almost nothing survives at that size: no detail, no thin lines, no more than two letters, and certainly not a full logo.

What works is one bold shape with high contrast against both light and dark tab bars. Design at 512 and check at 16 constantly rather than at the end, because most favicons that fail were only ever judged large.

The sizes a site actually needs

Different platforms reach for different files, and missing one produces a blurry upscale of another:

• 16 × 16 and 32 × 32 — browser tabs and bookmarks.
• 180 × 180 — the 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, used for installed PWAs and splash screens.
• favicon.ico containing 16 and 32 — still requested by older browsers and some crawlers at the site root.

Transparent or solid

A transparent background lets the icon sit on whatever colour the browser uses, which adapts well to light and dark themes but can leave a thin dark mark invisible against a dark tab bar.

A solid background — your brand colour with the mark reversed out — is more reliable, because it looks identical everywhere. For iOS specifically, transparency is a poor choice: the home-screen icon is composited onto a background you do not control, and transparent areas turn black.

Where the files go

Put favicon.ico at your site root, since browsers and crawlers request it there whether or not you link it. Everything else is declared in your HTML head with link tags, plus a web app manifest listing the 192 and 512 icons.

Browsers cache favicons aggressively and often ignore normal cache headers, so a changed icon may take a while to appear. That is usually caching rather than a broken file — check in a private window before debugging.