Favicon Generator
Generate a complete favicon set (PNG sizes + ICO + manifest) from a single source image
Drop a source image — ideally square, at least 512×512. PNG, JPG, or SVG.
Max file size: 50MB
How to Favicon Generator Online
Generate a complete favicon set (PNG sizes + multi-image ICO + web manifest) from a single source image.
- Drop a source image — ideally square, at least 512×512 pixels. PNG, JPG, or SVG all work.
- Choose a background: 'Transparent' keeps your source's alpha channel (ideal for a logo); 'Solid color' fills the background (useful for source images that don't have a square aspect ratio, or for matching a brand color).
- Wait briefly while the tool renders 6 PNG sizes (16, 32, 48, 180, 192, 512) via high-quality canvas downscaling and packs the 16/32/48 frames into a multi-image favicon.ico.
- Inspect the preview row — every generated size is shown at actual size up to 96×96.
- Click 'Download favicons.zip' to get the complete bundle (7 files + README HTML snippet).
- Drop the files at your site root and add the 5-line <link> block to your <head>. Done.
About Favicon Generator
Shipping a favicon in 2026 is more involved than it should be. The classic answer — drop a single `favicon.ico` at the site root — works for desktop browsers but fails on every other surface. iOS Safari wants a 180×180 PNG with no transparency. Android Chrome wants 192×192 and 512×512 PNGs declared in a web manifest for proper add-to-home-screen behavior. Modern desktop browsers prefer high-DPI PNGs for the tab icon at large display scales. Windows historically wanted a 144×144 tile. Every platform has its own conventions and the only way to satisfy all of them is to ship a complete set of sizes with appropriate metadata.
This tool produces that complete set from a single source image. You drop in a logo (ideally square, ideally 512×512 or larger, ideally with a transparent background), and the tool emits:
- **`favicon.ico`** — a multi-image ICO container with 16×16, 32×32, and 48×48 frames packed inside. Every browser auto-discovers this at the site root. - **`favicon-16x16.png`**, **`favicon-32x32.png`**, **`favicon-48x48.png`** — separate PNG files for explicit `<link rel="icon">` references. Modern browsers prefer PNG over ICO when both are declared. - **`apple-touch-icon.png`** — 180×180, used by iOS Safari for the home-screen icon. iOS rounds the corners itself; don't pre-round. - **`android-chrome-192x192.png`** and **`android-chrome-512x512.png`** — referenced from the web manifest for Android home-screen icons and PWA splash screens. - **`site.webmanifest`** — the JSON file browsers read to handle install/PWA behavior, with icons, theme color, and display mode pre-filled.
The ICO encoder is the interesting bit. The file format dates to 1985 (Windows 1.0) and the modern variant (PNG payloads accepted since Vista) is barely documented anywhere except the spec. The encoder here is a small pure function: 6-byte header (reserved/type/count), one 16-byte directory entry per frame (with width, height, bit depth, byte size, and file offset), then the PNG bytes concatenated at the end. Each frame is itself a valid PNG generated by canvas's `toBlob`, so the whole ICO is just a thin container around three PNGs. Every modern browser and Windows version reads this format correctly.
The **background option** matters more than people expect. iOS specifically does *not* respect alpha transparency for `apple-touch-icon` — if your source PNG has a transparent background, iOS fills it with black, which is rarely what you want. The "solid color" option pre-fills a chosen background so the apple-touch-icon matches the rest of your set. For non-square source images, the solid color also fills the letterbox area around the centered logo. If your logo is meant to float on whatever background it lands on (a stylized monogram, for example), keep transparent; if it's a complete badge with intentional negative space, pick a brand color.
The **HTML snippet** the tool generates is the 5-line block you paste into your `<head>`:
```html <link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> ```
Drop the seven files at your site root, paste the snippet, and every reasonable browser will pick the appropriate icon for its display context. Modern Chrome, Firefox, Safari, Edge, iOS Safari, Android Chrome — all covered.
A small note on **SVG favicons**. The 2026 best-practice setup adds a sixth line: `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Modern browsers will prefer SVG when present because it scales perfectly to any size. The PNG and ICO fallbacks stay in place for browsers that don't support SVG favicons (mostly older Safari and old browsers in general). This tool doesn't generate SVG favicons because SVG is a hand-authored format, not a canvas-rendered one — for SVG, optimize your source SVG via the dedicated SVG Optimizer tool and reference it directly.
Everything runs in your browser. The canvas API handles the down-scaling with high-quality interpolation (browser-implemented bicubic or similar); the ICO encoder is ~50 lines of pure TypeScript with vitest coverage of single-frame, multi-frame, byte-offset correctness, and the 256-encodes-as-0 spec quirk; JSZip handles the bundling. No network requests. Your source image and the generated set never leave your tab.
Related Tools
Frequently Asked Questions
What does the ZIP actually contain?
Seven files: `favicon.ico` (a multi-image ICO containing 16x16, 32x32, and 48x48), `favicon-16x16.png`, `favicon-32x32.png`, `favicon-48x48.png`, `apple-touch-icon.png` (180x180, used by iOS Safari), `android-chrome-192x192.png` and `android-chrome-512x512.png` (used by Android home-screen installs via the manifest), and `site.webmanifest` (the JSON file modern browsers read to handle PWA-style add-to-home behavior). Plus a `README.html-snippet.txt` with the exact `<link>` tags to paste into your `<head>`.
Why so many sizes? Doesn't one favicon.ico work?
It works, but badly. The classic 32×32 ICO is what shows in browser tabs and bookmarks, but **Apple devices** want a 180×180 PNG (`apple-touch-icon`) for the home-screen icon (no transparency, no alpha — iOS rounds the corners itself). **Android Chrome** uses 192×192 for the home-screen icon and 512×512 for the splash screen of an installed PWA. **Windows tiles** historically wanted 144×144 (less relevant now). Shipping all of these means your site looks right when bookmarked or installed on any modern device.
What source image should I use?
Ideally **square, at least 512×512 pixels**, with simple geometry that reads well at 16×16. A PNG with transparency is best; SVG works if it's flat-rendered (it'll get rasterized via canvas, which doesn't preserve vector scalability). For best results: a single-color logo on a transparent or solid-color background, with prominent shapes that survive down-scaling. Avoid thin lines and fine text — at 16×16 those become unreadable noise.
Why do I need an .ico file in 2026?
Three reasons. Edge legacy mode and old IE-derived browsers still demand `favicon.ico`. RSS readers and other niche clients hard-code the filename. And `favicon.ico` at the site root is auto-discovered by every browser as a fallback even without a `<link>` tag — putting one there means broken-tag setups still get a working icon. The cost is ~3 KB. Just include it.
What does the ICO format actually contain?
An ICO is a container — a 6-byte header, one 16-byte directory entry per included image, then the image data concatenated at the end. Each entry has the image's pixel dimensions, color depth, byte size, and offset into the file. The image data itself can be either BMP-style raw bitmaps (the original 1995 format) or PNG payloads (added in Windows Vista, accepted by every browser since). This tool generates PNG-payload ICOs — they're smaller and use the same encoder for all sizes.
Should I use SVG favicons instead?
Modern browsers (Chrome 90+, Firefox 90+, Safari 12+) support `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. It's the future and ships at ~1 KB. The catch is that SVG favicons don't have a 16×16-optimized variant inside them — you're at the mercy of the SVG's rasterizer at every size, which sometimes produces fuzzy results at the smallest tab sizes. The typical 2026 setup is: SVG favicon for modern browsers, PNG+ICO fallbacks for everything else. This tool produces the fallbacks; for the SVG version, optimize your source SVG via the SVG Optimizer tool.
Is the image sent to a server?
No. Source image decode, all the resizing, the ICO encoding, and the ZIP packaging happen in your browser. The ZIP is downloaded directly from a blob URL. Your logo, brand assets, anything unreleased — all stays in your tab.