Browser tab
- Input
- favicon.ico contendo 16x16 e 32x32
- Expected output
- <link rel="icon" href="/favicon.ico" sizes="any" />
A single .ico file carries both resolutions, the browser picks which one to use.
Carregando ferramenta… / Loading tool…
favicon formats and sizes
A "favicon" today is not a single file: it is a set of PNGs at fixed sizes, each read by a different surface (browser tab, iPhone home screen, Android app icon), plus a JSON manifest that describes all of it to the system. This tool generates the whole set along with the HTML and manifest snippets that point to it.
A single .ico file carries both resolutions, the browser picks which one to use.
Without this rule, iOS composites the transparency over black and the icon shows up with a dark plate behind it.
The 10%-per-side margin (W3C spec) guarantees the art is not cut off when the system applies a mask shape.
The essentials: favicon.ico (16, 32, 48) for browsers, favicon-32x32.png and 16x16.png, apple-touch-icon.png (180) for iOS, and android-chrome 192/512 for PWAs. This tool generates all of them.
Because each surface (browser tab, iOS home screen, Android icon, PWA maskable) reads a different fixed size, and none of them upscale a small icon with good quality; the tool generates 16, 32, 180, 192 and 512px from the same source image.
It is a 512x512 icon the platform can crop into any shape; the W3C spec guarantees only a central safe zone equal to 80% of the icon (a 10% margin per side), so the important art needs to fit inside that central 410px.
Because iOS composites any transparency on that specific icon over a black plate on the home screen; that is why the tool forces a solid background only for the 180x180 size, even when the rest of the set uses transparency.
Modern browsers accept PNG via <link rel="icon">, but the browser still requests `/favicon.ico` by default when it finds no <link> at all, so keeping the .ico, which bundles 16x16 and 32x32 in one file, avoids a request that falls through to a 404.
Generation happens entirely in your browser. No image is sent to any server.