Favicon Generator — ICO, Apple Touch, Web Manifest, PWA
Turn one PNG, JPEG or WebP into the complete modern favicon set: a real multi-frame favicon.ico, the standard PNGs, an opaque apple-touch-icon, site.webmanifest and browserconfig.xml — generated locally in your browser.
Click or drop a PNG, JPEG or WebP
PNG, JPEG and WebP up to 15 MB — the format is verified from the file's bytes, not its extension
Your image is decoded and resized locally. Nothing is uploaded.
One image, every favicon size
Browsers, iOS, Android and Windows each look for a different favicon file. Instead of exporting five files by hand, this tool renders every required size from one source image: a multi-frame favicon.ico (16/32/48 px), the 16 and 32 px PNGs, the 180 px apple-touch-icon, the 192 and 512 px Android Chrome icons and the 150 px Windows tile.
The .ico is a real ICONDIR container with PNG frames inside — not a renamed PNG. The bundle also includes site.webmanifest and browserconfig.xml, and the README contains the exact HTML <head> snippet to copy.
How to generate a favicon set
- 1
Drop a PNG, JPEG or WebP image. The format is checked from the file's magic bytes, not its extension.
- 2
Set the site name and the theme colour, then choose how the image fits a square (contain, cover or stretch) and the background.
- 3
Click “Generate favicon set” — every PNG and the .ico are rendered at their native resolution.
- 4
Download the ZIP, copy the files into your website root, and paste the README's <head> snippet into your page.
What's in the bundle
The files below are produced for every generation. favicon.ico is verified by re-reading the container and every frame's pixel size before it is offered for download.
| File | Used by |
|---|---|
| favicon.ico | Legacy browsers and tabs — multi-frame ICO (16/32/48 px). |
| favicon-16x16.png / favicon-32x32.png | Modern browsers with the PNG <link> tags. |
| apple-touch-icon.png | iOS Safari home screen (must be opaque). |
| android-chrome-192x192.png / 512x512.png | Android Chrome home screen and PWA install prompt. |
| mstile-150x150.png | Windows Start menu / taskbar pinned tiles. |
| site.webmanifest | PWA manifest referencing the 192 and 512 px icons. |
| browserconfig.xml | Windows tile background colour. |
| README.txt | Install steps and the HTML <head> snippet. |
How to install
Copy the files into the root of your website, then add these tags to the <head> of every page:
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="msapplication-TileColor" content="#FFFFFF"> <meta name="theme-color" content="#FFFFFF">
The theme-color and msapplication-TileColor values match the colour you picked. Files keep their standard names so no extra configuration is needed.
Why apple-touch-icon.png is opaque
iOS ignores the alpha channel of home-screen icons and replaces it with black, which looks broken. This tool therefore renders apple-touch-icon.png on an opaque background — white by default, or your custom colour — while every other PNG keeps the transparency you chose.
If your source image already has a solid background, the transparent setting still produces an opaque apple icon because only that file is forced opaque.
Privacy
The image is decoded with createImageBitmap and rendered with Canvas inside your browser. There is no upload, no server-side conversion and no account. The ZIP is assembled in memory with JSZip.
Related tools
Frequently asked questions
Is favicon.ico a real ICO file?
Yes. It is an ICONDIR container holding PNG frames at 16, 32 and 48 px. The tool re-reads the file after encoding to confirm the container structure and every frame's pixel size.
Is my image uploaded?
No. Decoding, resizing, encoding and ZIP creation all happen in your browser.
Why is apple-touch-icon.png not transparent?
iOS replaces the alpha channel of home-screen icons with black. To avoid that, the 180 px apple icon is rendered on an opaque background (white by default, or your chosen colour).
Which files do I really need?
At minimum favicon.ico and favicon-32x32.png cover every modern browser. Add apple-touch-icon.png for iOS, the 192/512 px icons and site.webmanifest for Android/PWA, and mstile-150x150.png for Windows tiles. The README explains each one.
Does it generate safari-pinned-tab.svg?
No — that file is a monochrome vector that cannot be derived from a raster source. Provide it from your vector artwork if you want Safari pinned-tab support; the README notes this.
What happens if I change the settings after generating?
The previous result is invalidated and a fresh set is rendered from your source at the new fit, background or colour, so the download always matches the settings shown.
Found an issue with this tool?
Report a problem