Favicon (.ico) vs SVG
SVG ist das spannendste Favicon-Format der Gegenwart – Vektor, Dark-Mode-fähig und winzig. Doch es kann .ico 2026 noch nicht vollständig ersetzen. Hier erfahren Sie warum – und wie Sie beide gemeinsam nutzen.
SVG skaliert stufenlos und unterstützt Dark-Mode-Media-Queries direkt in der Datei. Ein 1-KB-SVG deckt jede Dichte in jedem modernen Browser ab.
ICO bleibt der universelle Fallback. Ältere Safari-Versionen, Legacy-Browser und die konventionelle Abfrage von <code>/favicon.ico</code> hängen weiterhin davon ab.
Das empfohlene Setup: <code>favicon.ico</code> + <code>favicon.svg</code> ausliefern. Browser mit SVG-Support bevorzugen das SVG; alle anderen fallen automatisch auf .ico zurück.
So funktioniert es
- 1
SVG entwerfen oder exportieren
Quadratische viewBox, ein einzelnes <svg>-Wurzelelement.
- 2
.ico-Fallback generieren
Mit FetchFavicon das SVG in eine Mehrgrößen-.ico rastern.
- 3
Beide verlinken
<link rel="icon" href="/favicon.ico"> + <link rel="icon" type="image/svg+xml" href="/favicon.svg">.
Jetzt ausprobieren
.ico- + SVG-Paar generieren
SVG in PNG UmwandlerFAQ
Kann ich .ico komplett weglassen, wenn ich SVG nutze?+
Nicht zuverlässig. Viele Social-Media-Crawler, RSS-Reader und ältere Tools fragen /favicon.ico nach wie vor konventionell ab.
Welche Browser unterstützen SVG-Favicons?+
Chrome 80+, Edge 80+, Firefox 41+, Safari 15+ und Brave. iOS-Safari bevorzugt weiterhin das apple-touch-icon-PNG.
Wie klein kann ein SVG-Favicon sein?+
Unter 1 KB für eine einfache Monochrom-Marke. Selbst komplexe mehrfarbige Logos übersteigen selten 4 KB.