Genügt eine einzelne favicon.ico-Datei?

Für Desktop-Browser meist ja, sofern sie die Größen 16, 32 und 48 px enthält. Der Home-Bildschirm des iPhones und der Start von Android-Apps benötigen jedoch eigene PNG-Dateien, daher sollten Sie auch diese vorbereiten.

Warum erscheint mein neues Favicon nicht?

Meist liegt es am Caching. Öffnen Sie die Seite in einem privaten Fenster, löschen Sie die Browserdaten oder benennen Sie die Datei um bzw. fügen Sie den Parameter ?v=2 hinzu. Suchmaschinen brauchen unter Umständen mehrere Tage oder länger, bis sie ihre Kopie des Symbols aktualisieren.

Kann ein Favicon ein JPG sein?

Manche Browser akzeptieren es, aber JPG hat keine Transparenz und ist nicht die übliche Wahl. Verwenden Sie stattdessen PNG, ICO oder SVG.

Favicon erstellen: Größen, Formate und HTML-Code

Ein Favicon ist das winzige Website-Symbol in Browser-Tabs, Lesezeichen und Suchergebnissen. Es wirkt wie ein Detail, doch eine Website ohne Favicon macht einen unfertigen Eindruck, und eine falsche Größe oder ein falsches Format kann das Symbol unscharf wirken lassen. Dieser Ratgeber erklärt, welche Größen Sie brauchen, welches Format sich eignet und welchen Code Sie in Ihre Seite einfügen.

Was ein Favicon ist und wo es erscheint

Ein Favicon (kurz für „Favorite Icon“) ist ein kleines quadratisches Bild, das Browser neben dem Seitentitel im Tab, in der Lesezeichenliste und im Verlauf anzeigen. Auf Mobilgeräten zeigt auch die Google-Suche neben der Adresse ein Website-Symbol an, ein klares Favicon hilft Menschen also, Ihre Website wiederzuerkennen.

Wenn Sie kein Symbol angeben, versuchen Browser in der Regel, /favicon.ico aus dem Stammverzeichnis der Website abzurufen. Fehlt die Datei, zeigen sie ein allgemeines Globus- oder Leerseiten-Symbol.

Welche Größen Sie brauchen

Es gibt keine einzelne universelle Größe, denn verschiedene Stellen verwenden verschiedene Dateien. In der Praxis genügt ein kleiner Satz, den Sie alle aus einem quadratischen PNG mit mindestens 512 px Seitenlänge erstellen können.

Größe	Verwendung
16x16 px	Browser-Tab (Bildschirme mit Standarddichte)
32x32 px	Tab auf Bildschirmen mit hoher Pixeldichte, Taskleiste
48x48 px	Einige Browser und Suchmaschinen, Windows-Verknüpfungen
180x180 px	apple-touch-icon, wenn eine Website zum Home-Bildschirm eines iPhones oder iPads hinzugefügt wird
192x192 px	Web-Manifest, Android-Startbildschirm
512x512 px	Web-Manifest, Startbildschirme und größere App-Symbole

ICO, PNG oder SVG

ICO ist ein altes Containerformat, das mehrere Größen (zum Beispiel 16, 32 und 48 px) in einer Datei aufnehmen kann. Jeder Browser unterstützt es, daher ist /favicon.ico als Rückfalloption weiterhin nützlich.

PNG ist einfach und zuverlässig: Es eignet sich für die Versionen mit 32, 180, 192 und 512 px und unterstützt Transparenz. SVG ist ein Vektorformat, das moderne Browser unterstützen: Eine Datei bleibt in jeder Größe scharf und kann sich sogar dem Dunkelmodus anpassen. Safari und manche ältere Werkzeuge kommen mit SVG-Favicons jedoch nur teilweise zurecht. Am sichersten ist deshalb eine Kombination: ICO als Rückfalloption, PNG für Apple- und Manifest-Symbole und SVG als optionale Ergänzung.

So erstellen Sie ein Favicon aus einem PNG

