Favicons for the modern web.
Drop a logo, type a letter, pick an emoji or icon, or draw one pixel by pixel. favicon.zip builds every file modern browsers need, zipped and ready for your site root. Everything runs locally in your browser.
What's in the zip
The web files go at your site root. The env copies replace them one environment at a time. The native icon sets go in your Xcode and Android projects. favicon-setup.md is the install guide — delete it after copying.
| file | why it exists |
|---|---|
| favicon.ico | Lives at your site root, where crawlers and RSS readers look for it without parsing your HTML. Carries one layer per size, each drawn fresh at its own size rather than scaled down. |
| icon.svg | One vector for every current browser, crisp at any size and DPI. Letters, emoji, icons, and pixel art all become real paths, so it renders without a webfont. Turn on the dark mode variant and this one file carries both looks. |
| apple-touch-icon.png | 180×180 for iOS home screens. Opaque, because iOS paints transparent pixels black, and un-rounded, because iOS applies its own mask. |
| favicon-96x96.png | The 96px icon Google prefers for search results. |
| icon-192.png · icon-512.png | PWA home screen and splash icons, referenced from the manifest. |
| icon-mask.png | A maskable 512px icon with your mark held inside the safe zone, so Android can crop it into a circle or squircle without eating your logo. |
| manifest.webmanifest | Wires the PWA icons together, with your app name and theme color filled in. |
| favicon-setup.md | Install steps for your stack and a note on what each file does. Delete it once you've copied the files. |
Optional files
| file | what it's for |
|---|---|
| icon-mono.png | Monochrome icon for surfaces that tint your mark, like OS badges. |
| favicon-dynamic.js | Your icon plus a live state: favicon.badge(3), progress(0.4), spinner(). No dependencies, and it prefers the OS badge API on installed PWAs. |
| env/dev · env/staging · env/preview | The same favicon with a colored corner dot, so three tabs of the same app stay apart. |
| AppIcon.appiconset · android/res | Xcode asset catalog and Android launcher icons, adaptive and legacy, from the same mark. |
How platforms pick an icon
Browsers choose between icon.svg and favicon.ico. iOS scales the 180px apple-touch-icon to every size it needs. Android reads the manifest and uses the maskable icon. Package options control the rest: the PWA files, the Google 96px icon, and the 48px ICO layer are on by default; the monochrome icon, dynamic module, environment copies, and native app icons are off.
Favicon caching
Browsers cache favicons aggressively. When an updated icon still shows the old image, add or increment a version on the URL — /favicon.ico?v=2 — or wait for the cache to expire.
Check a site's favicon setup.
Paste a URL to fetch the page, probe every icon it declares, and grade the setup against the modern set.
Generate favicons from your coding agent.
favicon.zip is also an MCP server and a plain HTTP API, returning the same web favicon set as the editor. The Xcode and Android icon exports are editor-only.
{
"mcpServers": {
"favicon": { "type": "http", "url": "https://favicon.zip/mcp" }
}
}Tools: generate_favicon · check_favicon · get_html_snippet. MCP docs