Favicon Generator
One image in, a complete favicon set out — .ico, Apple touch icon, Android maskable icons, web manifest and the HTML to paste.
Drop a square PNG, JPG, SVG or WebP — or click to choose
1000×1000 or larger works best. Nothing is uploaded — the whole set is rendered on your device.
What a complete favicon set actually contains
A single favicon.ico has not been enough for years. Browsers pick different
assets for a tab, a bookmark, a pinned shortcut, an iOS home-screen icon and an Android
adaptive icon — and each one has its own size and shape rules. This generator renders the
whole set from one source image so nothing falls back to a blurry default:
- favicon.ico — a multi-resolution ICO holding 16×16, 32×32 and 48×48 PNG frames. Modern browsers read the size they need from the one file.
- favicon-16x16.png / favicon-32x32.png — crisp tab and bookmark icons for browsers that prefer PNG over ICO.
- apple-touch-icon.png (180×180) — the iOS and iPadOS home-screen icon. iOS composites it on a rounded mask, so keep the artwork inside the safe zone.
- android-chrome-192 / 512 — the PWA icons referenced by
site.webmanifest. The 512 one is also used as amaskableicon, which Android crops into a circle or squircle. - site.webmanifest — tells Android which icons belong to the installed app and what colour to use for the splash screen.
The ICO file is assembled by hand
The ICO container is a simple binary structure: a 6-byte directory header, one 16-byte entry
per image, then the image payloads. Since 2007 the format has allowed the payload to be a
plain PNG — so this tool encodes each size as PNG on a canvas and writes the directory
around it, with no compression library involved. That keeps the page tiny and means the
.ico you download is a genuine multi-size file, not a renamed PNG.
Padding, maskable icons and the safe zone
Android's maskable icons are cropped to whatever shape the launcher uses. Only the central
80% — a circle of radius 40% around the centre — is guaranteed to survive. The padding
slider insets your artwork inside every output, and because iOS and Android mask differently
from a browser tab, a little padding makes the set look consistent everywhere. Transparent
edges are fine for .ico and PNG output.
FAQ
Where do I put the generated files?
Upload them to the root of your site (or your public/ folder) so they resolve at /favicon.ico and /apple-touch-icon.png. Then paste the HTML snippet into your <head>. After deploying, hard-refresh — browsers cache favicons aggressively and may keep showing the old one for a while.
My SVG has no width or height. Will it work?
Yes. SVGs that only declare a viewBox are pre-processed into a square 512×512 canvas before rasterising. SVGs that use CSS width:100% or depend on external fonts may still render imperfectly — export a PNG at 1000px instead if the preview looks off.
Why does my 16×16 icon look muddy?
Detail cannot survive at 16 pixels. Icons with a single bold shape and strong contrast stay readable; thin strokes, small text and intricate logos turn to mush. This tool downscales progressively rather than in one jump, which is the best a browser can do — but a simplified source image is still the real fix.
Is my image uploaded anywhere?
No. Decoding, resizing, PNG encoding and the ZIP archive are all done in your browser with the Canvas API and a small in-memory ZIP writer.