Favicon Generator
One square image in; the 16, 32, 48, 180, 192 and 512 PNGs, the head snippet and site.webmanifest out.
How it works
Drop in a square image — PNG, JPEG or WebP, 512×512 or larger. 512 is the floor because the web app manifest asks for a 512 icon, and an upscale of a 256 source is visible at install-prompt size.
Fill in the app name and, if the files will not sit at the site root, the path prefix. Both feed the generated head snippet and the manifest, so the hrefs are right before you paste them.
Every size is redrawn on a canvas — halved repeatedly down to the target rather than resampled in one jump, because a single 1024 to 16 downscale aliases badly in Safari and Firefox. Output is lossless PNG.
Take the ZIP, or download one size on its own. It holds the six PNGs, site.webmanifest and head.html; the same two text blocks are on the page with a copy button each.
What each size is for
Three specifications are in play and none of them covers all six files. rel="icon" and its sizes attribute are the HTML Standard, and 16, 32 and 48 are the rungs browsers pick from for a tab, a retina tab and a desktop shortcut — the same three a classic multi-resolution favicon.ico carried. apple-touch-icon is Apple's own convention, is not in any specification, and 180×180 is the 60pt home-screen icon at @3x; iOS downscales it for older devices, so one file covers them. 192 and 512 come from the W3C Web App Manifest: Chrome will not offer to install a site without at least one icon of each.
16, 32, 48 → rel=icon · 180 → apple-touch-icon · 192, 512 → manifest icons[]
Use cases
Wiring the files into a Next.js app
Drop the PNGs and site.webmanifest into public/ and paste the head snippet into the root layout, or use the App Router file conventions instead — app/icon.png and app/apple-icon.png make Next emit the link tags itself, and the metadata icons field does the same from code. Pick one route; two sets of link tags means the browser picks whichever it sees first.
The apple-touch-icon iOS actually uses
Safari ignores rel="icon" for Add to Home Screen. With no apple-touch-icon it screenshots the page and uses that, which is how an app-like site ends up with a thumbnail of its own header on the home screen. 180×180 is the current size; 152 and 167 were the iPad rungs and iOS downscales the 180 for them, so shipping the one file is enough.
Passing the install check
Chrome and Lighthouse require a linked manifest carrying at least one 192×192 and one 512×512 PNG before the install prompt appears at all. The manifest this tool writes has both, plus name, short_name, start_url, display and the two colours, which is the complete set the installability audit reads.
Why there is a 48 when nothing obviously asks for one
Chrome reads it for desktop shortcuts, the bookmark manager and the Windows taskbar, and it is the third rung a traditional favicon.ico packed alongside 16 and 32. It costs about 1 KB and it is the size that stops a shortcut icon from being an upscaled 32.
A favicon that refuses to update
Favicons are cached harder than almost anything else a browser holds, and a hard reload often does not clear them. Rename the file or append a query string to the href, and check that a stale /favicon.ico is not still on disk — browsers request that path by convention even when no link tag names it, and it will keep winning.
Maskable icons and the 80 percent safe zone
Android crops home-screen icons to a platform shape, and a maskable icon must keep its artwork inside a circle of 80 percent of the image width. This tool does not add that padding, so both manifest entries are declared purpose "any" — which is honest and which is why they render in a plain square rather than being cropped to nothing. If you want maskable, pad the source to a 40 percent margin first and then declare it.
theme-color, and the dark variant it cannot express
The generated meta tag colours the address bar on Android Chrome and Safari 15 and later. You can ship two of them with media="(prefers-color-scheme: dark)" on one; the manifest theme_color has no media variant, so it stays the single light value.
Serving the icons from a CDN or a subpath
The path prefix rewrites every href and every manifest src in one place. Worth knowing that a manifest icon src resolves against the URL of the manifest itself, not the document — so a root-relative or absolute path is the safe form, and a bare filename means something different depending on where site.webmanifest is served from.
Questions
- Does it produce a favicon.ico?
- No, and that is the real limitation of this tool. It writes PNGs only. Every browser still receiving security updates has accepted PNG favicons for over a decade, so for a normal site the .ico is not needed. If you genuinely require one — a legacy intranet, or a build step that insists — ImageMagick packs a true multi-resolution file in one command: magick icon.png -define icon:auto-resize=48,32,16 favicon.ico
- What source image should I use?
- 512×512 or larger, square, PNG, JPEG or WebP. Larger downscales cleanly. SVG is refused: an SVG without an intrinsic width and height rasterises to a different size in every engine, so what lands in the ZIP would not be what the preview showed.
- Do I need all six files?
- No. 32 covers most desktop tabs, 180 covers iOS home screens, and 192 with 512 is what makes a site installable. 16 and 48 are a few hundred bytes each and cover the tab strip at 1x and Windows shortcuts, so there is little reason to drop them.
- Are the manifest icons maskable?
- No. They are declared purpose "any" because the tool does not pad the artwork into the 80 percent safe zone a maskable icon requires. Declaring maskable without that padding is how a logo gets its edges cropped off on Android.
- Is my image uploaded anywhere?
- No. The file is read with FileReader, resized on a canvas and zipped in the page. Nothing is sent after the page has loaded, so the tool also works with the network off.
- Where do the files go?
- The web root — public/ for Next.js and Vite, static/ for Hugo — unless you set a path prefix, in which case put them wherever that prefix points. site.webmanifest goes at whatever path the rel="manifest" href in the snippet names.
- Does it round the corners or add a background?
- No. The output is the source square, alpha channel intact. Browsers and platforms apply their own masks, and a pre-rounded favicon shows its corners twice on anything that does.
More tools
One of 18 free tools here. They come out of building utility apps for macOS, iOS and the browser — all of it by one person.
See the apps