Favicon and web manifest
One image in, the whole set out: a real multi-size ICO, the Apple touch icon flattened the way Apple wants it, the manifest PNGs, the web manifest itself, and the HTML block to paste. It also shows you the Android maskable crop before it bites, which is where most icons quietly lose their edges.
The circle is what Android may crop to. Anything outside it can be cut on some devices.
| File | Size | What uses it |
|---|
Why the .ico still matters
A single PNG is enough for most browsers, and if you only ever needed a tab icon you could stop there. The ICO earns its place because it holds several resolutions in one file and the operating system picks the right one — the tab uses 16, a pinned shortcut or a desktop link uses 32 or 48, and each is drawn from a bitmap made for that size rather than squeezed down from a big one on the fly. The file this produces is a container of PNGs with a small header, which is what every browser released this century reads.
The maskable safe zone
Android does not promise to show your icon as a square. Depending on the launcher it may crop it to a circle, a squircle, or a rounded square, and the guarantee you get is only the inner circle — eighty per cent of the width, centred. Artwork that runs to the edges is exactly the artwork that loses its edges. Padding the manifest icons into that safe zone is the fix, and the preview here draws the crop so you can see it before a user does.
Why the Apple touch icon has no transparency
iOS composites the home-screen icon onto its own rounded shape and does not honour an alpha channel the way you would hope; transparent regions come out black. So that one file gets flattened onto your background colour before encoding, while the manifest PNGs keep their alpha, where it is handled properly.
What to do with the files
Put them at the root of the site, not in an assets folder — browsers and crawlers guess at the favicon path and some will fetch it whether you link it or not. Then paste the HTML block into the head of your page. The manifest path is the only line that has to match wherever you actually put the file.
FAQ
Do I still need a favicon.ico if I have PNGs?
Strictly, no. Practically, yes — plenty of crawlers, feed readers and older tools request the favicon by path and never look at your markup. It costs a few kilobytes.
My icon looks muddy at 16 pixels. What can I do?
Nothing here can fix it, because there is not enough room. At that size a mark has about ten legible pixels across; a logotype will always turn to mush. Ship a simplified version — one shape, one letter — as the source and keep the full lockup for everywhere else.
Should I turn the maskable padding off?
Only if your artwork already sits inside its own generous margin. If it fills the frame, leave it on, or Android will crop into it.
Is my image uploaded anywhere?
No. Every size is drawn on a canvas in this page and the archive is assembled in memory. Nothing is sent.
Built by the GO AI team. App icon generator · Batch resizer · All free tools