I haven’t thought about favicons in years, but I read an interesting article this morning called How to Favicon in 2022: Six files that fit most needs. It was written by Andrey Sitnik, creator of PostCSS and Autoprefixer, so the article has my attention.
The tldr is this is all you need in modern browsers:
<link rel="icon" href="/favicon.ico" sizes="any" /><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest" />
And in your manifest.webmanifest file:
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}