Generate favicons from an image

Make every icon a website needs from one JPG, PNG, WebP, or AVIF image without uploading your brand asset. The ZIP holds favicon.ico with the 16, 32 and 48 pixel icons inside, the same three as PNGs, a 180 pixel Apple touch icon, 192 and 512 pixel Android icons, a site.webmanifest that points at them, and head-snippet.html with the lines to paste into your pages. The result shows the icon in a light and a dark browser tab and as a home screen icon, with a button to copy the head lines.

The source image is scaled proportionally and centred, so a non-square logo is not stretched. Padding keeps a logo clear of the corners that phones round off, and a background colour fills every icon. The Apple icon always gets a background, white unless you choose another, because iPhones show transparency in home screen icons as black.

Rendering and ZIP creation happen inside a dedicated browser worker. Your logo stays on your device, and no account is required. Put the files at the root of your site, so that /favicon.ico opens the icon, and paste the head lines into every page.

One source image becomes the sizes browsers and phones actually request: the small icons a desktop browser shows in a tab and a bookmark, the larger Apple touch icon iOS uses when a site is added to a home screen, and the Android icons a web manifest points at. Producing them by hand in an image editor is tedious and easy to get subtly wrong.

Start from a square image at 512 pixels or larger. Anything smaller has to be enlarged to make the biggest icon, and an upscaled logo looks soft exactly where it is most visible. A non-square image is fitted rather than stretched, but a square source gives a predictable result.

Simple shapes survive the small sizes. At sixteen pixels a wordmark is unreadable and fine detail turns to mush, which is why most recognisable favicons are a single letter, a symbol, or a bold silhouette. It is worth looking at the smallest output before committing to a design.

Every size is generated on your device. An unreleased brand is one of the more sensitive things a small company owns, and uploading a logo to a generator means handing a copy to whoever runs it, often weeks before the launch it belongs to.