Favicon guidance accumulated for twenty years and most of it is now obsolete. You do not need 27 files. You need four, and one of them exists only for old Windows browsers.
/favicon.ico — a multi-resolution ICO containing 16x16 and 32x32. Requested at the site root by browsers that do not read your HTML, so it must exist at that exact path./icon.svg — a single SVG referenced with <link rel="icon" type="image/svg+xml" href="/icon.svg">. Scales to any size and can adapt to dark mode with a media query inside the SVG./apple-touch-icon.png — 180x180, no transparency, no rounded corners (iOS applies its own mask). Also fetched from the root by convention./manifest.webmanifest — with 192x192 and 512x512 PNGs for Android home-screen installs, plus a 512x512 maskable variant if you care about the icon not being cropped badly.That is the whole list. The old sprawl of 57x57, 72x72, 114x114 iOS sizes has not been necessary for years.
For a single-page or hand-built site you can skip the file entirely and inline an emoji as the icon:
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎰</text></svg>">Zero extra requests, no build step. The catch is that emoji render differently per platform and there is no ICO fallback, so pair it with a real /favicon.ico if legacy browser support matters.
The size that appears in a browser tab is 16x16 at 1x and 32x32 on a high-DPI display. A logo that reads beautifully at 512 turns into three grey pixels at 16. Practical rules: one shape, not a scene; two colours at most; drop wordmarks entirely unless the mark is a single letter; and test by actually shrinking the image to 16 pixels and looking at it, rather than trusting a preview grid at 128.
An SVG favicon can respond to the browser theme by embedding @media (prefers-color-scheme: dark) { path { fill: #fff } } inside the SVG. This is worth doing for monochrome marks, which otherwise disappear against a dark tab strip. PNG and ICO cannot do this, which is the strongest practical argument for shipping the SVG.
Browsers cache favicons aggressively and separately from the page cache, so a hard refresh often does nothing. The reliable fix is a cache-busting query string on the link href (/icon.svg?v=2) — note this does not help for /favicon.ico, which is fetched by convention without reading your HTML. For that file, expect a delay of hours to days, and verify with a fresh private window or by requesting the URL directly rather than trusting the tab.
Load each icon URL directly and confirm a 200 and the right content type — image/svg+xml for the SVG, image/x-icon or image/vnd.microsoft.icon for the ICO. Then check the manifest parses as JSON and that its icons paths resolve. A manifest with a typo'd icon path fails silently and only shows up when someone tries to install the site.