Favicons look trivial and consume hours when they do not load. The trick is to stop treating them as a tiny last task and start treating them as a small predictable subsystem with three parts: the files, the HTML tags, and the testing routine. Done in that order, the whole job takes 20 minutes.
Why this is annoying
Browsers are aggressive about caching favicons. They are also lenient about formats, inconsistent about sizes, and historically vague about which tag wins. You can do everything correctly and still see the old icon for hours because the browser is confident the cached one is fine.
Files you actually need
A short list covers nearly every realistic case:
favicon.icoserved from the site root.icon-32.pngfor browser tabs.icon-192.pngandicon-512.pngfor web app manifests.apple-touch-icon.pngat 180x180 for iOS home screens.- Optionally, a single-colour SVG icon for theming.
HTML tags that matter
A minimum tag set that survives most browsers:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Browser discovery
Browsers find favicons through a small mix of fixed conventions and HTML hints. The implicit request to /favicon.ico is still alive on most browsers, and relying on it as a fallback is fine. rel attributes carry the rest of the information.
Testing routine
- Open the site in a fresh incognito window.
- Check the tab; check the bookmark bar after bookmarking.
- Hit
/favicon.icodirectly; expect a 200. - Add the site to the iOS home screen; check the icon size.
- If the icon is wrong, change the filename, do not just edit the file.
Where this fits next
For a Ukrainian-language version of the same notes, see Yak zrobyty ikonku dlya saytu. The checklists page keeps the favicon test pass in printable form.