Back

So fügen Sie ein Favicon zu Ihrer Website hinzu

OpenReplay Team OpenReplay Team

Nov 23, 2025 · 4 min read

So fügen Sie ein Favicon zu Ihrer Website hinzu

Ihre Website benötigt ein Favicon. Dieses kleine Symbol in Browser-Tabs ist nicht nur Dekoration – es ermöglicht Nutzern, Ihre Website unter Dutzenden offener Tabs zu identifizieren, wird von Google in Suchergebnissen angezeigt und dient iOS als Symbol beim Speichern Ihrer Website auf dem Home-Bildschirm. Dennoch sind die meisten Favicon-Anleitungen veraltet und empfehlen Legacy-Formate sowie unnötige Dateien.

Dieser Artikel behandelt das moderne, minimalistische Favicon-Setup, das überall funktioniert: Favicon SVG für moderne Browser, Favicon PNG als Fallback, Apple Touch Icon für iOS-Geräte und Web-Manifest-Icons für Progressive Web Apps.

Wichtigste Erkenntnisse

  • Ein modernes Favicon-Setup erfordert nur einen kleinen Satz essentieller Dateien: einen ICO-Fallback, ein SVG-Favicon, ein 32×32 PNG, ein Apple Touch Icon und einige Web-Manifest-Icons.
  • SVG-Favicons skalieren perfekt und unterstützen den Dark Mode durch CSS-Media-Queries
  • Safari und iOS unterstützen jetzt vollständig SVG-Favicons, sodass diese als primäres Icon für moderne Browser dienen können
  • Aggressives Browser-Caching erfordert Versionierungsstrategien beim Aktualisieren von Favicons

Der moderne Favicon-Stack

Vergessen Sie die Dutzenden Icon-Größen aus dem Jahr 2015. Das ist, was Sie tatsächlich benötigen:

Essentielle Icons

  • favicon.ico (mehrere Größen, typischerweise 16×16 und 32×32) – Legacy-Fallback
  • favicon.svg - Skalierbar für alle modernen Browser
  • icon-32.png - Browser-UI und Google-Suchergebnisse
  • apple-touch-icon.png (180×180) - iOS-Home-Bildschirm
  • icon-192.png und icon-512.png - Web-Manifest für PWAs

Safari und iOS unterstützen jetzt vollständig SVG-Favicons. Behauptungen über fehlende SVG-Unterstützung sind veraltet – jeder große Browser unterstützt mittlerweile zuverlässig SVG-Favicons.

HTML-Implementierung

Fügen Sie diese vier Zeilen zu Ihrem <head> hinzu:

<!-- Fallback for legacy browsers -->
<link rel="icon" href="/favicon.ico">

<!-- PNG for browser UI and Google SERPs -->
<link rel="icon" href="/icon-32.png" sizes="32x32" type="image/png">

<!-- Modern browsers (scales cleanly) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Apple Touch Icon for iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web manifest for PWAs -->
<link rel="manifest" href="/manifest.json">

Hinweis: Verzichten Sie auf rel="shortcut icon" – dies ist seit 2003 veraltet. Verwenden Sie einfach rel="icon".

Erstellen Ihrer Icons

SVG-Favicon

SVG-Favicons skalieren unendlich und unterstützen Funktionen wie den Dark Mode:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="M64 16L16 112h96z"/>
</svg>

Halten Sie SVG-Favicons einfach. Komplexe Verläufe und Effekte werden bei 16×16 Pixeln nicht gut dargestellt.

PNG-Favicon

Das 32×32 PNG dient zwei kritischen Zwecken:

  1. Fallback für Browser, die SVG nicht unterstützen
  2. Anzeige in Google-Suchergebnissen

Verwenden Sie ein Tool wie RealFaviconGenerator oder Favicon.io, um PNG-Versionen aus Ihrem SVG zu generieren.

Apple Touch Icon

iOS benötigt ein 180×180 PNG mit:

  • Keiner Transparenz (verwenden Sie einen festen Hintergrund)
  • Keinen abgerundeten Ecken (iOS fügt diese hinzu)
  • Hohem Kontrast für Sichtbarkeit auf verschiedenen Hintergründen

