Favicon Generator

A single icon file would need to serve a browser tab at 16 pixels, a phone home screen at 180 pixels, an Android app drawer at up to 512 pixels, and a Windows taskbar tile — surfaces with wildly different resolution, aspect handling and background compositing rules, none of which share a single ideal source resolution. Historically this is why sites either shipped only a low-resolution `favicon.ico` that looked blurry everywhere else, or skipped the mobile and PWA icons entirely. Generating every size from one source and packaging them together is what makes an icon look sharp and correct on all of them at once, rather than acceptable on one and wrong everywhere else.

The web manifest exists for a related but distinct reason: it is what lets Android and desktop Chromium browsers offer "Install app" and show the site with its own icon and name once installed, rather than as a bookmark with a generic globe icon. A favicon and a PWA icon are handled by different parts of the platform, which is why both a plain icon set and a manifest are generated together here.

The browser tab is the smallest and most frequently seen rendering of a favicon, and it is unforgiving: at 16×16 pixels there is room for one bold shape, two at most, and effectively no room for text beyond a single letter or number. A full multi-element logo that looks polished at normal size typically turns into an indistinct blob at tab size, because the detail that makes it recognisable simply has no pixels left to render in.

The most reliable source images are a single glyph, monogram, or simple icon on a plain or transparent background, ideally provided at 512×512 or larger so every generated size is a clean downscale rather than an upscale. If the existing logo is complex, it is usually better to extract or simplify a single recognisable element from it — a monogram, a symbol, a distinctive shape — rather than shrinking the whole thing and hoping it holds together.

A favicon with a transparent background adapts cleanly to both light and dark browser tab themes, which is the right choice whenever the artwork itself does not need one. Some destinations cannot use transparency at all, though — the Apple touch icon in particular is composited by iOS onto a solid backdrop before its own rounded-corner mask is applied, so a transparent source produces a logo floating on black rather than the clean tile every other iOS app icon has. Choosing a solid background color up front, matched to a brand color rather than left as a default white or black, is what keeps the icon looking deliberate on every surface rather than merely correct on some of them.