Favicon Generator
Turn one image into every favicon and app icon a modern site needs — multi-resolution .ico, Apple touch, Android Chrome, maskable PWA icon, manifest, and HTML snippet. Live tab, iOS, and Android previews. Runs entirely in your browser.
Background
Set a background first
ICO + 7 PNG sizes + manifest + HTML snippet
HTML snippet
Paste in <head>
<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" />
site.webmanifest
Save next to favicon.ico
{
"name": "Your App",
"short_name": "App",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/maskable-icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}What you actually need in 2026
A modern site is opened in browser tabs, pinned to mobile home screens, installed as a PWA, and previewed inside operating system shells. Each of those surfaces wants a different icon file, in a different size, sometimes with different cropping rules. Generating them by hand — or trusting a generic uploader that hides what it produced — is how favicons end up blurry, missing on Android, or showing as a default planet on iOS.
This tool generates the complete set from one source image, shows you each variant in its real context (tab, iOS home screen, Android maskable), and packages everything into a single ZIP. No upload, no signup, no watermark.
What's inside the ZIP
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32, 48 (multi-res) | Legacy browsers, Windows taskbar |
| favicon-16x16.png | 16×16 | Modern browser tab |
| favicon-32x32.png | 32×32 | Hi-DPI browser tab, bookmark bar |
| favicon-48x48.png | 48×48 | Chrome shortcut, Windows tile |
| apple-touch-icon.png | 180×180 | iOS Safari add-to-home-screen |
| android-chrome-192x192.png | 192×192 | Android home screen |
| android-chrome-512x512.png | 512×512 | PWA splash, app stores |
| maskable-icon-512x512.png | 512×512 with safe area | PWA “adaptive” icons on Android |
| site.webmanifest | JSON | PWA manifest entry |
| html-snippet.html | <link> tags | Paste in your document head |
Background, padding, radius — explained
- Background. Transparent works for most logos. Pick a solid color when your logo is a thin glyph that would disappear on dark browser tabs. Pure black or pure white logos almost always need the opposite background to be visible in both light and dark themes.
- Padding. Insets the artwork from the edge. Use 5–10% for tightly-cropped logos that need breathing room, 0% for marks that already include whitespace. Apple Touch icons traditionally include a small inset.
- Corner radius. Applies only when a background is set. Subtle (4–8%) gives a polished look; iOS automatically rounds its own corners on top so 0% is fine for apple-touch-icon. For Windows tiles, keep it square (0%).
- Scale. Zoom the artwork inside the icon canvas without cropping the source. Useful when your logo has too much built-in whitespace to fit inside the safe area at small sizes.
Maskable icons — why they matter
When users install a PWA on Android, Chrome and other launchers may crop the icon into the system shape — usually a circle, sometimes a squircle. A regular icon with art touching the edges will get clipped. The maskable spec solves this by reserving a safe zone inside the icon: the center 80% is guaranteed to be visible after cropping.
This generator emits a separate maskable-icon-512x512.png with an extra 10% padding around your artwork. The site.webmanifest declares it with purpose: "maskable" so Android launchers pick it up automatically.
Source image tips
- Start at 512×512 or larger. Up-scaling small art into 192/512 PNGs looks soft. Vector sources (SVG) flattened to a 1024×1024 raster also work great.
- Avoid thin strokes. Anything thinner than ~3% of the canvas will alias at 16×16. Test the live tab preview — if your mark disappears there, simplify before exporting.
- Use the maskable preview. Increase padding until critical parts of your logo fit inside the circular crop. Brand symbols, not wordmarks, work best for small icon sizes.
- Privacy. Your image never leaves the browser. All processing uses the Canvas API locally; the ZIP is generated client-side with JSZip and streamed directly to your download folder.