Ready to create your favicon? Use FaviconStudio free — no sign-up needed →
An SVG favicon is the cleanest modern tab icon: one vector file that stays sharp on any DPI and can flip colors for dark browser chrome. This guide focuses on the exact HTML you need in 2026 — not theory. Paste the snippets, upload the files, and verify.
Table of contents
1. Minimal SVG favicon HTML
Put favicon.svg in your site root and add this inside <head>:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
That single line is enough for current Chrome, Firefox, and Edge. Order matters when you add fallbacks:
browsers pick the first compatible rel="icon" they understand, so list SVG first, then PNG, then ICO.
2. Production stack with PNG and ICO fallbacks
Safari still benefits from PNG, and Windows / older clients still look for favicon.ico.
Use this complete head block:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Need the Apple and Android pieces explained separately? See the apple-touch-icon generator and Android Chrome icon sizes pages.
3. Dark mode inside the SVG
Embed a media query in the SVG so the mark stays visible on dark browser tabs:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
.bg { fill: #1d4ed8; }
.fg { fill: #ffffff; }
@media (prefers-color-scheme: dark) {
.bg { fill: #93c5fd; }
.fg { fill: #0f172a; }
}
</style>
<rect class="bg" width="32" height="32" rx="6"/>
<text class="fg" x="16" y="22" text-anchor="middle" font-size="16" font-family="system-ui,sans-serif" font-weight="700">F</text>
</svg>Keep shapes simple. At 16 CSS pixels, thin strokes and multi-letter wordmarks collapse. For a deeper format comparison, read why SVG is the 2026 default.
4. Safari and older browsers
- Safari desktop: SVG support exists, but PNG 32×32 remains the safest companion.
- iOS Safari home screen: uses
apple-touch-icon, not the SVG tab icon. - Legacy clients: root
/favicon.icostill earns its keep.
If your icon fails to appear after deploy, clear cache aggressively — browsers cache favicons harder than normal assets. Use our favicon not showing guide or the Google-specific variant below.
5. Next.js App Router note
In the App Router you can drop icon.svg / apple-icon.png into app/
and Next will emit link tags. That is convenient, but many teams still prefer explicit public files plus
manual <link> tags for full control of order and types. Either approach is fine if the
final HTML matches the production stack above.
6. Deploy checklist
- SVG listed first with
type="image/svg+xml". - PNG 16/32 and ICO present as fallbacks.
- Apple touch 180×180 and manifest 192/512 for mobile install.
- Paths are absolute (
/favicon.svg, not relative). - Hard-refresh or use an incognito window to verify.
- Optional: run the favicon checker on the live URL.
Ready to create your favicon? Use FaviconStudio free — no sign-up needed →