One image in, the complete modern favicon set out — all in your browser
Click or drop a square image
PNG, JPG, or SVG · 512×512 or larger recommended · runs locally
| File | Size | Consumed by | Notes |
|---|---|---|---|
| favicon.ico | 16+32+48 in one file | Browser tabs, bookmarks, history | The one file every browser since the 90s understands; multi-size frames pack three resolutions |
| favicon-32x32.png | 32×32 | Modern desktop browsers | Sharper than the ICO frame in some renderers |
| favicon-16x16.png | 16×16 | Browser tabs (standard DPI) | The tiny one — test that your mark survives it |
| apple-touch-icon.png | 180×180 | iOS home screen, iPad | iOS rounds the corners itself; supply a full square with background fill |
| android-chrome-192x192.png | 192×192 | Android home screen | Referenced from the manifest |
| android-chrome-512x512.png | 512×512 | Splash screens, PWA store | Required by installable PWA rules |
| maskable-icon-512x512.png | 512×512 | Android adaptive icons | Full-bleed art; content inside the 40%-radius safe circle |
| site.webmanifest | — | Browsers reading the icon list | Names, theme color, and icon declarations in one JSON file |
Older advice lists dozens of apple-touch sizes (57, 60, 72, 76, 114, 120, 144, 152) and MS tile icons. Modern iOS scales a single 180px icon, and Windows tile support now keys off the manifest — the lean set above covers current platforms.
The pipeline is pure canvas. Your image is decoded once, then redrawn at each target size with high-quality smoothing: 16, 32, and 48px frames are packed into a real multi-size .ico (each frame stored as a compressed PNG inside the ICO container), PNGs are exported at their exact sizes, and the maskable variant scales your art into the safe circle over your background color. The webmanifest and HTML snippet are generated from your app name. Nothing leaves the tab.
An ICO file is a 6-byte header plus a 16-byte directory entry per frame, followed by the image data. For a 16+32+48 favicon, that's 6 + 3×16 = 54 bytes of overhead before the first pixel. Each entry records its frame's byte count and offset — with PNG payloads of 950, 2,100, and 3,400 bytes, the frames sit at offsets 54, 1,004, and 3,104, for a 6,504-byte file. All three browsers' favicon logic reads this format natively, including the PNG-in-ICO packing every modern generator uses.
The resolution span is worth appreciating: a 512×512 icon is 262,144 pixels; the 16×16 tab frame is 256 pixels — 0.098% of the master. That's why a favicon mark needs to be one bold shape, not a shrunk-down logo: at 256 pixels there is no detail left, only silhouette.
Square, at least 512×512, with the mark readable at thumbnail size. Flat shapes and one or two colors win; thin strokes and small text die at 16px. Transparency is fine for the ICO and PNGs, but iOS composites apple-touch-icons onto a black background when no fill is supplied — use the background-color option here to bake a proper fill behind transparent art. SVG masters work too and rasterize crisply at every size.
The canvas size pipeline follows favycon by Rui Saraiva (MIT); the ICO and zip writers here are ToolAspect code. Everything runs client-side.
Four pieces cover effectively everything: favicon.ico containing 16, 32, and 48-pixel frames (browser tabs, bookmarks, legacy), apple-touch-icon.png at 180×180 (iOS home screens), and 192×192 plus 512×512 PNGs referenced in site.webmanifest (Android home screens and PWA installs). A maskable 512 adds full-bleed Android adaptive icons.
At least 512×512 and square. Everything else is generated down from it, and downscaling keeps detail while upscaling blurs. A 512×512 PNG or SVG master is ideal; the tool draws SVGs at full raster quality. Avoid sources with small text — at 16 pixels, only a bold single shape survives.
A maskable icon is drawn full-bleed so Android can crop it to any shape — circle, squircle, rounded square. The safe zone is a centered circle with radius 40% of the icon size, so your logo must fit inside that circle while color fills the entire square. This tool generates the maskable variant with your content scaled into the safe zone over your chosen background color.
Favicons are cached aggressively, often harder than the page itself. Hard-refresh the tab, and if that fails the icon is parked in the favicon cache — visit the ICO URL directly and refresh it, or wait it out. A cache-busting query string on the link tag works during development, but keep stable URLs in production so returning visitors update promptly.
As a complement, yes — declare it with rel=icon type=image/svg+xml and it serves crisp scaling in Chromium and Firefox. Safari's support is partial, so keep the ICO and PNG set as the fallback every browser gets. SVG favicons can also embed a prefers-color-scheme media query to swap dark/light variants.