Es ist klein, aber ein echter Hingucker: Das Favicon ist ein Mini-Symbol, das deine Marke sichtbar macht – in Browser-Tabs, Lesezeichen und sogar in Suchergebnissen. Favicon = favorite icon.
Obwohl es oft übersehen wird, spielt es eine große Rolle für den Wiedererkennungswert deiner Website. Eine Seite ohne Favicon sieht schnell unfertig aus, und niemand will, dass das WordPress-Standard-Icon als Platzhalter einspringt.
Doch keine Sorge: In nur drei Schritten kannst du ein Favicon erstellen, einfügen und sicherstellen, dass es überall perfekt funktioniert.
Was macht ein Favicon so wichtig?
Ein Favicon sorgt dafür, dass sich Nutzer:innen schnell orientieren können, wenn sie viele Tabs geöffnet haben. Es taucht in der Browser-Tab-Leiste, der Lesezeichen-Leiste und sogar bei Google-Suchergebnissen neben dem Website-Namen auf. Auf mobilen Geräten und Social-Media-Plattformen sorgt es ebenfalls für den Wiedererkennungswert. Dieses winzige Icon ist damit ein wichtiger Bestandteil deines Brandings – genau wie dein Logo oder deine Farbwelt.
Schritt 1: Erstelle dein Favicon
Ein Favicon ist eine reduzierte Darstellung deines Logos oder ein prägnantes Symbol, das deine Marke widerspiegelt. Erstellen kannst du es mit Bildbearbeitungsprogrammen wie Photoshop oder Gimp, oder du nutzt einen Online-Favicon-Generator wie favicon.io, Real Favicon Generator oder favicon.cc.
Ein quadratisches Format mit den Maßen 512 x 512 Pixel ist ideal. Wichtig ist, dass dein Favicon auch bei kleiner Darstellung erkennbar bleibt. Farben und Kontraste sollten dabei clever gewählt sein: Der Hintergrund eines Browser-Tabs ist oft hellgrau, weiß oder – im Dark Mode – schwarz. Damit dein Favicon nicht untergeht, sollte es farblich hervorstechen.
Falls du Buchstaben für dein Favicon verwenden möchtest, kannst du mit Generatoren Schriftarten, Schriftgrößen und Farben anpassen. Moderne Browser akzeptieren die gängigen Bildformate wie .png, .jpg oder .gif, sodass du dir keine Gedanken über spezielle Formate machen musst.
Schritt 2: Favicon einfügen
Wenn dein Favicon bereit ist, kannst du es in WordPress ganz einfach über den Customizer einfügen. Gehe zu „Website-Identität“ und lade dein Icon dort hoch.
Alternativ kannst du das Favicon manuell über einen FTP-Zugang direkt in das Root-Verzeichnis deiner Website hochladen. Das bietet sich vor allem an, wenn du dich mit den technischen Aspekten deiner Website auskennst.
Schritt 3: Favicon testen
Nach dem Hochladen solltest du sicherstellen, dass dein Favicon überall korrekt angezeigt wird. Prüfe es in verschiedenen Browsern wie Chrome, Safari, Firefox oder Edge sowie auf mobilen Endgeräten. Wichtig ist auch, zu testen, wie dein Favicon auf Social-Media-Plattformen dargestellt wird.
Falls das Icon nicht sofort sichtbar ist, leere den Browser-Cache oder lade die Seite neu. So stellst du sicher, dass keine alten Dateien die Ansicht beeinflussen.
Das kleine Detail, das Großes bewirkt
Auch wenn das Favicon nur ein winziges Element deiner Website ist, hat es eine starke Wirkung. Es macht deine Marke erkennbar, schafft Professionalität und hinterlässt einen bleibenden Eindruck bei deinen Besucher:innen. Wenn du diesen kleinen Schritt in dein Branding integrierst, bist du deinen Mitbewerbern bereits einen Klick voraus.