Ganz am Anfang meiner Bloggerzeit bin ich über ein Wort gestolpert, mit dem ich überhaupt nichts anfangen konnte: Favicon. Ich hatte nie zuvor davon gehört, hatte keine Ahnung was man damit macht und war dann am Ende überrascht, wie nützlich und einfach es doch ist. In dem Artikel zeige ich dir was ein Favicon ist, wofür man es braucht und wie man es einbindet.

Was ist ein Favicon?

Das Wort Favicon setzt sich aus den beiden englischen Wörtern favorite und Icon zusammen. Ein Favicon ist ein kleines 16 x 16 Pixel umfassendes Symbol, das in der Browserleiste vor der URL oder in den Tabs oben erscheint. Das Symbol kann ein Logo oder ein kleines Bild sein.

Wofür wird ein Favicon gebraucht?

Eigentlich wird dem kleinen Symbol am Anfang viel zu wenig Beachtung geschenkt. Was falsch ist, denn es sind oftmals Kleinigkeiten, die einen Blog für die Leser so wertvoll und nutzerfreundlich machen. Du erleichterst ihnen damit, dass sie dich im Gewusel der vielen offenen Tabs leichter wiederfinden. Ich selber bin eine der Personen, die gerne mal 30 Tabs gleichzeitig offen hat. Da verliere ich öfter auch mal die Übersicht. Und hier kommen die Favicons ins Spiel, denn somit finde ich unter den vielen Tabs genau die Seite wieder, die ich gerade brauche. Es erhöht unglaublich deinen Wiedererkennungswert, man könnte sagen, dass es fast schon einen Markencharakter hat.

Das gleiche gilt für die Lesezeichen. Meine Favoriten oder Funde über ein bestimmtes Thema speichere ich mir gerne als Lesezeichen ab. Natürlich kommt auch hier wieder öfter mal die Übersichtlichkeit abhanden, das passende Symbol erleichtert mir dabei aber unglaublich die Suche.

Außerdem wird ein Favicon von den Suchmaschinen positiv bewertet, es trägt also (zu einem kleinen Prozentsatz) zur Suchmaschinenoptimierung (SEO) bei.

Wie erstelle ich ein Favicon?

Zunächst einmal sollte das Symbol möglichst simpel gestaltet sein. Egal in welcher Größe du es abspeicherst, die Ansicht wird immer auf die 16×16 Pixel reduziert. Schau dir die Favicons großer Marken und Firmen an – siehst du, wie sie den Fokus auf das Wesentliche legen?

Außerdem solltest du deinem Stil treu bleiben. Ist dein Logo klein und schlicht, dann eignet es sich vielleicht gleich komplett als Favicon. Falls dein Logo aber zu groß, zu verspielt und zu umfangreich ist, dann tut es oft auch ein Ausschnitt davon.

Ich erstelle meine Logos und Symbole in Photoshop und speichere sie mir als .png-Datei ab. Alternativ solltest du noch ein Programm nutzen und es in eine .ico-Datei umwandeln (siehe nächster Abschnitt). Falls du kein Bildbearbeitungsprogramm besitzt, gibt es im Netz auch kostenlose Online-Generatoren: Favicon Generator, Favicon.CC, Picmonkey (eignet sich auch perfekt zum Erstellen von Logos – .ico-Speicherung aber nicht möglich), und so weiter.

Wie binde ich ein Favicon in WordPress ein?

Speichere das Symbol als .ico und .png – Datei ab. Bei der Umwandlung in eine ico. – Datei hilft dir die Seite Iconifier. Zum Hochladen gibt es jetzt 2 Möglichkeiten. Ich nutze dafür immer die einfachere. Alle Themes, die ich für meine Seiten verwende, bieten unter Design / Theme Options die Möglichkeit das Bild in die Mediathek hochzuladen und dann als Favicon einzufügen. Teilweise wird mir hier die Dateiendung .ico oder .png empfohlen.

Bei Variante 2 bindest du die Datei im Head-Bereich deiner Webseite ein. Dabei lädst du vorher die Datei mit einem FTP – Programm in das Root Verzeichnis deines eigenen Themes und fügst dann den Code unter header.php ein. Als Hilfe und Übersicht empfehle ich dir diesen Artikel.

Von der Nutzung eines Plugins möchte ich dir abraten, denn zu viele Plugins verlangsamen die Ladezeit deiner Seite.

Ein kleiner Schritt mit großer Wirkung! Probier es gleich aus.