Alles Wissenswerte über das

Favicon

zurück zum Blog-Lexikon

1. Was ist ein Favicon?

Ein Favicon ist ein kleines quadratisches Bild, das oben im Browser über der Adressleiste angezeigt wird und  jedes einzelne Tab schmückt

favicon beispiel browser

Der Begriff Favicon setzt sich aus zwei englischen Wörtern zusammen: „Favorite“ und „Icon“. Daraus entsteht Favicon – also ein Favoriten-Symbol.

Meist wird das Logo als Favicon verwendet.

Auflösung und Größe des Favicons

Das Favicon ist quadratisch und hat somit ein Seitenverhältnis von 1:1. Die Abmessungen sind klassisch 16x16px, 32x32px oder 48x48px, können aber je nach WordPress ThemeGerät, Betriebssystem und Display auch in anderen Maßen auftauchen.

2. Warum ist ein Favicon hilfreich?

Da das Favicon im Browser als Logo in der Lesezeichen-Symbolleiste oder beim Abspeichern der URL als Lesezeichen bzw. Favorit angezeigt wird, ist ein Favicon ein kleines aber hilfreiches Wiedererkennungsmerkmal für deine Webseite.

Es dient damit der schnellen Orientierung, beispielsweise wenn deine Seitenbesucher mehrere Tabs gleichzeitig geöffnet haben.

Ein individuelles Favicon ist ein Must-have für jede professionelle Webseite bzw. jeden professionellen Blog. Es ermöglicht die Abgrenzung von unseriösen Seiten oder den vielen Standardblogs, die ein WordPress-Logo als Favicon haben.

3. Wie erstelle ich ein Favicon?

Erstelle mithilfe eines Bildbearbeitungsprogramms ein quadratisches Abbild deines Logos mit den Abmessungen 32x32px als 24Bit PNG-Datei.

Eine Anleitung auf Englisch, wie du ein Favicon in Photoshop erstellst, findest du zum Beispiel in diesem Youtube-Video:

Bei der Erstellung des Favicons solltest du Folgendes beachten:

  • Wähle eine Hintergrundfarbe, die sich vom Grau des Browsers abhebt oder einen transparenten Hintergrund, damit das Element „schwebt“.
  • Füge nicht zu kleinteilige Elemente ein; lieber nur einen Buchstaben (z. B. den ersten des Blogtitels).
  • Das Design sollte zum Layout und zur Farbstimmung deines Blogs passen.
  • Keine Details oder Verschnörkelungen, da diese in der geringen Auflösung nicht zu sehen sein werden (ein Logo sollte mit dem Finger in Sand zu zeichnen sein).

4. Wie füge ich ein Favicon in WordPress ein?

Im Grunde gibt es zwei Varianten, ein Favicon in deinem WordPress-Blog einzufügen:

a) Das Favicon über das Theme und den Customizer einbinden

Häufig unterstützt dein Theme die Funktion bzw. den Upload eines Favicons.

Um das Symbol anzupassen, navigiere im WordPress Backend zu "Design > Customizer".

Das Favicon lässt sich dort meist in einem der oberen Menüpunkte anpassen (z. B. "Allgemein" oder "Website Informationen").

Hier kannst du deine erstellte Datei als PNG hochladen. WordPress wird dies in Zukunft als dein Favicon anzeigen.

favicon im wordpress customizer anpassen

b) Das Favicon via Plugin einbinden

Unterstützt dein Theme den einfach Upload nicht, musst du deine PNG-Datei in eine .ico-Datei („ico“ für Icon) umwandeln, indem du einfach die Datei-Endung änderst oder die Datei bei https://realfavicongenerator.net hochlädst.

Anschließend installierst du das Plugin "Favicon by RealFaviconGenerator". Hier kannst du bei "ICO Frontend" die erstelle .ico-Datei auswählen und hochladen. Das Plugin wird nun den Verweis automatisch in der Header.php erstellen. 

Möchtest du diesen Schritt manuell erledigen, hier ein Erklärvideo:

5. Warum wird mein Favicon nicht angezeigt?

Manchmal wird das Favicon nicht sofort angezeigt. Keine Sorge, das ist ganz normal. Denn dein Browser hat Informationen im Cache gespeichert, die sich auf deine eigene Seite beziehen. Und darin kam ja bisher kein Favicon vor. Wenn du also alle Chronikdaten im Verlauf löschst, solltest du dein Favicon angezeigt bekommen.

Zusammenfassung

Wie du siehst, ist ein Favicon nicht nur sehr nützlich und leicht zu integrieren, sondern verleiht deinem Blog auch ein individuelles Aussehen. Top! 

Weitere spannenden Informationen zum Thema Favicon

BOck auf einen eigenen Blog?

Dann starte mit unserem kostenlosen Schnupperkurs "Blogger werden" in dein Blog-Abenteuer:

>