Web & APIs · 4 min read
Favicons Explained: Which Sizes and Files You Need
Favicon advice online often lists twenty files in a dozen sizes. Modern browsers need far less. This guide gives you the small set that covers every current browser and device, and explains what each file is for.
Try it yourself with the related tool.
Generate a favicon set →Advertisement
The minimal set
You need four things: a favicon.ico containing 16 × 16 and 32 × 32 images for older browsers and tools that request /favicon.ico directly; an icon.svg that scales perfectly and can even adapt to dark mode; a 180 × 180 apple-touch-icon.png for iOS home screens; and 192 × 192 and 512 × 512 PNGs listed in a web manifest for Android and installable web apps.
The HTML
Link them in the head: <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">, and <link rel="manifest" href="/manifest.webmanifest">. Browsers pick the best match on their own.
Designing for 16 pixels
A favicon is shown tiny, next to other tabs. Detailed logos turn to mush, so use a simplified mark — a single letter or symbol with strong contrast. Fill the square, and check how it looks on both light and dark tab bars. An SVG favicon can include a prefers-color-scheme media query to swap colours.
When the favicon will not update
Browsers cache favicons stubbornly, sometimes for days. If a new icon does not appear, test in a private window, or add a version query such as /icon.svg?v=2 to the link to force a fresh fetch.