Favicon generators output 20+ files from 2015-era requirements. Modern browsers need four.
The complete modern set
<link rel="icon" href="/favicon.ico" sizes="32x32"> <!-- legacy/fallback --> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <!-- scales forever, dark-mode capable --> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- 180×180, iOS home screen --> <link rel="manifest" href="/manifest.webmanifest"> <!-- Android/PWA -->
// manifest.webmanifest
{
"name": "AnnauniversityPlus",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#0a0a10",
"background_color": "#0a0a10",
"display": "standalone"
}The SVG bonus
SVG favicons can respond to dark mode: embed @media (prefers-color-scheme: dark) inside the SVG itself. One vector file, sharp at every size, theme-aware — the .ico era is over except as fallback.