Favicon Requirements — Format, Size & Meta Tags
A complete favicon setup requires more than just a favicon.ico file. Modern websites need an ICO for legacy browsers, an SVG for modern ones, an apple-touch-icon for iOS, and manifest icons for PWA support. This guide covers the full set of favicon requirements and the HTML tags to wire them up.
Required Sizes
| Size | Format | Purpose |
|---|---|---|
| 48x48 | ICO | Legacy browser favicon |
| any | SVG | Modern browser favicon |
| 180x180 | PNG | Apple Touch Icon |
| 192x192 | PNG | Android and PWA |
| 512x512 | PNG | PWA splash screen |
Best Practices
- 1Include three favicon files: favicon.ico (multi-res), icon.svg, and apple-touch-icon.png (180px).
- 2Add manifest.json with 192px and 512px PNG icons for PWA installability.
- 3Use the HTML: <link rel="icon" href="/favicon.ico">, <link rel="icon" type="image/svg+xml" href="/icon.svg">, <link rel="apple-touch-icon" href="/apple-touch-icon.png">.
- 4Place favicon.ico in the root directory — browsers auto-discover /favicon.ico even without a link tag.
Common Mistakes
- Only including favicon.ico — modern browsers prefer SVG or PNG, and iOS needs apple-touch-icon separately.
- Placing the favicon only in the root directory without link tags — some browsers need explicit <link> references.
- Using a 16x16 ICO only — retina displays need at least 32px, and Windows shortcuts need 48px.
- Not setting the correct MIME type for SVG favicons — use type="image/svg+xml" in the link tag.
Generate All Favicon Files
Upload one image and get favicon.ico, SVG, apple-touch-icon, and manifest PNGs — plus the HTML code to wire them up.
Open GeneratorFrequently Asked Questions
What files do I need for a favicon?
A complete favicon setup needs: favicon.ico (multi-resolution with 16/32/48px), icon.svg (for modern browsers), apple-touch-icon.png (180px for iOS), and manifest icons (192px, 512px for PWA).
What HTML tags are needed for favicons?
Add these to your <head>: <link rel="icon" href="/favicon.ico">, <link rel="icon" type="image/svg+xml" href="/icon.svg">, <link rel="apple-touch-icon" href="/apple-touch-icon.png">, and <link rel="manifest" href="/manifest.json">.
Does favicon.ico need to be in the root?
It is strongly recommended. Browsers automatically look for /favicon.ico in the root directory. While you can place it elsewhere and reference it with a link tag, root placement ensures maximum compatibility.