Benennen Sie es exakt apple-touch-icon.png und platzieren Sie es in Ihrem Root-Verzeichnis. iOS findet es automatisch, auch ohne den <link>-Tag, aber explizites Verlinken gewährleistet Zuverlässigkeit.

Web-Manifest-Icons

Für Progressive Web Apps erstellen Sie eine manifest.json:

{
  "name": "Your App",
  "short_name": "App",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Diese Web-Manifest-Icons ermöglichen die „Zum Home-Bildschirm hinzufügen”-Funktionalität auf Android und die Desktop-PWA-Installation.

Dark-Mode-Unterstützung

Über den SVG-Media-Query-Ansatz hinaus können Sie Favicons mit JavaScript austauschen:

const favicon = document.querySelector('link[rel="icon"]');
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

function updateFavicon(e) {
  favicon.href = e.matches ? '/favicon-dark.svg' : '/favicon-light.svg';
}

darkModeMediaQuery.addEventListener('change', updateFavicon);
updateFavicon(darkModeMediaQuery);

Umgang mit dem Cache

Browser cachen Favicons aggressiv. Beim Aktualisieren Ihres Icons:

  1. Versionieren Sie den Dateinamen: Ändern Sie favicon.svg zu favicon-v2.svg
  2. Fügen Sie einen Query-String hinzu: favicon.svg?v=2
  3. Aktualisieren Sie alle Referenzen in Ihrem HTML

Für sofortiges Testen öffnen Sie Ihre Website in einem Inkognito-/Privat-Fenster.

Häufige Probleme

Favicon wird nicht angezeigt?

  • Überprüfen Sie den Pfad – verwenden Sie absolute Pfade (/favicon.svg), keine relativen
  • Verifizieren Sie MIME-Typen: SVG benötigt image/svg+xml
  • Testen Sie im Inkognito-Modus, um den Cache zu umgehen

Unscharf auf Retina-Displays?

  • Verwenden Sie SVG als Ihr primäres Icon
  • Stellen Sie sicher, dass PNG-Exporte exakt 32×32 und 180×180 sind

Falsches Icon auf iOS?

  • iOS priorisiert apple-touch-icon.png im Root-Verzeichnis
  • Löschen Sie den Safari-Cache: Einstellungen → Safari → Verlauf und Websitedaten löschen

Fazit

Die moderne Favicon-Implementierung ist einfacher, als Legacy-Anleitungen vermuten lassen. Fünf Dateien – ICO, SVG, PNG, Apple Touch Icon und Web-Manifest-Icons – decken jeden Browser, jedes Gerät und jeden Anwendungsfall ab. Überspringen Sie die veralteten Multi-Dutzend-Icon-Sets und Windows-Tile-Metadaten, es sei denn, Sie benötigen sie ausdrücklich.

Konzentrieren Sie sich auf ein sauberes SVG-Favicon als Ihr primäres Icon, fügen Sie die essentiellen Fallbacks hinzu, und Ihre Website wird überall perfekt angezeigt – von Browser-Tabs bis zu iOS-Home-Bildschirmen.

FAQs

Obwohl SVG-Favicons in allen modernen Browsern funktionieren, benötigen Sie dennoch Fallbacks. Legacy-Browser benötigen ICO-Dateien, iOS benötigt apple-touch-icon.png für Home-Bildschirm-Verknüpfungen, und Google-Suchergebnisse suchen speziell nach PNG-Favicons.

Einige Browser passen Favicon-Farben automatisch für bessere Sichtbarkeit im Dark Mode an. Um dieses Verhalten zu steuern, verwenden Sie CSS-Media-Queries in Ihrem SVG-Favicon oder implementieren Sie JavaScript-basiertes Favicon-Switching für ein konsistentes Erscheinungsbild.

Favicon-Updates können je nach Browser-Caching Stunden bis Tage dauern. Erzwingen Sie sofortige Updates durch Versionierung der Dateinamen oder Hinzufügen von Query-Strings. Google-Suchergebnisse können mehrere Wochen benötigen, um Favicon-Änderungen zu reflektieren, selbst nach erneutem Crawling.

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.

OpenReplay

More articles from OpenReplay Blog