Favicon Generator

This favicon generator turns a single image into the complete set a website needs, and gives you the HTML to go with it, all inside your browser. From one PNG, JPG, WebP or SVG you get six PNG icons — 16, 32 and 48 px for the browser and Windows, 180 px as Apple's touch icon, and 192 and 512 px for a web app manifest — plus one multi-image favicon.ico that holds the 16, 32 and 48 px versions. Nothing is uploaded: the images are drawn and packed on your own device.

A favicon is the little picture that identifies a page: the tab, the bookmarks list, the history, the phone's home screen when a site is saved. Different places ask for different sizes, which is why a single 512 px PNG is not enough — the browser has to shrink it for a 16 px tab, and a picture built for a large size usually turns to mush at 16 px. Making each size deliberately gives a sharper result, and a proper favicon.ico means browsers that ask for /favicon.ico find a file that contains the small sizes they want.

Everything is square, because every icon slot is. If your image is not square, this tool centres it on a square and pads the extra space; it never crops, so nothing is cut off. The padding is transparent by default — leave "Fill the background" off — or tick it and choose a colour, which is the safer choice for a logo on a light or dark page that would otherwise show gaps. The image is measured at its own size and then each icon is drawn down from the full-resolution square with high-quality smoothing, so the small sizes are as clean as the browser can make them.

An SVG is handled a little differently and it is worth being precise: an SVG has no pixels, so your browser rasterises it — draws it into a bitmap — when the icons are made. The output of this tool is a set of PNGs either way; it does not give you a vector favicon. That is fine for a favicon set, but if you want a genuinely resolution-free icon you would link an .svg file yourself, which not every browser supports for the tab icon.

The HTML snippet is the standard, well-supported set. It links the 32 and 16 px PNGs with rel="icon" and the 180 px PNG with rel="apple-touch-icon". It deliberately does not link favicon.ico, because every browser requests /favicon.ico from the root of the site on its own — the snippet carries a comment saying so. It also does not include a rel="manifest" line, because this tool does not create a web app manifest: the 192 and 512 px PNGs are there for the manifest you write yourself, or the ones a platform asks for by name.

Limits, stated plainly. One image at a time, up to 20 MB; an SVG is drawn with its longer side at 512 px before scaling. If your source is smaller than 512 px, the 512 icon is enlarged and the tool says so, because it will look soft. Older versions of Safari ignore the sizes attribute on rel="icon" and may use the 180 px touch icon for the tab too. Browsers cache favicons hard, so a site can keep showing the old icon for hours after you replace it.

1. The file's real format is read from its bytes, not its name: PNG, JPG, WebP and SVG are accepted; anything else is named and refused. 2. The background option is checked — a hex colour, or none at all. 3. The package is planned as six PNGs (16, 32, 48, 180, 192, 512 px) and one favicon.ico holding 16 + 32 + 48 px. 4. The image is decoded; an SVG is first rewritten to render with its longer side at 512 px. 5. It is centred on a square of side max(width, height) with the offsets floored: dx = floor((size − width) / 2), dy = floor((size − height) / 2) — padded, never cropped, and transparent unless a colour was chosen. 6. Each PNG size is drawn down from that full-resolution square with high-quality smoothing (large reductions shrink in halving steps first) and encoded as PNG. 7. The 16, 32 and 48 px PNGs are packed, unchanged, into one favicon.ico — ICONDIR, then one ICONDIRENTRY per image, then each PNG, using the same encoder as the PNG to ICO tool. 8. The <link> snippet is written from the sizes the package actually contains.