Wie du ein WordPress Favicon einfügst

Wie du ein WordPress Favicon einfügst

Teilen macht Freude!

Lesezeit: ca. 5 Minuten

Das Favicon ist ein kleines Icon, das deine Website an verschiedenen Stellen repräsentiert.

Du brauchst das Favicon für dein Branding und um deiner Website (noch) mehr Professionalität zu verleihen.

Es erscheint beispielsweise hier:

  • in Google Suchergebnissen auf Mobilgeräten
  • neben dem Namen deiner Website in Browsertabs
  • beim Speichern deiner Website als Lesezeichen
Favicons in Browsertabs und Lesezeichen, Beispiele
Das Favicon repräsentiert deine Website an verschiedenen Stellen

WordPress geht mit dem Favicon aber sogar noch einen Schritt weiter, und nennt es „Website-Icon“.

Nicht nur der Name ist anders, es wird auch an weiteren Stellen genutzt. Zum Beispiel wenn deine Website auf einem Smartphone dem Homescreen hinzugefügt wird.

Ich zeige dir in dieser Anleitung, wie du das Favicon in WordPress einfügst.

Natürlich gibt es, wie immer, auch hier ein WordPress Favicon Plugin, doch das kannst du dir sparen!

WordPress hat von Haus aus eine eigene Einstellung für das Einfügen des „Website-Icons“.

Wie du ein Favicon in WordPress einfügst

Das Favicon ist Pflicht für jede Website. Es sorgt nicht nur für einen hohen Wiedererkennungswert deiner Marke und Website, sondern auch für die Wahrnehmung deiner Website als professionellen Webauftritt.

Dank der in WordPress integrierten Funktion zum Einbinden eines Favicons ist das schnell gemacht. WordPress nennt es übrigens Website-Icon, da es auch auf Smartphones für das Speichern einer Seite auf dem Homescreen genutzt wird.

1. Erstelle dein Favicon

Zunächst musst du eine Grafik erstellen, die du als Favicon nutzen wirst.

Das kannst du mit jedem beliebigen Bildbearbeitungsprogramm machen. Natürlich geht es auch mit Canva. Wähle dafür einfach eine quadratische Vorlage oder erstelle eine eigene.

Wenn du ein Text-Bild Logo hast, kannst du das Bild aus deinem Logo als Favicon nutzen. Ich löse das beispielsweise mit dem Ninjakopf aus meinem Logo.

Vom WP Ninjas Logo zum Favicon
Dank des Text-Bild Logos kann ich ganz einfach ein Favicon aus meinem Logo erstellen.

Ein anderer Ansatz ist, dass du eine Grafik oder ein Icon wählst, das mit dir und deiner Marke in Verbindung gebracht wird.

Da das Favicon in Browsern sehr klein dargestellt wird, solltest du keinen Text (außer einem einzelnen Buchstaben) und keine komplizierten Grafiken nutzen. Je einfacher, desto besser.

Meistens werden Favicons ohne Hintergrund, also freigestellt, eingebaut. Wenn du allerdings ein Icon wählst, das einen schlechten Kontrast zu schwarz oder weiß hat, solltest du einen Hintergrund wählen.

Das Favicon muss quadratisch sein und eine Größe von 512px x 512px haben. Wenn du einen transparenten Hintergrund möchtest, speichere das Favicon als .png ab. Hat es einen Hintergrund, nutze .jpg.

🧐 Erstelle dein Favicon mit 512x512px Größe. Du kannst dafür einen Teil deines Logos nutzen oder eine andere, möglichst einfache Grafik, die dich repräsentiert.

2. Füge das Favicon in WordPress ein

Navigiere unter „Design“ -> „Customizer“ -> „Website-Informationen“.

WordPress Favicon im Customizer einfügen
Im WordPress Customizer unter „Website-Informationen“ kannst du dein Favicon einbinden.

Hier findest du ganz unten den Abschnitt für das „Website-Icon“ und kannst dort deine Datei einfügen. Wähle es aus deiner Mediathek aus oder lade es hoch.

Anschließend wirst du aufgefordert, deine Grafik zuzuschneiden, damit sie quadratisch ist. Wenn du sie bereits quadratisch hochgeladen hast, kannst du den Schritt einfach überspringen, ohne etwas anpassen zu müssen.

Fügst du ein .png mit transparentem Hintergrund ein, wundere dich nicht über den schwarzen Hintergrund in der Vorschau. Das ist völlig normal und in Browsertabs wird dieser Hintergrund nicht angezeigt.

Vergiss nicht, mit einem Klick auf „Veröffentlichen“ zu speichern.

🧐 Füge dein WordPress Favicon unter „Design“ -> „Customizer“ -> „Website-Informationen“ ein.

3. Lösche deinen Cache

Wenn du ein Caching Plugin nutzt (beispielsweise WP Rocket, Cache Enabler oder WP Fastest Cache), lösche den Cache. Wenn dein Plugin dafür keine Funktion anbietet, deaktiviere und aktiviere das Caching-Plugin einmal.

Damit gehst du sicher, dass kein anderes Favicon mehr im Cache festhängt. Oftmals wird beim Import von Demodaten in einem Theme auch ein Favicon mit importiert und auch wenn du dein Favicon änderst, sorgst du mit dieser Handlung für die korrekte Anzeige deines neuen Icons.

🧐 Lösche deinen Cache oder deaktiviere und reaktiviere dein Caching-Plugin, um das neue Favicon korrekt anzeigen zu lassen.

4. Überprüfe das Favicon

Abschließend solltest du noch zwei Minuten Zeit dafür aufwenden, dein Favicon zu überprüfen.

Wird es korrekt angezeigt? Kann man das Icon erkennen und verbindet es mit dir und deiner Marke?

Am besten rufst du deine Website mal in einem anderen Browser auf, als du das üblicherweise tust. Achte in dem Tab darauf, ob du die beiden oben gestellten Fragen mit „Ja“ beantworten kannst.

Schnappe dir anschließend dein Smartphone, rufe deine Website auf und speichere sie auf deinem Homescreen ab. Auch hier sollte nun dein neues Website-Icon erscheinen.

Du kannst nach einigen Tagen auch schauen, ob Google das Icon in den mobilen Suchergebnissen anzeigt, wie du es oben im Beispiel gesehen hast.

🧐 Prüfe, ob dein Favicon im Browser und auf Smartphones korrekt angezeigt wird. Nach einigen Tagen kannst du auch die mobilen Google Suchergebnisse überprüfen.

Hast du dein Favicon erfolgreich eingefügt und lief alles rund? Hinterlasse einen Kommentar!

4.2/5 (5 Reviews)

Teilen macht Freude!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.