Favicon
Von

Small is beautiful: Ein Favicon erstellen und einfügen

Das Favicon ist ein kleines Symbol, das in der Adresszeile des Browsers angezeigt wird. Meist handelt es sich dabei um eine Mini-Version des Logos. Da sich nicht jedes Logo 1:1 verwenden lässt, ist es praktisch, bei der Planung des Logos auch gleich eine Favicon-Variante zu erstellen oder erstellen zu lassen. Fehlt das Favicon auf einer WordPress-Website, wird in der Adresszeile stattdessen als Platzhalter das WordPress-Icon angezeigt.  In diesem Artikel erkläre ich, warum das kleine Icon wichtig ist, welches Format es haben sollte und wie es auf einer WordPress-Website eingefügt wird. 

Das Favicon (= Favorite Icon) wird unter anderem in der Browser-Tab-Leiste, der Lesezeichen-Leiste, in der Google Suchergebnis-Übersicht und auf Social Media-Plattformen angezeigt. Als einzigartiges visuelles Erkennungsmerkmal steigert es den Wiedererkennungswert der Website. Daher sollte keinesfalls darauf vergessen oder verzichtet werden. Eine Website ohne Favicon wirkt oft auf den ersten Blick unfertig bzw. unprofessionell. Die Erstellung und Installation eines Favicons ist in 3 einfachen Schritten erledigt: 


Favicon erstellen

Ein Favicon kann entweder in einem Bildbearbeitungsprogramm wie Photoshop oder Gimp oder mit Hilfe eines Online-Generators erstellt werden. Ein quadratisches Format mit den Abmessungen 512x512px ist ideal, damit das kleine Icon überall optimal angezeigt wird. 

Bei der Erstellung in einem Bildbearbeitungsprogramm kann ein farbiger Hintergrund gewählt werden, es ist aber auch möglich, sich für einen durchsichtigen Hintergrund zu entscheiden. Die meisten Icons haben einen weißen oder transparenten Hintergrund. Wichtig ist, auf den Kontrast zum Hintergrund zu achten, damit das winzige Symbol auch bei vielen nebeneinander geöffneten Browser-Tabs noch gut erkennbar bleibt. Der Browser-Tab-Hintergrund ist meist hellgrau, weiß (bei aktiven Tabs) bzw. im Dark Mode schwarz. Ein cremeweißes oder dunkelgraues Icon würde also eher mit dem Hintergrund verschmelzen und wäre daher weniger gut sichtbar und damit eher ungeeignet.

Favicon Generatoren

Generatoren wie favicon.cc, favicon.io oder Real Favicon Generator  erstellen aus einem Bild-Logo oder einem Buchstaben/Text automatisch ein Icon in allen möglichen Bildformaten. Bei der Erstellung eines Icons aus Buchstaben können Schrifttype (Font), Schriftfarbe, Schriftschnitt, Hintergrundfarbe etc. ausgewählt werden. Während es vor einiger Zeit noch wichtig war, verschiedene Bildformate für verschiedene Browser zu hinterlegen, ist es inzwischen ausreichend, das Favicon in einem Format einzufügen, meist als .png, .gif oder jpg.-Datei. 

Auch manche Hosting-Unternehmen bieten (auch unabhängig vom Hosting) eigene Favicon-Generatoren an, zum Beispiel Hoststar.

Favicon einfügen

Am einfachsten ist das Einfügen des Icons in WordPress über den „Customizer“ des jeweiligen Themes. Unter dem Punkt „Site Identity“ gibt es die Möglichkeit, Logo und Website-Icon zentral einzubinden. Alternativ kann das Icon auch über FTP (z.B. FileZilla) ins Root-Verzeichnis hochgeladen werden.

Favicon testen

Nach der Installation des Favicons ist es ratsam zu testen, ob das Symbol auch durchgängig angezeigt wird: in verschiedenen Browsern (Chrome, Safari, Edge, Firefox, Opera, Vivaldi etc.), auf verschiedenen Endgeräten (Desktop, IPad, IPhone) und mit unterschiedlichen Betriebssystemen (iOS, Android) sowie auf Social Media Plattformen wie Facebook, Twitter oder LinkedIn.

Fazit

Das Favicon ist ein kleiner, wichtiger Teil des Designs und Brandings der WordPress-Website. So unscheinbar es auf den ersten Blick wirkt, so sorgt es doch für visuelle Aha-Erlebnisse und dient als einfache Orientierungshilfe bei der Navigation durch Browser-Tabs und Suchmaschinenergebnisse.

ADAWEB ist als WordPress-Agentur auf die technische und kreative Umsetzung individueller Websites spezialisiert. Informiere dich unverbindlich über unsere Leistungen und Preise.

Wir freuen uns auf deine Anfrage.

Jetzt Kontakt Aufnehmen

Über die Autorin*