X Xerobit
Frontend & Design

SVG Favicon — Modern Vector Favicons for Any Screen

SVG favicons scale perfectly at any size and support dark mode via CSS media queries. Here's how to create an SVG favicon, implement it correctly, and use dark mode variants.

Mian Ali Khalid · · 5 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 to site icons. Unlike ICO and PNG files, an SVG is a vector format that renders perfectly at any screen size or pixel density — no blur on Retina displays, no pixelation on large desktop shortcuts. And uniquely, SVG favicons can respond to the user’s dark mode preference.

Use the Favicon Generator to generate favicons from your logo.

Browser support

SVG favicons work in all modern browsers:

BrowserSVG favicon support
Chrome✓ (version 80+)
Firefox✓ (version 41+)
Safari✓ (version 12+)
Edge✓ (version 80+)
IE 11✗ (use ICO fallback)
iOS Safari✗ (use apple-touch-icon PNG)

Browser market share with SVG favicon support: ~97%.

The remaining 3% (IE, some legacy mobile browsers) need a fallback. Include both SVG and ICO for full coverage.

Basic SVG favicon implementation

<head>
  <!-- SVG: modern browsers (preferred) -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  
  <!-- ICO: fallback for older browsers -->
  <link rel="icon" href="/favicon.ico" sizes="any">
</head>

Browser priority: when both are present, modern browsers prefer SVG. Older browsers fall back to ICO.

Creating a minimal SVG favicon

An SVG favicon is just a valid SVG file with a viewBox:

<!-- favicon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <!-- Simple circle icon: -->
  <circle cx="16" cy="16" r="14" fill="#3b82f6"/>
  <text x="16" y="21" text-anchor="middle" font-size="14" fill="white" font-family="sans-serif">X</text>
</svg>

Key requirements:

  • viewBox attribute is required for scaling
  • Keep the SVG simple — complex paths become illegible at 16×16
  • No external font or image references (they won’t load in favicon context)

Dark mode SVG favicon

SVG favicons support prefers-color-scheme media queries directly in the SVG file:

<!-- favicon.svg with dark mode support -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    :root { --bg: #3b82f6; --fg: #ffffff; }
    
    @media (prefers-color-scheme: dark) {
      :root { --bg: #60a5fa; --fg: #0f172a; }
    }
  </style>
  
  <circle cx="16" cy="16" r="14" fill="var(--bg)"/>
  <text x="16" y="21" text-anchor="middle" font-size="14" fill="var(--fg)" font-family="sans-serif">X</text>
</svg>

This automatically switches between light and dark variants as the user changes their OS theme — no JavaScript, no media query in HTML.

Converting a logo to SVG favicon

<!-- Full logo: complex, detailed -->
<!-- favicon.svg: simplified version optimized for small sizes -->

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <!-- Use only the most recognizable part of the logo -->
  <!-- Remove text, fine details, thin strokes -->
  <!-- Ensure minimum 2px stroke width at 16px size -->
  <path d="M8 4l16 14L8 28V4z" fill="#3b82f6"/>
</svg>

Option 2: Lettermark from brand color + initial

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#18181b"/>
  <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle"
        font-family="system-ui, sans-serif" font-weight="700" font-size="18" fill="#f4f4f5">
    X
  </text>
</svg>

A simple lettermark on a brand-color background is often more legible at small sizes than a complex logo mark.

SVG favicon with emoji

<!-- Simple emoji favicon — requires no design work -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <text y=".9em" font-size="90">🚀</text>
</svg>

The emoji renders at the OS-native emoji style, which is well-designed and always recognizable. Useful for tools, demos, or developer documentation sites.

Animating SVG favicons

SVG favicons support CSS animations:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .spinner {
      transform-origin: center;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
  </style>
  
  <circle cx="16" cy="16" r="12" fill="none" stroke="#3b82f6" stroke-width="3" 
          stroke-dasharray="60 15" class="spinner"/>
</svg>

Important: Animated favicons are useful for showing loading states in web apps. But they’re distracting during normal use. Only animate programmatically when loading:

// Swap to animated favicon during loading:
function setFavicon(href) {
  const link = document.querySelector("link[rel='icon']");
  link.href = href;
}

// When fetch starts:
setFavicon('/favicon-loading.svg');

// When fetch completes:
setFavicon('/favicon.svg');

Dynamic SVG favicons via JavaScript

You can generate and update favicons dynamically:

function setFaviconColor(color) {
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <circle cx="16" cy="16" r="14" fill="${color}"/>
  </svg>`;
  
  const blob = new Blob([svg], { type: 'image/svg+xml' });
  const url = URL.createObjectURL(blob);
  
  const link = document.querySelector("link[rel~='icon']") 
    || document.createElement('link');
  link.rel = 'icon';
  link.type = 'image/svg+xml';
  link.href = url;
  document.head.appendChild(link);
}

// Use for per-environment branding:
if (process.env.NODE_ENV === 'development') setFaviconColor('#f59e0b');  // Yellow
if (process.env.NODE_ENV === 'staging') setFaviconColor('#8b5cf6');     // Purple
// Production: default blue

SVG vs ICO vs PNG comparison

PropertySVGICOPNG
Scalable✓✗✗
File size~1KB~5-15KB~3-8KB per size
Dark mode support✓✗✗
Animation✓✗✗
IE support✗✓✓
iOS support✗✗✓ (apple-touch-icon)

Use SVG as the primary favicon with ICO as a fallback. PNG is needed only for iOS apple-touch-icon.

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.