How many favicon files do I actually need?

Far fewer than the old advice suggested. An SVG favicon, a correctly sized PNG fallback, a valid root favicon.ico, and a high-resolution Apple touch icon cover the main browser and Apple Home Screen cases — no separate file per device. An installable web app additionally needs manifest icons, ideally including a maskable one.

Do I need a web app manifest?

A manifest is useful when an installed experience — a launcher icon, a separate app-style window — would clearly help returning users. It supplies metadata and icon candidates, but installation behavior still depends on the browser and platform. Most brochure sites can omit it unless that installed experience offers a real benefit.

Can different pages have different favicons?

Yes, a per-page rel=icon is legitimate — a distinct icon per section or category can aid orientation. Keep a stable core identity first, and remember browsers and platforms may cache tab, installed and home-screen icons for a long time, with updates inconsistent across systems — so never rely on an icon change to communicate anything essential.

Does your site have a complete, recognizable icon set?

Small as they are, favicons and home-screen icons do real work. They are the tiny mark in the browser tab, the picture beside a bookmark, and the icon on a phone's home screen. A missing or blurry one makes a site feel unfinished; a crisp, consistent one is quiet brand recognition every time someone returns. The trick is to set up a small, layered set correctly rather than generating a bewildering file per platform.

Start with one strong, simple mark

Design a single square icon that stays recognizable when shrunk to 16 pixels in a browser tab. That means high contrast and very little detail — a logo full of fine lines turns to mush at that size. Keep this core mark constant, but adapt its treatment per context: the 16-pixel tab icon, the large touch icon and a maskable app icon have different needs for detail, padding and background, and one mechanical export rarely fits all three.

Provide a few formats, not dozens

Different browsers prefer different formats; you declare candidates and the browser selects the most appropriate one it supports (with type, media and sizes guiding the choice — equally good candidates resolve to the last declared):

An SVG favicon where supported: resolution-independent and usually compact — provided the artwork is designed to stay clear at small sizes.
A PNG with its real pixel size declared, so browsers can weigh it against the other candidates.
A valid root favicon.ico — genuinely ICO, ideally containing 16- and 32-pixel variants — as the conventional fallback.
A high-resolution PNG Apple touch icon (square, e.g. 180×180, without baked-in rounded corners — the platform applies its own mask) for Home Screen bookmarks on Apple devices; other platforms use manifest icons or page icons instead.

<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any">
<link rel="icon" href="/icon-32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<meta name="theme-color" content="#0b5fff">

sizes="any" marks the scalable SVG and belongs on that line, not on the .ico. And check each URL actually returns the intended image with a correct HTTP Content-Type — the HTML type attribute is a hint, not a fix for a broken response.

Set a theme-color to suggest your brand color for supporting browser UI — browsers may ignore or adjust it — with light and dark variants via media queries where that improves the look:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#111827" media="(prefers-color-scheme: dark)">

Keep a stable identity, vary it sparingly

A web app manifest supplies app metadata and icon candidates for an installed experience — a launcher or home-screen icon, a separate app-style window — without by itself guaranteeing installability. It's usually worth adding when that installed experience genuinely helps returning users, as with a tool people open daily; most brochure sites can skip it. If you do add one, provide properly sized manifest icons and a maskable icon whose important artwork stays inside the safe zone, because platforms crop icons into circles and squircles of their own.

Per-page favicons are legitimate: a different icon per section or category can help orientation — a distinct icon on each zodiac-sign page, say — set with a per-page rel="icon". But keep the stable core identity first, and remember icons may be cached for a long time with inconsistent update behavior across platforms — never use an icon change to signal anything essential.

What to do

Design one simple, high-contrast square mark that reads at 16px, and adapt its padding and detail per context.
Provide an SVG favicon, a size-declared PNG, and a valid root favicon.ico — each URL verified to serve correctly.
Add a high-resolution square Apple touch icon for Apple Home Screen bookmarks.
Suggest a theme-color, with light/dark variants via media queries where useful.
Add a manifest when an installed experience truly helps — with sized and maskable icons.
Keep a stable identity first and per-page icons as a light accent — stable identity plus sparing variation is a practical baseline set that makes most sites feel finished.