How to use the Favicon Generator
- Add your logo, preferably at least 512 × 512 pixels or an SVG.
- Decide how a non-square picture is squared off, and what sits behind the iPhone home-screen icon.
- Type the site name for the manifest if you like; otherwise it says My site.
- Generate and download the ZIP, then upload its files to your site root.
Files in the download
favicon.ico contains 16, 32 and 48 pixel images for tabs, bookmarks and Windows shortcuts. Next to it are favicon-16x16.png and favicon-32x32.png, a 180 × 180 apple-touch-icon.png, and android-chrome icons at 192 and 512 pixels.
site.webmanifest lists the two Android icons and the name you typed, and head-snippet.html holds the five link tags to paste into the head of your pages so browsers find every file.
A logo that survives 16 pixels
In most tabs a favicon is just 16 × 16 pixels, where thin strokes, small lettering and busy artwork vanish. A bold mark or a single initial reads far better than a full wordmark. Each size is scaled from your original on its own, stepping down in halves, so the smallest ones stay crisp.
Transparent areas of an iPhone home-screen icon appear black, so the Apple icon gets a solid white background by default; pick black or keep it transparent if you prefer. The ICO and the other PNGs keep your transparency.
Questions
Can I start from an SVG?
Yes. SVG logos are rendered at 1024 pixels before the sizes are made, so every icon starts sharp.
My avatar is a rectangle. What happens?
It is placed in the middle of a square with see-through space around it. Switch to filling the square to crop the edges instead.
Is favicon.ico still needed?
Yes, keep it. Older browsers, feed readers and various tools ask for /favicon.ico at the site root and never look at your link tags.