Favicon erstellen: Größen, Formate und Einbindung

Ein Favicon erstellen Sie, indem Sie aus dem Logo ein vereinfachtes, quadratisches Symbol ableiten und daraus wenige Dateien erzeugen: eine favicon.ico mit 32 × 32 Pixeln, ein SVG-Favicon, ein Apple-Touch-Icon mit 180 × 180 Pixeln und für installierbare Web-Apps zwei PNG-Icons mit 192 und 512 Pixeln. Mit vier bis fünf Zeilen im HTML-Kopf ist das Favicon eingebunden. Die langen Listen mit zwanzig Größen, die früher üblich waren, braucht heute kaum eine Website.

Wie Raster- und Vektorgrafik sich unterscheiden, erklärt der Ratgeber Pixel, Auflösung und Bildformate.

Wo das Favicon überall erscheint

Das kleine Symbol taucht an mehr Stellen auf, als man denkt:

• im Browser-Tab neben dem Seitentitel,
• in Lesezeichen und im Verlauf,
• auf dem Startbildschirm von Smartphones, wenn jemand die Seite dort ablegt,
• als App-Symbol, wenn die Website als Web-App installiert wird,
• in den Suchergebnissen von Google neben dem Namen der Website.

Die Darstellungsgrößen reichen damit von 16 Pixeln im Tab bis zu mehreren hundert Pixeln auf dem Startbildschirm.

Das Motiv gestalten

Ein gutes Favicon ist kein verkleinertes Logo, sondern ein eigenes, stark vereinfachtes Zeichen:

• Bildzeichen statt Wort-Bild-Marke: Aus einem Logo mit Schriftzug übernehmen Sie nur das Symbol. Gibt es keines, funktioniert oft der Anfangsbuchstabe in der Hausschrift.
• Quadratisch denken: Das Motiv füllt eine quadratische Fläche gut aus, mit einem kleinen Rand.
• Wenige, kräftige Formen: Dünne Linien und kleine Details verschwinden bei 16 Pixeln.
• Starker Kontrast: Das Symbol muss auf hellen und dunklen Browser-Leisten erkennbar sein.
• Markenfarbe nutzen: Eine kräftige Fläche in der Hauptfarbe hilft, das Tab schnell wiederzufinden.

Wie aus einem Logo ein klares Bildzeichen wird, beschreibt der Ratgeber Logo gestalten.

Die Dateien, die Sie brauchen

Für eine einfache Website ohne App-Anspruch genügen die ersten drei Dateien. Das Manifest und die beiden großen PNG-Icons lohnen sich, sobald jemand die Seite auf den Startbildschirm legen oder installieren soll.

Schritt für Schritt erstellen

1. Motiv als Vektor anlegen, zum Beispiel in Figma, Inkscape oder Affinity, auf einer quadratischen Zeichenfläche.
2. Als SVG exportieren und die Datei mit einem SVG-Optimierer verkleinern. Das Ergebnis ist Ihr icon.svg.
3. PNG-Dateien exportieren in 180, 192 und 512 Pixeln. Für das Apple-Touch-Icon eine deckende Hintergrundfarbe verwenden, weil transparente Bereiche dort meist schwarz oder weiß gefüllt werden.
4. Die ICO-Datei erzeugen. ICO ist ein Containerformat, das mehrere Größen enthalten kann. Viele Grafikprogramme und Favicon-Generatoren im Browser wandeln eine PNG-Datei um.
5. Das Manifest schreiben, falls benötigt.
6. Alle Dateien ins Stammverzeichnis der Website legen, die favicon.ico unbedingt dorthin.

Einbinden im HTML

Im <head> jeder Seite genügen diese Zeilen:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Das Manifest enthält für die beiden PNG-Icons einen kurzen Eintrag:

