Favicon

Ein Favicon ist ein kleines Symbol, das eine Website visuell kennzeichnet. Du siehst es zum Beispiel neben dem Seitentitel in Browser-Tabs, in Lesezeichen und teilweise in Suchergebnissen. Moderne Favicons können außerdem unterschiedliche Darstellungen für Light Mode und Dark Mode verwenden.

Wo wird ein Favicon angezeigt?

Browser verwenden Favicons an mehreren Stellen ihrer Benutzeroberfläche. Dazu gehören Tabs, gespeicherte Lesezeichen und verschiedene Übersichten geöffneter oder gespeicherter Seiten.

Auch Google kann ein Favicon neben einem Suchergebnis anzeigen. Das Favicon dient dort als visuelles Erkennungsmerkmal der Website. Eine Domain und eine Subdomain können jeweils eigene Favicons besitzen.

Ein gutes Favicon sollte auch bei sehr kleiner Darstellung eindeutig erkennbar sein. Sehr feine Schriftzüge oder komplizierte Logos funktionieren deshalb häufig schlechter als eine vereinfachte Bildmarke.

Welche Dateiformate eignen sich für Favicons?

Traditionell wurde häufig das ICO-Format verwendet. Moderne Browser können jedoch auch andere Bildformate als Favicon verwenden. Besonders verbreitet sind PNG und SVG.

PNG ist ein Rasterformat. Du kannst damit beispielsweise getrennte Versionen für helle und dunkle Browseroberflächen bereitstellen. SVG ist ein Vektorformat und bleibt unabhängig von der Auflösung scharf. Zusätzlich kann eine SVG-Datei eigene CSS-Regeln enthalten und ihre Farben dadurch dynamisch an das bevorzugte Farbschema anpassen.

Für die Google-Suchergebnisse gelten eigene Vorgaben. Google unterstützt dort unter anderem ICO und PNG, nennt SVG derzeit aber nicht als unterstütztes Favicon-Format. Wenn Du ein SVG-Favicon für Browser verwendest, ist daher eine zusätzliche PNG- oder ICO-Version sinnvoll.

Favicons für Light Mode und Dark Mode

Ein schwarzes Logo ist auf einem hellen Hintergrund gut erkennbar, kann auf einer dunklen Browseroberfläche aber nahezu verschwinden. Dasselbe Problem entsteht bei einem weißen Symbol im Light Mode. Deshalb kannst Du unterschiedliche Favicons für Light Mode und Dark Mode bereitstellen.

Bei PNG-Dateien verwendest Du dafür zwei getrennte Bilder. Über mehrere <link rel="icon">-Elemente und das media-Attribut lässt sich festlegen, welches Favicon bei (prefers-color-scheme: light) und welches bei (prefers-color-scheme: dark) verwendet werden soll. Browser können bei mehreren Icon-Angaben unter anderem die Attribute media, type und sizes berücksichtigen.

Bei einem SVG-Favicon ist auch eine einzelne adaptive Datei möglich. Innerhalb des SVG kannst Du über die CSS-Media-Query @media (prefers-color-scheme: dark) beispielsweise Füll- oder Linienfarben verändern. Dadurch kann dasselbe Symbol im Light Mode dunkel und im Dark Mode hell dargestellt werden.

Die Unterstützung einzelner Favicon-Techniken kann zwischen Browsern unterschiedlich sein. Außerdem entspricht prefers-color-scheme der Farbpräferenz des Betriebssystems beziehungsweise Browsers und nicht in jeder Situation exakt der tatsächlichen Hintergrundfarbe eines Browser-Tabs. Dein Favicon sollte deshalb grundsätzlich auf hellen und dunklen Flächen ausreichend Kontrast besitzen.

Wie wird ein Favicon eingebunden?

In HTML wird ein Favicon über ein Link-Element im Kopfbereich der Seite angegeben. Eine klassische Variante ist <link rel="icon" href="/favicon.ico">.

Bei mehreren Varianten kann der Browser anhand von Format, Größe und Media Query entscheiden, welches Icon geeignet ist. So kannst Du beispielsweise ein PNG als robuste Standardversion und zusätzlich ein adaptives SVG für geeignete Browser bereitstellen.

Eine durchdachte Kombination verschiedener Formate bietet daher oft die beste Abdeckung.

Woher kommt das Favicon?

Die Bezeichnung Favicon leitet sich von „favorite icon“ ab. Microsoft unterstützte Favicons 1999 mit Internet Explorer 5. Ursprünglich wurde dafür insbesondere eine Datei namens favicon.ico im Hauptverzeichnis einer Website verwendet.

Aus dem ursprünglich für Favoriten gedachten Symbol entwickelte sich ein fester Bestandteil moderner Browser und Websites.

Welche Anforderungen stellt Google?

Für die Darstellung in Google-Suchergebnissen muss das Favicon quadratisch sein. Die Mindestgröße beträgt 8 × 8 Pixel. Google empfiehlt jedoch mindestens 48 × 48 Pixel beziehungsweise ein Vielfaches davon.

Die Favicon-Datei und die Startseite müssen für Google crawlbar sein. Unterstützt werden für die Google-Suche derzeit BMP, GIF, ICO, PNG, JPEG, PPM und TIFF. SVG gehört nicht zu den von Google genannten Formaten für das Favicon in den Suchergebnissen.

Wenn Du für Deinen Browser ein SVG-Favicon mit Light- und Dark-Mode-Unterstützung nutzt, solltest Du deshalb zusätzlich eine geeignete Rasterversion bereitstellen.

Hat ein Favicon Einfluss auf SEO?

Ein Favicon ist kein Ersatz für hochwertige Inhalte oder technische Suchmaschinenoptimierung. Es unterstützt jedoch die visuelle Wiedererkennbarkeit Deiner Website.

In Browser-Tabs hilft das Symbol dabei, eine Seite schneller wiederzufinden. In Suchergebnissen kann ein klar erkennbares Favicon zusätzlich dabei helfen, Deine Website optisch zuzuordnen.

Häufige Fragen