Why one icon turns into six files
A favicon started in 1999 as a single 16×16 favicon.ico that Internet Explorer looked for in a site's root folder. Since then, every platform that shows a site icon has asked for its own size, and the set has grown:
- 16 px: the browser tab and bookmark list on standard displays.
- 32 px: tabs on high-density screens, and the Windows taskbar when a site is pinned.
- 48 px: Windows desktop shortcuts and some site listings.
- 180 px: the Apple touch icon, used when someone adds the site to the home screen on an iPhone or iPad.
- 192 px and 512 px: Android home-screen icons and the splash screen of an installed web app, declared in the web manifest.
The ZIP contains favicon.ico with the three small sizes packed inside, apple-touch-icon.png, icon-192.png, icon-512.png, and a site.webmanifest that points to the two Android icons. The archive is named after your source file, so logo.svg gives logo.favicon.zip.
How the set is produced
Every size is drawn straight from your original file onto its own transparent square. If the image is not square, it is scaled to fit and centred, with transparent space on the shorter sides. An SVG is rasterized afresh at each size, so the 16 px icon gets the same vector precision as the 512 px one; a raster image is scaled down with the browser's smoothing.
The ICO file stores its three images as PNG data inside the ICO container, a variant supported since Windows Vista and by every current browser. It keeps full transparency and is usually much smaller than the old bitmap-based ICO format.
All rendering happens with the Canvas API in your browser. Sources up to 20 MB are accepted in PNG, JPG, WebP or SVG.
Designing a logo that survives 16 pixels
At 16×16 there are only 256 pixels in total. A detailed logo becomes a blurry blob at that size, and that is a design problem no export setting can fix. What works:
- Use a mark, not the full logo. One letter, a monogram or the logo's symbol without the wordmark.
- Thick shapes and few colours. Strokes thinner than about 1/16 of the width disappear at the smallest size.
- Fill the square. Trim empty margins in the source before generating; a logo floating in lots of transparent space ends up tiny in the tab.
- Check both themes. Browser tab bars can be light or dark. A black icon on a transparent background vanishes in a dark tab bar; a light outline or a solid coloured shape behind it helps.
If the 16 px version still looks muddy, it can be worth preparing a separate simplified source, generating the set from it, and keeping the larger PNGs from the detailed version.
Platform quirks worth knowing
Transparent Apple touch icons
iOS does not show transparency on home-screen icons; transparent areas are filled, usually with black. Since the generator keeps transparency, a logo on a transparent background gives a dark square around it on an iPhone. For a clean result, use a source with a solid background colour, or export your logo with its background before dropping it in.
Completing the web manifest
The included site.webmanifest only lists the two icons. For a site that should be installable as an app, open it in a text editor and add at least name, short_name, start_url, display (for example standalone) and theme_color. Without them, browsers fall back to the page title and will not offer installation.
Stubborn caching
Browsers cache favicons aggressively, sometimes for days and independently of the page cache. If the old icon keeps showing after you upload the new files, open the icon URL directly and reload it, or add a version query such as ?v=2 to the icon links in your HTML.
Choosing a source file
A square SVG is the most convenient source because it is drawn sharply at 512 px no matter how small the original artwork is. If you have a vector logo in another format, export it as SVG or as a PNG of at least 512×512. For a raster logo that only exists in a small size, enlarging it first with upscale image gives the 512 px icon cleaner edges than plain stretching. A logo with a wide wordmark is best cut down to its symbol with crop image before generating, rather than letting it shrink to a thin line in the middle of the square.