Favicon Generator

Why one favicon is never enough

A favicon is the small icon shown in a browser tab, a bookmark, and the home-screen shortcut on phones. The catch is that these contexts want different sizes and formats. A tab might use a 16 by 16 or 32 by 32 icon, an Android home screen wants a 192 by 192 PNG, and iOS pulls a 180 by 180 apple-touch-icon. Shipping a single 16-pixel image means your icon looks blurry everywhere it is scaled up.

Generating a full set from one image

A favicon generator takes one high-resolution square source, ideally 512 by 512 or larger with simple, legible shapes, and downsizes it into each required format. Fine detail disappears at 16 pixels, so a bold mark reads far better than a shrunken full logo. The output is a bundle of PNGs plus a traditional .ico and often a web app manifest that ties the Android icons together.

Example

The link tags you drop into the head:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

FAQ

Why has my favicon not changed? Browsers cache favicons hard. A forced refresh, a visit in a private window, or appending a version query like ?v=2 usually breaks the cache.

Do I still need favicon.ico? It helps. Some browsers and tools request /favicon.ico at the site root by default, so keeping a multi-size .ico there covers those requests.

Can I use an SVG favicon? Modern browsers support an SVG icon that scales cleanly and can even respond to dark mode. Keep a PNG fallback for the clients that do not.