What Sizes Modern Browsers Need
A single 16×16 favicon.ico covers the browser tab in legacy browsers, but modern usage requires more:
- 16×16 and 32×32: browser tabs (ICO file can contain both)
- 180×180: Apple Touch Icon for iOS home screen bookmarks
- 192×192: Android Chrome home screen
- 512×512: Progressive Web App splash screen
- SVG: scalable favicon for modern browsers (supports dark mode adaptation via CSS
prefers-color-scheme)
The HTML Tags to Add
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
The web manifest file declares the 192×192 and 512×512 icons for Android and PWA contexts.
Why Initials-Based Favicons Work Well
For apps and dashboards, a simple initials favicon (e.g., "DH" on a colored background) is recognizable at small sizes and requires no graphic design skill. Initials render clearly at 16×16 where complex logos become unreadable. A favicon generator can produce this from two letters and a brand color.
Generating the Full Set
Use a favicon generator tool to produce all required sizes from a single source image or initials, then drop the files into your public directory.