Generate Favicons

Why one icon became nine files

Each file in the set exists because something specific reads it and reads nothing else. favicon.ico carrying 16, 32 and 48 is still what a browser looks for at the site root by default, and what a great deal of older software checks first. favicon-16x16.png and favicon-32x32.png are what current browsers prefer for the tab, because a PNG at the exact size beats scaling. apple-touch-icon.png at 180 pixels is what iOS puts on the home screen — with no transparency support, so it is composited onto a solid background rather than arriving with black corners. android-chrome-192x192.png and 512x512.png are what an installed progressive web app uses for its launcher icon and its splash screen, declared in site.webmanifest.

Serving one large PNG for all of them works badly everywhere and is the most common shortcut. The browser downloads half a megabyte to draw sixteen pixels, iOS ignores the transparency rules and puts your logo on a black square, and the launcher icon gets cropped by whatever mask the platform applies. The set is tedious precisely because each consumer is particular.

The HTML snippet matters as much as the images. Browsers do not discover most of these files on their own — only favicon.ico at the root is found by convention — so the link tags are what connect them, and the manifest needs its own. The snippet uses root-relative paths, which work unchanged as long as the files sit in the web root; if you put them in a subfolder, the paths in both the snippet and the manifest need adjusting.

Design for 16 pixels first. At that size you have room for a shape and perhaps two colours — no text, no gradient, no fine detail, and certainly no full wordmark. A square, bold, high-contrast source of at least 512 pixels, or an SVG, gives the cleanest set; the preview shows the 16px rendering honestly rather than flatteringly, because that is the one that will disappoint you later. Non-square sources are padded to square with transparency rather than cropped or stretched.

When you want something else

The set generated here is the practical modern core. If you need the complete long tail — Windows tile images, Safari's pinned-tab mask icon, Microsoft browserconfig, the older Apple sizes — RealFaviconGenerator covers them and checks your live site afterwards, which is a genuinely useful thing this cannot do.

For a build pipeline, generating icons by hand is the wrong shape of work entirely. favicons, pwa-asset-generator and the framework plugins built on sharp produce the whole set from one source file every time you deploy, so the icons cannot drift out of date when the logo changes — which, in practice, is what always happens.