Favicons and the web app manifest: the files to ship and how to declare them

What it is

The HTML Standard says that in the absence of a link with the icon keyword, a user agent may fetch /favicon.ico relative to the document's URL and use it as the icon. That is why a request for that path appears in every access log, and why the file should exist even when icons are declared. Declared icons are <link rel="icon" href="..." sizes="..." type="...">; when several are declared, the standard says the user agent must select the most appropriate one according to the type, media and sizes attributes, and among equally appropriate ones the last declared wins. Installed and pinned contexts read the web app manifest, whose icons array lists objects with src, sizes (48x48 96x96) and purpose. MDN documents the purposes: any (default), maskable (designed with icon masks and a safe zone so the platform may crop the edges) and monochrome (the alpha channel used as a mask over a solid fill). For search results, Google's documentation states that it supports one favicon per site, where a site is a hostname, that the icon must be square and at least 8x8px with larger than 48x48px recommended, that the favicon URL must be stable, and that both the icon file and the home page must be crawlable.

Why it matters

Icons are small but appear everywhere: tabs, bookmarks, home screens, search results, task switchers. A missing or wrong one is noticed by users and costs nothing to fix once, while a broken declaration can persist for years because nothing fails.

How to apply

• Ship /favicon.ico (a multi-size ICO), an SVG icon declared with rel="icon" type="image/svg+xml", one PNG for browsers without SVG icon support, and an apple-touch-icon PNG at the size Apple's documentation specifies.
• Add a manifest with at least two PNG sizes (a launcher icon and a large one for splash screens) at the sizes the target platforms document; give a separate maskable icon with the artwork inside the safe zone rather than reusing the any icon.
• Serve the manifest with the correct media type and declare it with <link rel="manifest"> on every page, not only the home page.
• Keep icon URLs stable; when the artwork changes, keep the path and let caches expire, or change the path everywhere at once.
• Check with the browser's application panel and by requesting each declared URL with curl.

Pitfalls

Declaring icons that return 404 or a redirect to HTML. Using a maskable icon whose logo touches the edges, which platforms crop. Blocking /favicon.ico or the manifest in robots.txt.