Orpheus

Generate a Favicon Set

Every size a browser asks for, from one image.

Every tool runs entirely in your browser. Your files are never uploaded to a server.

A favicon set is the same icon at several sizes: 16 and 32 for browser tabs, 180 for Apple devices, and 192 and 512 for Android and PWA manifests.

How to use Favicon Generator

  1. Add a square image. A non-square image is centre-cropped to a square automatically.
  2. Choose which sizes. All six covers browsers, Apple devices and PWA manifests.
  3. Download and link them. The HTML you need is in the notes below.

About generating favicons

A favicon set is one icon rendered at several sizes because different surfaces request different ones. Browser tabs use 16 or 32 pixels depending on display density, Windows uses 48 for its site icons, iOS looks for a 180-pixel apple-touch-icon when a page is added to the home screen, and a web app manifest typically references 192 and 512 for Android and for splash screens. Serving a single large image works, since browsers will scale it, and it produces a blurrier tab icon than one drawn for the size. The design constraint is severe and worth respecting. At sixteen pixels there is room for a single letter, a simple geometric mark, or a silhouette — and nothing else. Detail that looks fine in a logo disappears entirely, and a photograph becomes an indistinct smudge. This is why almost every recognisable favicon is a monogram or a shape rather than a scaled-down wordmark. The ICO format is no longer necessary. It existed to bundle several resolutions in one file for Internet Explorer, and every current browser accepts PNG, which is smaller and renders better. The linking is straightforward: a link element with rel="icon" and a sizes attribute for each PNG, rel="apple-touch-icon" for the 180, and the larger two declared inside the manifest. One practical warning — favicons are cached far more aggressively than other assets, frequently surviving a hard refresh, so changing one usually needs a new filename or a query string to take effect.

Frequently asked questions

Which sizes do I actually need?
For a simple site, 32x32 alone works — every browser will scale it. Adding 16x16 gives a crisper tab icon, 180x180 covers iOS home screens, and 192 and 512 are what a web app manifest references. Anything beyond those six is legacy.
Do I still need an .ico file?
Only for Internet Explorer, which is no longer supported anywhere. Every current browser accepts PNG favicons, and a PNG at 32x32 is smaller and sharper than the multi-resolution ICO it replaces.
What happens to a non-square image?
It is cropped to a centred square before scaling, so the icon is not squashed. Since favicons are displayed at 16 pixels in a tab, a photograph rarely works — a simple mark or a single letter reads far better at that size.
How do I link them in my HTML?
A link rel="icon" for the PNG sizes, a link rel="apple-touch-icon" for the 180, and the 192 and 512 referenced from your web app manifest. The full snippet is in the notes below.
Why does my favicon not update?
Favicons are cached unusually aggressively, often beyond a normal hard refresh. Appending a query string to the URL, or renaming the file, forces browsers to fetch the new one — this catches people out constantly during a redesign.

Last updated