The Complete Favicon Guide: Sizes, Formats and the Tags You Actually Need
Why favicons are more than a 16px icon now — SVG favicons, Apple touch icons, Android manifest icons, dark-mode variants, and the minimal tag set that covers every platform.
Favicons are a family of icons now
The word still says "favorites icon," but the job has grown: browser tabs, bookmarks, history, iOS home screens, Android launchers, Windows tiles, PWA install prompts, search result listings and browser new-tab shortcuts all pull "the site icon" — at sizes from 16px to 512px, on light and dark backgrounds, sometimes masked into a circle or squircle. One 16×16 .ico no longer covers it.
The minimal modern set
You do not need the 30-tag boilerplate that generators used to produce. For 2026 browsers, this set covers effectively every platform:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">favicon.ico(32×32, optionally multi-size) — the legacy fallback; keep it at the site root because some clients request that path directly.icon.svg— crisp at any size, tiny, and the only format that can adapt to dark mode with a@media (prefers-color-scheme: dark)rule inside the SVG.apple-touch-icon.png(180×180) — iOS ignores SVG and ignores transparency; give it an opaque background and no rounded corners (iOS rounds it for you).manifest.webmanifestwith 192×192 and 512×512 PNGs — Android, Chrome install prompts and PWA splash screens read these; mark one as"purpose": "maskable"with safe padding so it survives circular masks.
Design for 16 pixels first
Most impressions of your icon happen in a tab at 16×16 — fewer pixels than a single letter of body text. Detail disappears; what survives is silhouette and one dominant color. Test the design at that size before anything else: a bold single glyph, a simple geometric mark or a solid tile with one letter almost always beats a shrunk-down logo. If your brand mark is intricate, make a simplified favicon variant rather than forcing the full logo.
Check contrast against both Chrome’s light and dark tab strips; a dark-navy icon vanishes on a dark tab bar. The SVG dark-mode trick solves this elegantly — one file, two renderings.
Caching: why your new favicon won’t show up
Browsers cache favicons aggressively and separately from page resources, and search engines cache them for weeks. When you change the icon, change the file name or add a query string (/icon.svg?v=3) in the <link> tags — otherwise you will be staring at the old one for days while users already see the new. Google Search re-fetches favicons on its own schedule; using the URL Inspection tool on your homepage after a change nudges it.