What a favicon package needs today
A single 16px favicon.ico is no longer enough, and a folder of thirty sizes is more than any browser reads. The modern set is small: one ICO for the site root, one SVG for current browsers, one opaque PNG for iOS, and a manifest with PWA icons for Android and installs.
| file | who asks for it |
|---|---|
favicon.ico | Crawlers, RSS readers and older tools that request /favicon.ico without reading your HTML. Carries 16, 32 and 48px layers. |
icon.svg | Current browsers. One vector file, sharp at every size and density. |
favicon-96x96.png | Google Search, which recommends a square icon larger than 48px. |
apple-touch-icon.png | iOS and iPadOS home screens. 180px and opaque. |
icon-192.png · icon-512.png | Android home screens, PWA install prompts and splash screens. |
icon-mask.png | Android launchers that crop icons into circles or squircles. |
manifest.webmanifest | Ties the PWA icons, name and theme color together. |
Install it
Unzip the files into the directory your site serves at /, then paste this into <head>. The zip also carries favicon-setup.md with the same steps tailored to your stack.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">- The
sizes="32x32"on the ICO link stops Chrome from preferring the ICO over the SVG. See ICO vs SVG. - Sites that are not installable can drop the manifest line and the PWA icons.
- Framework guides: Next.js, Vite, Astro, React.
How the generator draws each size
Every size is rendered fresh from the source rather than scaled down from one large bitmap, so the 16px layer is drawn at 16px. When a mark still gets muddy at tab size, the small-size option lets the 16 and 32px layers use more zoom, or just the first letter of a text mark.
Text, emoji and icons become real SVG paths, so icon.svg renders without any webfont. The apple-touch-icon and maskable icon get an opaque background and extra inset automatically, because iOS paints transparent pixels black and Android crops the edges.
Beyond the browser tab
- A dark mode variant that makes one
icon.svgadapt to the browser theme. - Badged copies for dev, staging and preview, so tabs of the same app stay apart.
- A dynamic favicon module for unread counts, progress and spinners.
- Xcode and Android app icon sets from the same mark.
- The same generator as an HTTP API and an MCP server for coding agents.
Questions
Is favicon.zip free?
Yes. There is no account, watermark or paid tier. The editor runs in your browser, and the API and MCP server need no key.
Are my files uploaded?
No. The web editor renders and zips everything locally, and your image never leaves the browser. The only network requests are for font files, emoji artwork, and the site you ask the checker or URL import to fetch.
Which image should I start from?
An SVG gives the best result, because it produces a vector icon.svg and stays sharp at every size. A PNG, JPEG or WebP works too, but then the package has no SVG favicon.
Do I still need favicon.ico?
Yes. Plenty of software requests /favicon.ico directly without reading your HTML. Keep it at the site root even when you ship an SVG.