The favicon is the smallest branding surface you own — 16 by 16 pixels in a browser tab — and the surrounding advice is bizarrely dated: snippets still circulating declare fourteen apple-touch sizes from 2012. Here's the current minimum viable setup, what each file actually does, how the ICO format fits three resolutions in one file, and the caching quirk that makes favicons the last thing on your site to update.
Four pieces, then two optional ones:
| File | Size | Who uses it |
|---|---|---|
favicon.ico | 16+32+48 frames in one file | Browser tabs, bookmarks, history, tools that request /favicon.ico by convention |
favicon-32x32.png + favicon-16x16.png | 32×32, 16×16 | Modern browsers picking a sharp PNG over the ICO frame |
apple-touch-icon.png | 180×180 | iOS and iPadOS home screens — a single size scales everywhere now |
android-chrome-192x192.png + android-chrome-512x512.png | 192, 512 | Android home screen shortcuts and PWA splash/install requirements |
maskable-icon-512x512.png (optional) | 512×512 | Android adaptive icons with shaped masks |
site.webmanifest | — | Points Android/PWA at the right icons; also carries name and theme color |
The old checklist — apple-touch icons at 57, 60, 72, 76, 114, 120, 144, and 152px, plus a stack of Microsoft tile PNGs — can be deleted. Modern iOS downscales one 180px icon, and Windows tiles read from the manifest path.
<link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Root-relative paths matter: browsers request /favicon.ico from the site root regardless of what HTML says, so host the files there and the tag and the fallback agree. The favicon generator produces this exact set — ICO, PNGs, maskable, manifest, and the snippet — from one uploaded image, entirely in the browser.
An ICO is a container: a 6-byte file header, a 16-byte directory entry per image, then the image data. For 16, 32, and 48px frames that's 6 + 3×16 = 54 bytes of overhead, and each directory entry stores its frame's byte length and offset — with 950, 2,100, and 3,400-byte PNG payloads inside, the frames begin at offsets 54, 1,004, and 3,104. Since Windows Vista, frames may be PNG-compressed rather than BMP, which is why every modern generator (and this one) packs PNGs — smaller and simpler than raw pixel data. The browser picks the nearest frame for the context: 16 for a tab, 32 for retina tabs, 48 for taskbar pins.
Android lets the launcher crop your icon into a circle, squircle, or rounded square — you don't get to pick. A maskable icon is one drawn to survive that: artwork fills the whole square, and anything that must not be cut off lives inside a centered circle with radius 40% of the icon size. On a 512px icon that's a circle 410px across — roughly 80% of the width. Practically: your logo at about 60% scale, centered, on a full-bleed background color. Declare it in the manifest with "purpose": "maskable" alongside the regular 512, not instead of it.
Favicon caching is its own genre of pain. The icon outlives the page cache, sometimes for days. In order of escalation: hard-refresh the tab (Ctrl/Cmd+Shift+R); open the icon URL directly and refresh it; test in a private window; wait. During development, add a query string (/favicon.ico?v=3) and strip it for production — stable URLs let returning visitors converge, and the lag is harmless for a logo that changes twice a decade.
A favicon is a silhouette, not a logo. At 16×16 you have 256 pixels to work with — 0.098% of a 512×512 master (262,144 pixels). One shape, one or two colors, no text. Test at actual size early: shrink your candidate to 16px and see if it's still your brand. High-contrast marks on simple backgrounds survive; gradients and thin strokes dissolve into tab-bar noise.
Upload one square image — get favicon.ico, PNGs, apple-touch-icon, maskable 512, webmanifest, and the HTML. All local, nothing uploads.
Favicon Generator →Four files and five lines of HTML: multi-size ICO in the root, a 180px apple-touch-icon with a baked background, 192+512 PNGs declared in a manifest, and optionally a maskable 512 that keeps its content inside the 40% circle. Kill the fourteen-tag legacy snippet, design for 256 pixels, and accept that the tab icon updates on its own schedule. The favicon generator builds the complete bundle in your browser, the meta tag generator covers the rest of the head, and the robots.txt generator handles crawler rules — the three files every site ships to its root.
Two files cover the practical minimum: a favicon.ico in the site root (browsers request /favicon.ico automatically even with no HTML tag) and an apple-touch-icon.png at 180×180 for iOS home screens. The full modern set adds 16 and 32px PNGs, 192 and 512px manifest icons, a maskable variant, and site.webmanifest.
Yes. Browsers and some aggregators still request /favicon.ico by convention, bookmarks and history favor it, and it's the only format some older tooling understands. An ICO with 16, 32, and 48px frames costs a few kilobytes and closes the gaps PNGs leave.
Declare a webmanifest with 192×192 and 512×512 PNG icons and link it with rel=manifest. Android reads the manifest when someone adds your site to the home screen. For the shaped adaptive icons, add a maskable 512 whose artwork fills the square and keeps content inside the centered 40%-radius safe circle.
Favicon caching is famously stubborn — separate from the page cache. Hard-refresh first; if the old icon persists, open the icon's URL directly and refresh it, or test in a private window. Keep stable icon URLs in production and accept a day of lag for returning visitors; cache-busting query strings are for development only.
Transparent works for the ICO and PNG favicons, which sit on browser chrome you don't control — usually fine. Apple-touch-icons should not be transparent: iOS composites them onto a black backdrop when no fill exists, which wrecks dark-on-transparent logos. Bake a solid background into the 180px icon and any maskable variant.