SVG-Favicons: Warum sie besser sind und wie Sie sie tatsächlich einsetzen

Die Sache mit Favicons ist: Wir stecken seit 1999 mit verpixelten ICO-Dateien fest. Fünfundzwanzig Jahre lang unscharfe kleine Icons. Aber SVG-Favicons? Die sind ehrlich gesagt ziemlich beeindruckend – und die meisten Entwickler nutzen sie immer noch nicht.

Lassen Sie mich Ihnen zeigen, warum Sie wechseln sollten, und vor allem, wie Sie es tun, ohne dass es für Benutzer älterer Browser Probleme gibt.

Warum sich SVG-Favicons wirklich lohnen

Unbegrenzte Skalierung ohne Unschärfe

Erinnern Sie sich daran, fünf verschiedene PNG-Größen für Ihr Favicon zu erstellen? 16x16, 32x32, 48x48... das wird schnell mühsam. Mit SVG erstellen Sie eine Datei. Das war's. Sie sieht gestochen scharf aus, ob sie mit 16 Pixeln in einem Browser-Tab oder mit 512 Pixeln auf einem PWA-Splashscreen angezeigt wird.

Ein typisches SVG-Favicon wiegt 300-800 Bytes. Vergleichen Sie das mit einem PNG-Favicon-Paket von 2-5 KB. Das ist eine 85-95% Größenreduktion. Nicht riesig in absoluten Zahlen, aber jedes Byte zählt bei der Optimierung.

Dunkelmodus, der einfach funktioniert

Das ist die Killer-Funktion. Mit einem SVG-Favicon können Sie CSS-Media-Queries direkt in die Datei einbetten. Wenn ein Benutzer in den Dunkelmodus wechselt, passt sich Ihr Favicon automatisch an.

So sieht das in der Praxis aus:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M16 4L4 28h24L16 4z"/>
</svg>

Das ist ein einfaches Dreieck, das auf hellen Hintergründen dunkel und auf dunklen Hintergründen hell ist. Kein JavaScript erforderlich. Keine serverseitige Erkennung. Es funktioniert einfach.

CSS-Styling und Animation

Da SVG im Grunde XML mit Styling ist, können Sie Dinge tun, die mit Rasterformaten nicht möglich sind:

Farben bei Hover ändern (in unterstützten Kontexten)
Subtile Animationen hinzufügen
CSS-Variablen für Theming verwenden
Stile mit JavaScript modifizieren

Ich würde es mit Animationen im Favicon nicht übertreiben – das kann nervig sein. Aber die Möglichkeit zu haben ist praktisch.

Die Browserunterstützung in der Realität

Seien wir ehrlich: SVG-Favicon-Unterstützung ist nicht perfekt. Hier ist die Realität Stand 2025:

Volle Unterstützung:

Chrome 80+ (Desktop und Android)
Firefox 41+
Edge 80+
Opera 44+
Samsung Internet 13+

Keine Unterstützung:

Safari (sowohl Desktop als auch iOS)
Internet Explorer
Android Browser

Safari ist das große Problem. Apples Browser unterstützt SVG-Favicons immer noch nicht, was bedeutet, dass etwa 20% der Benutzer Ihr SVG-Icon nicht sehen werden. Sie brauchen einen Fallback.

SVG-Favicons richtig implementieren

Grundeinrichtung mit Fallbacks

Hier ist das Markup, das alle abdeckt:

<head>
  <!-- ICO-Fallback für sehr alte Browser -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- SVG für moderne Browser -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">

  <!-- PNG-Fallback für Safari -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

  <!-- Apple Touch Icon (Safari wird Ihr SVG nicht verwenden) -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

Die Reihenfolge ist wichtig. Browser parsen diese sequentiell und verwenden das letzte, das sie unterstützen. Moderne Browser greifen zum SVG, Safari nutzt das PNG, und uralte Browser fallen auf ICO zurück.

Profi-Tipp: Chrome daran hindern, ICO zu verwenden

Chrome lädt manchmal die ICO-Datei herunter, obwohl SVG verfügbar ist. Fügen Sie sizes="32x32" zu Ihrem ICO-Link hinzu – das teilt Chrome mit, dass das ICO nur für diese spezifische Größe gedacht ist, sodass es das skalierbare SVG bevorzugt.

Ein adaptives Dunkelmodus-SVG erstellen

