X Xerobit
Frontend & Design

SVG Favicons — Modern Favicon Setup with Dark Mode Support

SVG favicons support dark mode, scale to any size, and can be embedded with CSS. Learn how to create SVG favicons, add dark mode variants using prefers-color-scheme, and set up...

Mian Ali Khalid · · 4 min read
Use the tool
Favicon Generator
Generate favicon package from any image or emoji. Multiple sizes (16, 32, 48, 180, 192, 512), manifest.json, and HTML snippet.
Open Favicon Generator →

SVG favicons are the modern approach: one file, infinite resolution, supports dark mode via CSS media queries. Browser support covers all modern browsers (Chrome 80+, Firefox 84+, Safari 15.4+).

Use the Favicon Generator to create ICO and PNG favicons for older browsers.

Basic SVG favicon

<!-- In <head>: -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Fallback for older browsers: -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- ICO fallback for IE: -->
<link rel="shortcut icon" href="/favicon.ico">

SVG with dark mode support

The key advantage of SVG: use @media (prefers-color-scheme: dark) inside the SVG file:

<!-- favicon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    :root {
      --bg: #6366f1;
      --text: #ffffff;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #818cf8;  /* Lighter purple in dark mode */
        --text: #1e1b4b;
      }
    }
  </style>
  
  <rect width="32" height="32" rx="6" fill="var(--bg)"/>
  <text x="16" y="23" text-anchor="middle" fill="var(--text)"
        font-family="system-ui" font-size="20" font-weight="bold">X</text>
</svg>
<!-- Simple letter-based favicon: -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect width="100" height="100" rx="20" fill="#2563eb"/>
  <text y=".9em" font-size="90" font-family="system-ui, -apple-system, sans-serif"
        font-weight="bold" fill="white" text-anchor="middle" x="50">A</text>
</svg>

<!-- Icon-based favicon with rounded rect background: -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="8" fill="#10b981"/>
  <!-- Any icon path here: -->
  <path d="M10 16l4 4 8-8" stroke="white" stroke-width="3" 
        stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>

Complete favicon stack (2026 best practice)

<head>
  <!-- SVG favicon (modern browsers, supports dark mode): -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  
  <!-- ICO fallback (for old browsers and Windows taskbar): -->
  <link rel="icon" sizes="any" href="/favicon.ico">
  
  <!-- Apple touch icon (iOS home screen): -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <!-- apple-touch-icon.png should be 180×180px -->
  
  <!-- Web app manifest (Android Chrome, PWA): -->
  <link rel="manifest" href="/site.webmanifest">
</head>
// site.webmanifest:
{
  "name": "My App",
  "short_name": "App",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#2563eb",
  "background_color": "#ffffff",
  "display": "standalone"
}

Minimum required files

favicon.svg          ← Modern browsers (Chrome, Firefox, Safari 15.4+)
favicon.ico          ← Legacy fallback (16x16 and 32x32 embedded)
apple-touch-icon.png ← iOS Safari (180×180)
icon-192.png         ← Android Chrome
icon-512.png         ← Android Chrome (splash screen)
site.webmanifest     ← PWA manifest

Generate favicon.ico from SVG

# Using Inkscape:
inkscape --export-filename=favicon-32.png --export-width=32 favicon.svg
inkscape --export-filename=favicon-16.png --export-width=16 favicon.svg

# Combine into ICO with ImageMagick:
convert favicon-16.png favicon-32.png favicon.ico

# Using rsvg-convert:
rsvg-convert -w 32 -h 32 favicon.svg > favicon-32.png

Related posts

Related tool

Favicon Generator

Generate favicon package from any image or emoji. Multiple sizes (16, 32, 48, 180, 192, 512), manifest.json, and HTML snippet.

Written by Mian Ali Khalid. Part of the Frontend & Design pillar.