Favicon erstellen: Der komplette Guide für alle Browser & Geräte

Ein Favicon (kurz für „favorites icon") erscheint in Browser-Tabs, Lesezeichen und auf mobilen Startbildschirmen. Es ist ein kleiner, aber wichtiger Markenbaustein — und überraschend aufwendig, wenn man es über alle Browser und Geräte hinweg korrekt umsetzen will. Hier erfahren Sie genau, wie es geht.

Was ist ein Favicon?

Ein Favicon ist das kleine Symbol, das mit einer Website verknüpft ist. Es erscheint:

• Im Browser-Tab neben Ihrem Seitentitel
• In den Lesezeichen und im Verlauf des Browsers
• Auf iOS/Android-Startbildschirmen, wenn ein Nutzer Ihre Website speichert (Apple Touch Icon)
• In PWA-Installationsprogrammen als App-Symbol
• In Suchmaschinenergebnissen (manchmal)

Eine vollständige Favicon-Einrichtung braucht mehrere Größen und Formate, um alle diese Kontexte abzudecken.

Die erforderlichen Favicon-Größen

Schritt 1: Mit einem hochauflösenden Ausgangsbild beginnen

Erstellen oder exportieren Sie Ihr Logo/Symbol mit mindestens 512×512 Pixeln als quadratisches PNG mit transparentem Hintergrund. Dies wird Ihre Quelle für die Erzeugung aller kleineren Größen.

Tipps für favicon-freundliches Design:

• Halten Sie es einfach — komplexe Designs wirken bei 16×16 nicht mehr
• Nutzen Sie hohen Kontrast — helle Hintergründe mit dunklen Symbolen oder umgekehrt
• Vermeiden Sie dünne Linien — sie verschwinden bei kleinen Größen
• Testen Sie bei 16×16 — zoomen Sie in Ihrem Design-Tool heraus, um die Lesbarkeit zu prüfen

Schritt 2: Alle Favicon-Größen erzeugen

Statt jede erforderliche Größe manuell anzupassen, nutzen Sie einen Favicon-Generator. Der Favicon-Generator von PicsSizer nimmt Ihr Ausgangsbild und erstellt ein komplettes Paket:

1. Laden Sie Ihr 512×512 (oder größeres) PNG-Ausgangsbild hoch
2. Sehen Sie sich eine Vorschau in jeder Größe an
3. Laden Sie das komplette Favicon-Paket mit allen erforderlichen Größen herunter

Schritt 3: Das HTML einfügen

Platzieren Sie diese Tags im <head> Ihres HTML:

<!-- Standard favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<!-- Apple touch icon (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

<!-- Android / PWA manifest -->
<link rel="manifest" href="/site.webmanifest" />

Schritt 4: Das Web-App-Manifest erstellen

Für Android-Startbildschirm-Symbole und PWA-Unterstützung erstellen Sie eine Datei site.webmanifest:

{
  "name": "Your Site Name",
  "short_name": "SiteName",
  "icons": [
    {
      "src": "/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Der SVG-Favicon-Ansatz

Für moderne Browser ist ein SVG-Favicon ideal:

• Unbegrenzt skalierbar — scharf bei jeder Auflösung
• Winzige Dateigröße — oft unter 2 KB
• Unterstützt Dark Mode — Sie können CSS-Media-Queries innerhalb des SVG nutzen

<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

Mit einer Media-Query für Dark Mode innerhalb des SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .icon { fill: white; }
    }
    .icon { fill: black; }
  </style>
  <rect class="icon" width="32" height="32" rx="4" />
</svg>

Alle modernen Browser (Chrome, Firefox, Safari 14+, Edge) unterstützen SVG-Favicons.

Häufige Favicon-Probleme beheben

Favicon wird nicht angezeigt:

• Prüfen Sie, ob die Datei am im href angegebenen Pfad existiert
• Erzwingen Sie ein Neuladen des Browsers (Ctrl+Shift+R / Cmd+Shift+R)
• Prüfen Sie den Network-Tab der DevTools des Browsers auf 404-Fehler bei Favicon-Anfragen

Favicon wird auf dem Desktop, aber nicht auf Mobilgeräten angezeigt:

• Stellen Sie sicher, dass apple-touch-icon für iOS gesetzt ist
• Stellen Sie sicher, dass das Web-Manifest existiert und für Android verlinkt ist

Alter Favicon wird nach dem Update weiterhin angezeigt:

• Browser speichern Favicons aggressiv im Cache. Fügen Sie einen Cache-Busting-Query-String hinzu: href="/favicon.png?v=2"

Favicon unscharf oder verpixelt:

• Erzeugen Sie es erneut aus einem höher aufgelösten Ausgangsbild (mindestens 512×512)
• Prüfen Sie, ob Sie für jeden Kontext die richtige Größe verwenden

Vollständige Favicon-Checkliste

• Ausgangsbild mit 512×512 px (transparentes PNG)
• favicon.ico (16×16 + 32×32 innerhalb der ICO, für den alten IE)
• favicon-16x16.png
• favicon-32x32.png
• apple-touch-icon.png (180×180)
• android-chrome-192x192.png
• android-chrome-512x512.png
• favicon.svg (optional, aber empfohlen)
• site.webmanifest
• HTML-<link>-Tags im <head>

Nutzen Sie den Favicon-Generator von PicsSizer, um das komplette Paket aus einem einzigen Bild zu erzeugen, oder sehen Sie sich den Favicon-Größenleitfaden für die vollständige Referenz an.