Hier ein vollständigeres Beispiel:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .icon-bg { fill: #ffffff; }
    .icon-fg { fill: #000000; }

    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: #1a1a1a; }
      .icon-fg { fill: #f0f0f0; }
    }
  </style>

  <circle class="icon-bg" cx="16" cy="16" r="15"/>
  <text class="icon-fg" x="16" y="21"
        text-anchor="middle"
        font-family="system-ui"
        font-weight="bold"
        font-size="18">F</text>
</svg>

Dies erstellt ein kreisförmiges Icon mit einem Buchstaben, das die Farben basierend auf der Systempräferenz invertiert.

Dateigrößen-Realitätscheck

Manchmal wird behauptet, SVG sei immer kleiner. Das stimmt nicht ganz. Hier die Fakten:

Einfache geometrische Icons: SVG gewinnt, oft deutlich
Komplexe Illustrationen: PNG kann tatsächlich kleiner sein
Fotos oder detaillierte Grafiken: Verwenden Sie diese nicht als Favicons

Für typische logo-artige Favicons (Formen, Buchstaben, einfache Grafiken) ist SVG fast immer die bessere Wahl bei der Dateigröße.

Optimierungstipps

Bevor Sie Ihr SVG-Favicon deployen, lassen Sie es durch SVGOMG oder einen ähnlichen Optimierer laufen. Export-Tools wie Illustrator und Figma fügen viel Ballast hinzu – Metadaten, Editor-Kommentare, unnötige Präzision bei Koordinaten.

Eine gute Optimierung kann Ihre SVG-Größe um 50-70% reduzieren.

Halten Sie Ihre Designs außerdem einfach. Komplexe Farbverläufe, Filter und Hunderte von Pfaden erhöhen nicht nur die Dateigröße – sie können auch Rendering-Verzögerungen verursachen.

Wissenswertes zur Theme-Erkennung

Die prefers-color-scheme Media-Query innerhalb von SVG folgt der Betriebssystempräferenz, nicht der Theme-Einstellung des Browsers. Wenn jemand macOS im Dunkelmodus verwendet, aber den Browser auf ein helles Theme eingestellt hat, wird das Favicon trotzdem im Dunkelmodus-Stil dargestellt.

Das entspricht der Art, wie die meisten Websites den Dunkelmodus ohnehin handhaben, aber es ist gut zu wissen.

Sollten Sie zu SVG wechseln?

Wenn Ihr aktuelles Favicon eine einfache Form oder ein Buchstabenzeichen ist, lohnt sich SVG wahrscheinlich. Sie bekommen:

Eine Datei statt vieler
Automatische Dunkelmodus-Unterstützung
Kleinere Gesamtdateigröße
Zukunftssichere Skalierbarkeit

Wenn Ihr Favicon eine detaillierte Illustration ist oder Sie viele Safari-Benutzer haben, bleiben Sie bei PNG als primärem Format.

Der beste Ansatz für die meisten Websites? Verwenden Sie beides. SVG für Browser, die es unterstützen, PNG-Fallback für die, die es nicht tun. Die Einrichtung dauert zusätzliche 5 Minuten und deckt 100% der Benutzer ab.

Schnelle Implementierungs-Checkliste

[ ] SVG-Favicon erstellen (einfach halten)
[ ] Dunkelmodus-Media-Query hinzufügen, falls nötig
[ ] Mit SVGOMG optimieren
[ ] PNG-Fallback erstellen (mindestens 32x32)
[ ] apple-touch-icon.png erstellen (180x180)
[ ] Korrekte Link-Tags mit Fallback-Reihenfolge hinzufügen
[ ] In Chrome, Firefox und Safari testen

Das ist wirklich alles. SVG-Favicons sind nicht kompliziert – sie werden nur zu wenig genutzt. Probieren Sie sie bei Ihrem nächsten Projekt aus.

Referenzen

Can I Use - SVG Favicons - Browserkompatibilitätsdaten für SVG-Favicon-Unterstützung
Building an Adaptive Favicon - web.dev - Googles Leitfaden zur Erstellung adaptiver Favicons
SVG Favicons and All the Fun Things We Can Do With Them - CSS-Tricks - Umfassende Erkundung der SVG-Favicon-Möglichkeiten
How to Favicon in 2025 - Evil Martians - Praktischer moderner Favicon-Implementierungsleitfaden