What the ZIP contains
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 px in one file | Browser tabs, bookmarks, and anything that requests /favicon.ico |
| favicon-16x16.png, -32x32, -48x48 | 16, 32, 48 px | Modern browsers that prefer PNG |
| apple-touch-icon.png | 180 × 180 px, opaque | iPhone and iPad “Add to Home Screen” |
| android-chrome-192x192.png, -512x512 | 192, 512 px | Android home screen and install prompts |
| android-chrome-maskable-192x192.png, -512x512 | 192, 512 px, logo inside the centre 80% | Android launchers that crop icons to circles or squircles |
| site.webmanifest | JSON | Name, theme colour and the icon list for installable sites |
| head-snippet.html | 5 lines | The link tags to paste into your page’s head |
Designing for 16 pixels
A favicon is mostly seen at 16 × 16 or 32 × 32 pixels, where a full logo with a wordmark turns into a smudge. Use just the symbol, or the first letter of your brand, and check the browser-tab preview after you press Apply. Keep padding low (the default is 8 percent) so the mark fills the square; tab icons with lots of empty space look smaller than everyone else’s.
Transparent backgrounds work well in tabs, but the Apple touch icon is always made opaque because iOS fills transparency with black. Set Apple touch background to a colour that suits your logo.
Installing the files
The snippet uses root paths such as /favicon.ico, so the files need to sit at the top level of your site. On WordPress, the site icon setting under Appearance › Customize handles this for you, so you only need a single 512 px PNG. On a static site or framework, put the files in the public folder. Browsers cache favicons aggressively; if the old icon persists, open the site in a private window to check.
Questions
Is my logo uploaded?
No. All the files are drawn and zipped in your browser.
Why does favicon.ico stop at 48 px?
Browsers and Windows only read the small sizes from an .ico file. Larger displays use the PNG and Android icons instead, so adding 256 px frames would only make every page load heavier.
What about icons for an iOS or Android app?
App stores need different sets: an Xcode asset catalogue and Android mipmap folders. The app icon generator builds those.