Beginnen Sie mit einem quadratischen Bild, idealerweise 512x512 px oder größer, mit einem klaren und einfachen Design. Wenn Sie nur ein JPG haben, können Sie es zunächst in PNG umwandeln, damit sich später in einem Bildeditor ein transparenter Hintergrund ergänzen lässt.

Bereiten Sie ein quadratisches PNG mit einem einfachen Logo oder einem einzelnen Buchstaben vor.
Wandeln Sie es mit einem Werkzeug für PNG zu ICO in ICO um und speichern Sie es als favicon.ico.
Speichern Sie PNG-Kopien mit 180x180 (apple-touch-icon.png), 192x192 und 512x512 für das Web-Manifest separat.
Laden Sie die Dateien in das Stammverzeichnis der Website hoch und fügen Sie die HTML-Tags in den <head> ein.

Die HTML-Tags, die Sie ergänzen

Fügen Sie diese Zeilen in den <head> Ihrer Seite ein (passen Sie die Pfade an den Speicherort Ihrer Dateien an):

Führen Sie in der site.webmanifest unter icons die PNG-Dateien mit 192x192 und 512x512 auf. Wenn Sie kein SVG haben, lassen Sie diese Zeile einfach weg.

Häufige Fehler

Nicht quadratisches Bild: Der Browser staucht oder beschneidet es, und das Symbol wirkt verzerrt. Gehen Sie immer von einem Quadrat aus.
Zu viele Details: Bei 16x16 px verschwimmen kleine Schrift und Schatten zu einem Fleck. Verwenden Sie eine einfache Form, kräftige Farben und starken Kontrast.
Zu kleine Vorlage: Das Vergrößern eines kleinen Bildes macht es unscharf. Ein großes Bild zu verkleinern ist viel sicherer.
Transparenter Hintergrund auf einem dunklen Tab: Ein dunkles Logo kann verschwinden. Prüfen Sie es im hellen und im dunklen Design oder fügen Sie eine Hintergrundfarbe hinzu.
Cache: Browser speichern Favicons hartnäckig zwischen, sodass nach einer Änderung weiter das alte Symbol erscheinen kann. Testen Sie in einem privaten Fenster, laden Sie die Seite mit Strg+F5 komplett neu oder ergänzen Sie eine Version wie /favicon.ico?v=2.

Ein durchgängiges Beispiel

Angenommen, Sie haben ein Logo als PNG mit 1024x1024 px und möchten einen vollständigen Symbolsatz für Ihre Website. Sehen Sie sich zuerst das auf 16x16 px verkleinerte Logo an: Erkennen Sie die Form noch? Wenn nicht, erstellen Sie eine vereinfachte Version, zum Beispiel nur den Anfangsbuchstaben auf einfarbigem Hintergrund. Erst danach exportieren Sie die Größen.

Bereiten Sie als Nächstes die Dateien vor: favicon.ico (16, 32 und 48 px in einer Datei), apple-touch-icon.png (180x180), icon-192.png und icon-512.png. Das sind vier Dateien, die für fast jede Situation ausreichen. Laden Sie sie in das Stammverzeichnis der Website hoch, ergänzen Sie die Tags im <head> und öffnen Sie die Seite in einem privaten Fenster, um das Ergebnis zu prüfen.

So prüfen Sie, ob alles funktioniert

Öffnen Sie https://ihre-website/favicon.ico direkt im Browser: Sie sollten das Symbol sehen und keinen 404-Fehler.
Laden Sie die Seite in den Entwicklertools (F12, Reiter Netzwerk) neu und bestätigen Sie, dass die Anfragen für das Symbol den Status 200 zurückgeben.
Sehen Sie sich den Tab im hellen und im dunklen Browser-Design an: Das Logo muss in beiden lesbar bleiben.
Fügen Sie die Website auf dem Smartphone zum Home-Bildschirm hinzu und prüfen Sie, ob das 180-px-Symbol erscheint und nicht ein Screenshot der Seite.
Stellen Sie sicher, dass die site.webmanifest gültiges JSON ist und die darin angegebenen Pfade auf tatsächliche Dateien verweisen.