"A favicon" used to mean one 16×16 ICO file pinned in the browser tab. Now it means a tab icon, a high-DPR retina tab icon, a Windows pinned-site icon, an iOS home-screen icon, an Android adaptive icon for the chrome of the notification drawer, a maskable PWA icon that gets clipped into a circle on Pixel and a squircle on iOS, plus a 512×512 splash-screen source. Modern browsers pull each one from a different <link> tag or a manifest.json entry, and if they fall back to the default they pick whatever rasterizes worst for the device. This generator produces every standard size in one pass so you only have to design the icon once.
Upload a square source at 512px or larger, ideally with a transparent or solid background and the symbol centered with comfortable padding. The tool resamples it to each target size and gives you the HTML link tags to paste into your <head>.
How to use
- Upload a square source — 512×512 PNG works best. SVG or JPEG also accepted; non-square images get center-cropped.
- Preview every size — 16, 32, 48, 180, 192, and 512 px previews render side by side so you can spot detail loss at small sizes.
- Download individually — each PNG is a separate file. Drop them into your public folder under the names the HTML snippet references.
- Copy the HTML — paste into
<head> so the browser, iOS, Android, and Windows all find their preferred size.
Favicon size cheat sheet
| Size | Where it shows up | Link tag / manifest |
|---|
| 16×16 | Classic browser tab | icon |
| 32×32 | Modern browser tabs, retina downscale source | icon |
| 48×48 | Windows site icons, taskbar pinning | icon |
| 180×180 | iOS home screen, iPad Pro | apple-touch-icon |
| 192×192 | Android Chrome, splash screens | manifest.json icons |
| 512×512 | PWA install prompt, Android splash | manifest.json icons |
Maskable icons (the OS-clipped variant)
On Android, the OS clips the home-screen icon into whatever shape the launcher prefers — circle on Pixel, rounded square on Samsung, squircle on iOS-style launchers. If your icon fills the entire 192×192 box, the corners get chopped. A maskableicon adds a "safe zone" — the meaningful symbol lives inside the central 80% radius, with a solid background filling the outer ring. Declare it in your manifest.json:
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}Web.dev's "Maskable Icon Editor" lets you preview the clipped result before shipping. If the icon already has padding (e.g. logo on a colored background tile), you can declare the same file with "purpose": "any maskable".
Minimum HTML snippet
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/icon-32.png" type="image/png" sizes="32x32" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.json" />
Browsers pick the most specific match; older clients fall back to /favicon.ico. The manifest carries the 192 / 512 PNG entries for Android and PWA installs.
SVG favicon (modern bonus)
Chrome, Firefox, and Safari all support a single SVG favicon that scales to any size with sharp vector edges and supports prefers-color-scheme for automatic dark-mode tinting. Add it alongside the PNG fallbacks:
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="icon" type="image/png" href="/icon-32.png" />
Common pitfalls
- Detail vanishing at 16×16. A logo with hairline strokes looks fine at 512 but turns into mush at 16. Design the icon at 16 first or simplify the small variant — symbol-only, no wordmark.
- iOS clipping a transparent icon. iOS auto-adds a white square background behind transparent home-screen icons. Provide a 180×180 with the background you actually want.
- Forgetting the maskable purpose. Without
"purpose": "maskable", Android launchers clip edge-to-edge logos. Symbol gets chopped on circular launchers. - Skipping the manifest. No
manifest.json means no PWA install prompt and no Android splash icon — just a generic browser frame. - Caching stale favicons. Browsers cache favicons aggressively. After updating, append a query string (
?v=2) to bust the cache or rename the file.
Performance and SEO notes
Favicons are tiny but they are requested on every page load and they show up in every search-result snippet (Google shows the 16×16 next to the URL in mobile SERPs). A missing or 404-ing favicon hurts perceived polish; a too-big favicon delays the page's first non-critical fetch. Keep all PNGs under a few KB, serve them with long Cache-Control, and consider the SVG-first approach for a single small file that covers every screen density.
Frequently asked questions
Q: What source image works best?
Start with a 512×512 (or larger) square PNG. Symbol centered, ~10% padding, either a transparent background or a solid color that matches the brand. SVG sources work too and resample better at small sizes. Avoid wordmarks — at 16×16 they become unreadable.
Q: Do I need all six sizes?
The realistic minimum is favicon.ico (or a 32 PNG), a 180 Apple touch icon, and 192 / 512 PNGs in manifest.json. Ship the rest if you want optimal results on Windows tiles, retina taskbars, and pinned shortcuts; the cost is a few KB.
Q: What is a maskable icon?
An icon designed to keep its meaningful content inside a central safe zone (~80% of the canvas) so the OS can clip it into any shape — circle on Pixel, squircle on iOS-style launchers, rounded square on Samsung — without cropping the logo. Declared in manifest.json with "purpose": "maskable".
Q: Why does my updated favicon not show?
Browsers cache favicons very aggressively — sometimes for weeks. Hard refresh (Cmd-Shift-R / Ctrl-F5), or rename the file, or append a query string like ?v=2 to the link tag. Mobile home-screen icons may need the shortcut deleted and re-added.
Q: Should I use ICO or PNG?
Modern browsers prefer PNG (and SVG). ICO is still useful as the legacy/favicon.ico fallback for very old clients. The ideal setup ships both — an ICO for compatibility and PNGs declared via <link rel="icon"> for everything else.
Q: Are the images uploaded anywhere?
No. All resizing happens locally via the Canvas API. The source file never leaves your machine — confirm in DevTools Network. You can safely generate favicons from unreleased brand assets.
Related guides
SVG Optimization for Web Performance: Tips and Techniques
SVGs are XML, so they compress well — but the default export from Figma is bloated. Manual cleanups, SVGO, inline vs external trade-offs, and the accessibility attributes worth keeping.
Image Optimization for Web Developers: Formats, Tools, and Techniques
JPEG vs PNG was the question in 2012; today it is WebP vs AVIF, plus srcset, lazy loading, and SVG inlining. The optimizations that actually move Largest Contentful Paint.
Image Compression vs. Resizing: Picking the Right Optimization for Web Performance
Compression shrinks bytes per pixel; resizing shrinks the pixel count. When each wins, when you need both, and how srcset plus AVIF tie it together in a real responsive image setup.