How to use it
- Drop a square PNG of at least 512 pixels, or an SVG, onto the box below.
- Set the site name and theme colour for the manifest, and a background or padding if the mark needs one.
- Press Process files and download favicons.zip, then copy the files to the root of your site.
What is in the zip
favicon-16x16.png, favicon-32x32.png and favicon-48x48.png for browser tabs and bookmarks; favicon.ico holding those three sizes in one file for older browsers and Windows; apple-touch-icon.png at 180 px for iOS; icon-192.png and icon-512.png for Android and the web app manifest; site.webmanifest with your name and colours already filled in; and snippet.html with the link tags to paste into the head of every page. If you start from an SVG it is included too, because modern browsers prefer a vector icon and scale it perfectly.
How the icons are made
The source is drawn onto a 1024 px square, centred and with any padding you asked for, then scaled down in halving steps so each size averages every pixel of the one before it. A single jump from 1024 to 16 samples only a handful of pixels and gives a jagged icon; the stepped approach is why the 16 px version still reads as your mark. An SVG without explicit dimensions is sized from its viewBox first, because otherwise a browser rasterises it at 300 by 150 and the result is a blur.
Getting a good small icon
At 16 px there is room for a shape, not for a word. If your logo is a wordmark, make a separate square mark for the favicon. Fine lines vanish at small sizes, so thicken them or add a background colour, and leave the padding at zero unless the mark touches the edges. Transparent backgrounds are fine for tabs but iOS paints its own black behind a transparent apple-touch-icon, so choose white or a colour if that matters.
Questions
Do I still need favicon.ico?
Mostly for old browsers and for tools that request it by name without reading the HTML. It costs nothing to include, so it is in the zip.
Can I use a JPG or WebP as the source?
Yes, any image the browser can open. A PNG or SVG with transparency gives the best result because the icon can then sit cleanly on any tab colour.
Where do the files go?
The snippet assumes the root of your site, so /favicon.ico and /site.webmanifest. If you put them in a folder, edit the paths in the snippet and in the manifest to match.