Favicon checklist & generator
Check what you want to support — legacy browsers, iOS, PWA, dark mode — and get the exact files to create plus the <link> tags to drop in your HTML.
What to support
SVG favicon is always included — it is the modern baseline. Everything else is optional depending on your audience.
Files to create
| File | Size | Notes |
|---|---|---|
HTML snippet
Put favicon files in your site's public root (or adjust paths). For dark mode, serve a second SVG and use media="(prefers-color-scheme: dark)" on the alternate <link>.
About this tool
You do not need twenty favicon sizes anymore. A single SVG plus an ICO fallback covers most desktop browsers. Add apple-touch-icon if people save your site to their iPhone home screen, and a web manifest if you want installable PWA icons.
Dark mode favicons use two SVGs and a prefers-color-scheme media query on the second <link> — no JavaScript required.
Read more
- Dark mode favicon — swap icons with CSS media queries
- Change the favicon in Gatsby — same idea in a static site generator
- Offline website / PWA — manifests and install icons
- Full-screen web app on iOS — apple-touch-icon and meta tags
Free books, courses, and software
Get my programming books, course editions, and complete software.
Get the download library →