Favicon Generator
Turn one image into the whole favicon set — ICO, PNGs, web manifest and the markup to paste. Crop and position the image first, and nothing leaves your browser.
A favicon is no longer one file. A browser tab wants a small PNG, an iPhone home screen wants a 180 pixel image with no transparency, an installed web app reads its icons from a manifest, and something out there still asks for favicon.ico. This generator takes one image, lets you crop and position it, and writes the whole set with the file names the convention already expects — so replacing an old favicon does not mean touching your HTML. Everything is drawn in your browser and no file is uploaded anywhere.
How it is calculated
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#0f172a">
The markup declares the files a browser fetches on its own and points at the manifest for the rest. Where several icons are equally suitable a browser takes the last one, so the larger PNG is declared after the smaller. The android icons are listed once, in the manifest, instead of twice.
Questions people ask
- Do I still need favicon.ico?
- Only as a fallback. Every current browser prefers the PNG declarations, but a request for /favicon.ico arrives whether or not you declare it, so the file is worth having. Ours holds 16, 32, 48 pixel images in one container, which is what the format is for.
- Why can the apple-touch-icon not be transparent?
- iOS composites the home screen icon onto its own background, and a transparent area turns black rather than showing through. The 180 pixel image is therefore flattened onto the icon background colour, while every other file keeps its transparency.
- What sizes do I actually need?
- Fewer than most lists suggest. Sixteen and thirty-two pixels for tabs, one hundred and eighty for iOS, one hundred and ninety-two and five hundred and twelve for an installed app. Everything between those is scaled by the device anyway and only adds weight.
- Where do the files go?
- In the root of your site, next to index.html. The paths in the markup and the manifest are absolute, so moving them means editing both. site.webmanifest must be served as JSON.
- Does my image leave my computer?
- No. Cropping, scaling and encoding all happen in the browser, and the ZIP is assembled there too. Nothing is sent to a server, so there is nothing to delete afterwards.
- What should I start from?
- A square image with the subject in the middle and room around it. A logo built for a wide header rarely survives being squeezed into sixteen pixels, which is why cropping comes before generating here.
Found a problem, or want more?
A number that disagrees with its source is a defect, not a rounding preference.
What did you enter, what did the tool show, and what did you expect instead? If you have a source that disagrees with ours, a link to it is the most useful thing you can send.
Opens your mail app with the page and tool already filled in.
Related tools
CSS Gradient Generator
Build a CSS gradient and copy the exact declaration. Angles follow the CSS specification, where 0deg points up and angles turn clockwise.
HEX to RGB
Convert a hex colour to its red, green and blue channels, including the shorthand and alpha forms defined by the CSS specification.