Favicon HTML Tags Checklist
A complete favicon head-tag checklist with practical defaults for ICO, SVG, PNG, Apple touch icon, and web manifest.
If favicon setup is incomplete, browsers fall back unpredictably. You might see blurry tab icons, missing iOS home screen icons, or install prompts with poor visuals.
This checklist gives a reliable baseline you can ship on most modern websites.
Core favicon tags to include
Use this set in your page <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0f172a">This combination covers traditional favicon behavior, modern high-resolution contexts, Apple touch icon support, and PWA install metadata.12
Why each file exists
favicon.ico: broad legacy supportfavicon.svg: crisp vector icon in modern browsers16x16and32x32PNG: predictable raster fallbackapple-touch-icon.png: iOS home-screen usagesite.webmanifest: install metadata and app icons
Ordering and fallback behavior
Browsers can pick different icon candidates based on support and size needs. Providing both vector and raster variants makes outcomes more stable.
Practical rule:
- Keep SVG for modern crisp rendering.
- Keep ICO and PNG for broad compatibility.
- Keep Apple icon and manifest for mobile/PWA polish.
Fast implementation workflow
- Generate all files with Favicon Generator
- Put outputs in your public root
- Add the tag block to layout head
- Validate loaded icon paths in browser devtools
- Check iOS home screen and Android install surfaces
Use absolute URLs only when needed by your stack. Relative root paths are usually easiest if assets are hosted on the same domain.
Common mistakes to avoid
- Only shipping one
favicon.png - Missing
apple-touch-icon - Forgetting manifest link while claiming PWA support
- Referencing wrong file paths after deployment
- Shipping oversized assets without optimization
QA checklist
- Browser tab icon visible at 16px
- Bookmark icon visible and sharp
- Home-screen icon appears on iOS
- Manifest parses with valid icon entries
- No 404 errors for icon files
Related tools
Practical FAQ
Deployment checks
- No broken icon links in production
- Head tags present in final rendered layout
- iOS icon is correctly detected
- Manifest linked and valid
Additional source references: 3.