Favicon Generator
Drop in one image and download the full modern favicon set — favicon.ico, six PNG sizes, a Web App Manifest, and the HTML snippet for your <head>. Runs entirely in your browser. No signup, no upload, sources cited.
How it works
A favicon today is not a single file — it is a small bundle. Every modern site ships one favicon.ico at the root (for legacy paths), a handful of PNGs at carefully chosen sizes (for tabs, iOS, Android, and Windows), plus a Web App Manifest that ties the PNGs to a name, theme colour, and display mode for installable PWAs. The MDN favicon reference and the W3C Web App Manifest together define the minimum modern set; this tool produces every file in that set from a single source image.
For each size the tool does three deterministic steps:
- Solve placement. A pure function in
lib/data/favicon-generator.ts(computeSquareFit) takes the source dimensions and the chosen fit-mode (fit / cover / stretch) and returns the draw rectangle on the square target canvas. The math is cross-checked a second way (computeSquareFitByRatio) — aspect-ratio comparison instead of scale-factor min/max — and the two must agree to the pixel. - Render to PNG. A canvas of the target size is filled with
clearRect, the source is drawn throughdrawImage(src, offsetX, offsetY, drawWidth, drawHeight), andcanvas.toBlob("image/png")returns the encoded byte stream. Transparency is preserved — the output PNG carries alpha. - Bundle into ICO + ZIP. The 3 smaller PNGs (16, 32, 48) are assembled into a single multi-resolution
favicon.icoper Microsoft's ICONDIR / ICONDIRENTRY layout, with PNG payloads (the variant supported since Windows Vista). All output files — PNGs, ICO, manifest.json, HTML snippet — are then deflated into a ZIP via fflate'szipSyncand offered as a download through an object URL. No bytes leave the browser tab.
The output layout is flat — drop the files into your web root and paste the snippet into <head>. The HTML order matters: the legacy /favicon.ico declaration comes first so browsers that fail to read the more specific type="image/png" tags still find an icon, then the 16/32 PNGs, then the apple-touch-icon, and finally the manifest plus theme-color meta.
Worked examples
Frequently asked questions
Sources & references
- Microsoft — Icons in Win32 (ICONDIR / ICONDIRENTRY layout, byte order)
- W3C — Web Application Manifest specification
- MDN — Favicon reference (icon link tags, recommended sizes)
- web.dev — Add a Web App Manifest (icon sizes, maskable purpose)
- Apple — Configuring Web Applications (apple-touch-icon)
- MDN — HTMLCanvasElement.toBlob (canvas → PNG encoding)
- fflate — DEFLATE/ZIP library used for in-browser bundling
The ICO writer, manifest builder, and HTML snippet were cross-checked against the sources above on 2026-05-11. Source images up to 50.0 MB are accepted; for best results, use a square image of at least 512×512 pixels.
Output files
| File | Size | Purpose |
|---|---|---|
| favicon-16x16.png | 16×16 | Browser tab (legacy) |
| favicon-32x32.png | 32×32 | Browser tab (hi-DPI) |
| favicon-48x48.png | 48×48 | Windows site icon |
| apple-touch-icon.png | 180×180 | iOS home-screen (Apple touch icon) |
| android-chrome-192x192.png | 192×192 | Android home-screen (PWA) |
| android-chrome-512x512.png | 512×512 | PWA splash & maskable icon |
| favicon.ico | 16, 32, 48 | Legacy multi-resolution icon for browsers, RSS readers, and Windows. |
| site.webmanifest | — | W3C Web App Manifest — name, short_name, theme & background colours, icons, display mode. |
| install.html | — | The <link> and <meta> tags to paste into your page's <head>. |
Related tools
Comments & feedback
Spotted a bug or want an improvement? Tell us — our team reviews every comment, and good ideas get built. Comments are public and anonymous.
Found a bug, edge case, or want to suggest an improvement?
Email me at [email protected] — most fixes ship within 24 hours.