Common Mistakes
- Only shipping one icon file (usually 32x32 PNG).
- Forgetting Apple touch icon and manifest icons.
- Updating files without versioning URLs, causing stale cache.
- Serving icons with wrong content type headers.
Compatibility Guide
Favicon Format Guide: ICO vs PNG vs SVG
Use a mixed favicon stack so tabs, iOS home screen, Android manifests, and search snippets all render correctly.
ICO
PNG
SVG
Best practice: use multiple formats, not a single file type.
Recommended Format Stack
| Format | Use Case | Why It Matters |
|---|---|---|
| ICO | Legacy fallback | Still requested in older browser contexts and edge cases. |
| PNG 16x16 / 32x32 | Browser tabs and UI | Most common modern favicon fetch targets. |
| PNG 180x180 | Apple touch icon | Required for clean iOS home screen app icon behavior. |
| Manifest icons (192x192, 512x512) | Android/PWA contexts | Used for install experience and splash surfaces. |
| SVG favicon | Modern scalable icon | Crisp rendering at many sizes when supported. |
Copy-Paste Baseline Head Tags
Use this baseline set, then version URLs when updating icons.
<link rel="icon" href="/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg?v=2">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">
<link rel="manifest" href="/site.webmanifest?v=2">Validation Workflow
- Generate complete asset set.
- Upload to production paths referenced in head tags.
- Version URLs with query suffix.
- Run Favicon Checker.
- Verify in desktop and mobile browsers.
Frequently Asked Questions
-
Not safely. Keep PNG and ICO fallback files to ensure broad compatibility.
-
Yes. Many browsers still request these exact sizes in tab and toolbar contexts.
-
Google typically uses supported PNG/favicon assets declared correctly in your page setup.
-
Any time you change branding, update head tags, move assets, or modify caching policies.
Related Pages
Explore related tools to keep your workflow fast and consistent.