{
  "name": "Name der Website",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Browser, die SVG-Favicons unterstützen, nehmen die SVG-Datei, die anderen greifen auf die ICO-Datei zurück. Die Angabe sizes="32x32" bei der ICO-Datei verhindert, dass manche Browser sie dem SVG vorziehen.

Favicon im Dunkelmodus

Ein Vorteil des SVG-Favicons: Es kann auf den Dunkelmodus reagieren. Innerhalb der SVG-Datei steht dafür eine kleine Stilregel:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #5b21b6; }
    @media (prefers-color-scheme: dark) { rect { fill: #c4b5fd; } }
  </style>
  <rect width="32" height="32" rx="6"/>
</svg>

So bleibt ein dunkles Symbol auf einer dunklen Tab-Leiste sichtbar. Nicht jeder Browser wertet diese Regel im Favicon aus. Wählen Sie deshalb ein Motiv, das in beiden Varianten ausreichend Kontrast hat. Mehr zu Aufbau und Optimierung von Vektorgrafiken steht im Artikel SVG im Webdesign.

Icons für installierbare Web-Apps

Wird eine Website als Web-App auf dem Startbildschirm abgelegt, schneiden manche Systeme das Icon in eine runde, abgerundet quadratische oder andere Form zu. Damit dabei nichts Wichtiges verloren geht, gibt es sogenannte maskierbare Icons. Das Motiv liegt dafür in einem sicheren Kreis in der Mitte, der Rest der Fläche ist mit der Hintergrundfarbe gefüllt. Im Manifest wird ein solches Icon mit "purpose": "maskable" gekennzeichnet.

Ergänzend legen Sie im Manifest mit theme_color und background_color fest, in welcher Farbe Browserleiste und Startbild erscheinen. Im HTML-Kopf steuert <meta name="theme-color"> die Farbe der Adressleiste in manchen mobilen Browsern.

Favicon testen

Weil Browser Favicons hartnäckig zwischenspeichern, führt ein geändertes Symbol oft zur Frage, warum noch das alte angezeigt wird. So testen Sie zuverlässig:

1. Dateien direkt aufrufen, etwa /favicon.ico und /icon.svg. Erscheint ein Fehler, stimmt der Pfad nicht.
2. In einem privaten Fenster öffnen, das keinen Cache vom letzten Besuch hat.
3. Im Quelltext prüfen, ob die link-Zeilen auf jeder Seite stehen, nicht nur auf der Startseite.
4. Auf hellen und dunklen Browser-Oberflächen ansehen, denn viele Menschen nutzen den Dunkelmodus.
5. Auf einem Smartphone zum Startbildschirm hinzufügen und das Ergebnis auf iOS und Android vergleichen.
6. Bei Änderungen den Dateinamen wechseln, etwa icon-v2.svg, damit Browser die neue Datei sicher laden.

Favicon in den Google-Suchergebnissen

Google zeigt neben vielen Suchergebnissen das Favicon der Website. Damit das klappt, sollte das Favicon auf der Startseite im HTML-Kopf verknüpft sein, eine dauerhaft gleiche Adresse haben, für den Google-Crawler erreichbar sein und eine quadratische Form haben. Eine großzügige Größe, etwa ein Vielfaches von 48 Pixeln, sorgt für eine scharfe Darstellung. Bis ein neues Favicon in den Suchergebnissen erscheint, können Tage oder Wochen vergehen.

Favicon nach einem Relaunch oder Domainumzug

Beim Umzug auf ein neues System oder eine neue Domain geht das Favicon erstaunlich oft verloren, weil die Dateien im Stammverzeichnis lagen und beim Kopieren der Inhalte übersehen wurden. Nehmen Sie die Favicon-Dateien deshalb ausdrücklich in die Checkliste für den Relaunch auf. Behalten Sie die bisherigen Dateinamen bei oder leiten Sie alte Pfade weiter, damit Lesezeichen und Startbildschirm-Verknüpfungen ihr Symbol behalten. Ändert sich das Motiv selbst, etwa durch ein neues Logo, planen Sie ein, dass alte Versionen noch eine Weile in Browsern und Suchergebnissen auftauchen.

Häufige Fehler

• Das komplette Logo mit Schriftzug, das bei 16 Pixeln zu einem unleserlichen Fleck wird.
• Transparenter Hintergrund beim Apple-Touch-Icon, der vom Gerät unschön gefüllt wird.
• Falsche Pfade nach einem Umzug oder Relaunch, weil die Dateien nicht mitgenommen wurden.
• Zu viele Dateien aus alten Generatoren, die niemand mehr pflegt.
• Zu dunkles Symbol ohne Rand, das auf dunklen Browser-Leisten verschwindet.

Kurz-Checkliste

• vereinfachtes, quadratisches Motiv mit kräftigen Formen
• favicon.ico im Stammverzeichnis
• icon.svg mit geprüftem Kontrast in hellem und dunklem Modus
• apple-touch-icon.png mit 180 × 180 Pixeln und deckendem Hintergrund
• bei Bedarf Manifest mit 192- und 512-Pixel-Icons
• Links im HTML-Kopf jeder Seite
• Test im privaten Fenster und auf einem Smartphone