Generate a favicon set from one image
Modern sites need more than a single favicon: browsers, iOS home screens and Android app installs each want their own size. Drop one square image and get a real multi-resolution .ico, the six PNGs, a web manifest and the exact link tags to paste into your HTML head.
How to use the Favicon Generator
- Add one square image, at least 512 × 512 pixels — a logo or a simple mark works best.
- Choose whether the logo fits inside the square or fills it, and add padding if it feels cramped.
- Click Generate. You get favicon.ico, six PNGs and site.webmanifest.
- Download all of them as a ZIP, upload to the root of your site, and paste the link tags into your head.
The files and what each one is for
| File | Used by |
|---|---|
| favicon.ico (16, 32, 48) | Browser tabs, bookmarks, and the default any browser looks for at the site root |
| favicon-16x16.png / 32x32.png | Tabs and bookmark bars on modern browsers |
| favicon-48x48.png | Windows site shortcuts and some desktop browsers |
| apple-touch-icon.png (180) | iOS and iPadOS home screen shortcuts |
| android-chrome-192x192.png | Android home screen and the install prompt |
| android-chrome-512x512.png | Android splash screen and app listings |
| site.webmanifest | Tells the browser the name, colours and icons for an installed web app |
How the .ico is built
ICO is a container format, not a compression format. The file starts with a six-byte header giving the number of images, followed by a sixteen-byte directory entry per image recording its width, height, colour depth, byte length and where its data begins. Since Windows Vista each entry is allowed to point at a complete PNG file rather than a raw bitmap with a separate transparency mask, which is what this tool writes: three PNGs at 16, 32 and 48 pixels, wrapped in a valid ICO directory. Every current browser and Windows itself read this correctly, and the result is far smaller than an old-style BMP icon.
Designing for 16 pixels
This is the part people get wrong. At 16 × 16 there is room for about three strokes. A detailed logo, a wordmark or anything with thin lines turns into grey mush in a browser tab. Take your logo and cut it down to a single letter, a symbol or a bold silhouette, then generate from that. Check the 16 px PNG on its own before you ship: if you cannot identify it at a glance in the results list, neither can a visitor scanning twenty tabs.
Transparency and the Apple icon
Transparent favicons look right in browser tabs on both light and dark themes. iOS is the exception: it composites home-screen icons onto black, so a transparent apple-touch-icon appears as a dark square. This tool therefore always gives the 180 px Apple icon a solid background, using your chosen colour, even when transparency is switched on for everything else.
Installing them
Upload all eight files to the root directory of your site, so that they are reachable at /favicon.ico, /apple-touch-icon.png and so on, then paste the link tags shown above into the head of every page. Browsers cache favicons aggressively — if the old one persists, load /favicon.ico directly and force-refresh.
Frequently asked questions
What size should my source image be?
At least 512 × 512 and square. Anything smaller has to be enlarged for the Android icons, which looks soft. SVG, PNG, JPG and WebP sources all work.
Is the .ico a real icon file?
Yes. It is a proper ICO container holding 16, 32 and 48 pixel PNG entries, which is the format Windows and every current browser expect.
Why is my Apple touch icon not transparent?
Because iOS renders transparent areas of home screen icons as black. The tool gives that one file a solid background on purpose.
Do I still need favicon.ico if I have PNGs?
It is worth keeping. Browsers and crawlers request /favicon.ico by default even when no link tag mentions it, and a missing file shows up as a 404 in your logs.
My favicon has not changed after uploading. Why?
Favicons are cached hard. Open /favicon.ico directly and force-refresh, or add a query string to the link tag while testing.
Privacy
This tool runs entirely inside your browser using WebAssembly and the Canvas/File APIs. Your files are never uploaded to ToolFlint or any third party; you can verify this in your browser's network tab or by switching to airplane mode after the page loads. Read how we process files.
Last updated 2026-09-23.