Favicon Generator
Generate favicon sizes from any image, bundled as a ZIP.
Your files never leave your device. No upload. No sign-up.
Drop a square image, or click to upload
512×512 PNG or JPG works best
Upload a square image — ideally 512×512 — and the favicon generator produces every icon size modern browsers, iOS, and Android need: 16×16, 32×32, 48×48, 180×180, and up to 512×512, plus a ready-to-paste HTML <link> snippet. Everything is resized in your browser with the HTML5 canvas API and packaged into a downloadable ZIP. There is no upload, no account, and no server round-trip. Following the WHATWG HTML "icon" link-type spec and Apple's touch-icon convention, the output pack covers browser tabs, iOS home screens, and Android and PWA manifests in a single download.
About the Favicon Generator
Turn any image into a complete favicon set for your website — 16×16, 32×32, 48×48, and a 180×180 Apple touch icon — all rendered locally in your browser and bundled into a single ZIP download. No uploads, no sign-up.
How to use the Favicon Generator
- 1Drag and drop your image, or click to choose it from your device.
- 2Preview each generated favicon size at actual scale.
- 3Click “Download ZIP” to save every size in a single archive.
- 4Drop the files into your site root and reference them in your HTML.
Why use our Favicon Generator
All key sizes
Generates 16×16, 32×32, 48×48, and 180×180 PNG favicons in one go.
Live previews
See every size rendered before you download to spot details that won't shrink well.
Single ZIP download
Every favicon file is bundled into one archive — drop it straight into your project.
Fully client-side
Generation runs in your browser via the Canvas API — your source image is never uploaded.
How the resize is done
The source image is decoded into an HTMLImageElement and then drawn onto a canvas at each target size using canvas.drawImage(), which performs bilinear resampling in every current browser. Each canvas is exported to a PNG blob via canvas.toBlob('image/png'). The blobs are assembled into a ZIP with JSZip in the browser and offered as a single download. Because a fresh canvas is used for each size, there is no cumulative quality loss — every icon is resampled directly from your source, not from an already-shrunk copy. The HTML snippet references standard filenames (favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png) so the icons are picked up automatically by any browser that follows the current HTML Living Standard.
Real use cases
Anyone launching a new website needs a favicon before the tab looks amateurish. Rebrands demand the whole pack regenerated in an hour. Progressive Web App (PWA) builders need the 192×192 and 512×512 sizes referenced in manifest.json for the install prompt and splash screen. Internal dashboards benefit enormously from a distinctive favicon — with a dozen tabs open, the icon is the primary way people navigate back to a tool. Notion, GitBook, and Framer users can upload the generated apple-touch-icon.png to their custom-favicon settings, and Ghost and Substack authors use the 512×512 for their publication logo. Design teams keep the whole pack in the brand-asset repo so every new microsite ships with icons on day one.
Common mistakes and limitations
The single most common mistake is uploading a non-square source. A 1200×630 marketing banner squashed to 16×16 becomes an illegible smear — always pre-crop to 1:1. The second-most common mistake is text: any wordmark with more than three or four letters becomes unreadable at 16×16, so brands use a monogram or symbol for the favicon and the full wordmark elsewhere. iOS ignores transparency in apple-touch-icon.png and composites the icon over the system background, so start with an opaque background if the icon has to look right on the iOS home screen. Windows still respects .ico files packed with multi-size PNG blocks (this tool emits that format); older Windows versions had trouble with PNG-inside-ICO but current Windows 10 and 11 handle it correctly. Finally, dark-mode favicons need an SVG with a media query (@media prefers-color-scheme) — a raster icon can't adapt automatically.
Favicon sizes and where each is used
| Size | Filename | Purpose |
|---|---|---|
| 16 × 16 | favicon-16x16.png | Browser tab, address bar (non-Retina) |
| 32 × 32 | favicon-32x32.png | Retina browser tab, taskbar, bookmark bar |
| 48 × 48 | favicon-48x48.png | Windows site pin, high-DPI tabs |
| 180 × 180 | apple-touch-icon.png | iOS home-screen shortcut (Safari) |
| 192 × 192 | android-chrome-192x192.png | Android home screen, PWA install prompt |
| 512 × 512 | android-chrome-512x512.png | PWA splash screen, high-DPI Android |
| Multi-size .ico | favicon.ico | Root-directory fallback, legacy browsers |
References: WHATWG HTML Living Standard — 4.6.6 (Link type: icon); Apple Human Interface Guidelines — App icons; W3C Web App Manifest.
Frequently asked questions
What favicon sizes do I actually need in 2026?+
For a modern site: 32×32 for the browser tab, 180×180 for iOS Safari, and 192×192 plus 512×512 for Android and PWA installability. A multi-size .ico at the root is a good fallback for old browsers and search engines that fetch /favicon.ico by convention.
Why so many sizes?+
Because a 32×32 icon downscaled to 16×16 by the browser looks blurry, and a 32×32 icon upscaled to 180×180 for an iOS home screen looks pixelated. Providing native sizes lets each surface pick the right one without resampling.
Do I still need a .ico file?+
It's optional in 2026 but recommended. Some search engines and CMS embeds still request /favicon.ico by default, and Windows tile pinning uses it. This tool packs multiple PNGs into a single .ico so one file covers 16, 32, and 48 pixels.
Should I use an SVG favicon?+
SVG favicons are great for line-art logos and support dark-mode media queries, but they don't cover iOS home-screen or PWA splash-screen requirements. Ship an SVG for the tab (rel="icon" type="image/svg+xml") alongside the PNG pack.
How do I install the generated files?+
Drop the files at the root of your site, paste the HTML <link> block into your <head>, and add manifest.json for PWA support. The exact HTML the tool outputs is production-ready — no edits required.
Why does my favicon look blurry?+
Usually because the browser is downscaling a larger icon. Add explicit 16×16 and 32×32 PNGs, and make sure your source image is sharp at those sizes (or hand-adjust the smallest icons in a pixel editor for the crispest result).
Does Safari need a special icon?+
Yes — Safari on iOS looks for apple-touch-icon.png at 180×180. If you skip it, Safari falls back to a screenshot of your page, which almost never looks good on the home screen.
What about dark-mode favicons?+
Dark-mode adaptation requires an SVG favicon with a <style> block using @media (prefers-color-scheme: dark). Raster PNGs can't switch automatically, so many brands ship an SVG plus PNG fallbacks.
Can I use a transparent PNG?+
Yes for the browser-tab and Android icons. Avoid transparency for apple-touch-icon.png — iOS fills transparent pixels with black, which usually isn't what you want.
What's the ideal source image size?+
512×512 pixels, square, PNG. That size is used as-is for the largest PWA icon and downsamples cleanly to every smaller size. If your source is larger it's fine; the tool downscales in one step from source to target.
Last updated: