WordPress-Favicon einfügen oder ändern: So geht’s in 5 Minuten

Die Markenbildung ist im Online-Bereich super wichtig.

Um den Wiedererkennungswert deiner Website zu erhöhen und auch das Design abschließend zu optimieren, solltest du unbedingt ein Favicon einbinden – ein kleines Icon, das unter anderem neben der Adresszeile im Browser angezeigt wird.

In diesem Artikel erfährst du, was ein Favicon genau ist und worauf du bei der Erstellung und späteren Einbindung unbedingt achten solltest.

1. Was ist ein Favicon? Und warum ist es wichtig?

Bei dem Begriff Favicon handelt es sich um eine Abkürzung, die für „Favorite Icon“ steht. Darunter ist ein kleines Symbol zu verstehen, das immer dann in Erscheinung tritt, wenn ein Besucher deine Website aufruft.

Sogar in den Suchergebnissen wird es dargestellt (dazu gleich mehr).

Du siehst, dass ein Favicon an vielen repräsentativen Stellen zu sehen ist. Daher solltest du keinesfalls darauf verzichten, ein passendes Icon für deine Website zu wählen und einzubinden.

Der Zeiteinsatz für die Einbindung ist gering, der Nutzen dafür umso größer:

• Du erhöhst den Wiedererkennungswert deiner Seite
• Du wertest mobile Suchergebnisse optisch auf
• Du steigerst die Professionalität deiner Website

1.1 Wo werden Favicons überall angezeigt?

Über ein Favicon stolperst du an den unterschiedlichsten Orten – unter anderem im Webbrowser. Viele stellen das Symbol neben der Adresszeile dar, andere (Google Chrome) in den Tab-Reitern.

Auch bei Lesezeichen oder in den mobilen Suchergebnissen wird das Favicon angezeigt.

Selbst als App-Icon wird es vom Smartphone verwendet, sofern du einen Link zu einer Website auf dem Home-Bildschirm ablegst. Gleiches gilt für Windows-Kacheln.

2. Wie kann ich ein Favicon bei WordPress einfügen?

Es existieren viele verschiedene Möglichkeiten, um ein Favicon einzufügen. Die einfachste und schnellste Methode führt jedoch direkt über das WordPress-Backend und den dortigen Customizer.

Wie das geht, erfährst du jetzt Schritt für Schritt.  

2.1 Favicon-Datei erstellen

Im ersten Schritt musst du natürlich eine Favicon erstellen.

Ideal wäre hier dein Logo, was jedoch nicht immer möglich ist. Da Favicon sehr klein sind, scheinen insbesondere rechteckige Logos keine gute Wahl. Optimal ist ein Bild in einem quadratischen Format.

Das Bild, für das du dich schlussendlich entschieden hast, bringst du in das Format 512 × 512 Pixel.

Sofern ein Hintergrund zu sehen ist, solltest du das JPG-Dateiformat wählen, bei transparentem Hintergrund PNG. In beiden Fällen ist es jedoch essenziell, die Dateigröße so weit wie möglich zu reduzieren. Das geht am einfachsten mit einem Grafikprogramm wie Gimp oder Adobe Photoshop.

Achtung: Das Dateiformat ICO wird heute NICHT MEHR benötigt. Aufwendige Format-Umwandlungen kannst du dir also sparen.  

2.2 Favicon im WordPress-Customizer hochladen

Nachdem du deine Favicon-Datei erstellt hast, führt dich dein nächster Schritt in den Customizer.

Genauer in den Eintrag Customizer > Website-Informationen > Website-Icon.

Hier kannst du dein gewünschtes Icon hochladen und im nächsten Schritt bei Bedarf zuschneiden. WordPress zeigt dir sogar eine Vorschau an, wie dein gewähltes Bild als Favicon erscheint.

Nach einem Klick auf Veröffentlichen ist deine Arbeit erledigt und dein Favicon erfolgreich eingebunden.

2.3 WordPress-Cache und Browser-Cache leeren

Um die Änderungen auch sofort für alle Besucher sichtbar zu machen, solltest du nicht vergessen, den WordPress-Cache zu leeren.

Außerdem musst du deinen Browser-Cache leeren, um die Änderungen selbst zu sehen.

2.4 Favicon testen

Im letzten Schritt solltest du überprüfen, ob dein Favicon korrekt eingebunden wurde.

Das kannst du händisch durchführen oder du nutzt eines von vielen Online-Tools.

3. WordPress-Favicon per FTP hochladen

Es ist auch möglich, ein Favicon über FTP hochzuladen.

Hierfür benötigst du zunächst ein Tool, mit dessen Hilfe du auf deinen Webspace zugreifen kannst. Ideal ist hier FileZilla.

Nachdem du dich erfolgreich eingeloggt hast, navigierst du in das Home-Verzeichnis der Website (hier sind unter anderem htaccess oder robots.txt abgelegt), zu der du ein Favicon hinzufügen möchtest.

Nun musst du lediglich die Bilddatei in dieses Verzeichnis kopieren, die später zu deinem Favicon werden soll.

Im letzten Schritt musst du diese Bilddatei in „favicon.ico“ umbenennen. Das passende Menü öffnet sich durch einen Rechtsklick auf den Dateinamen.

Das war’s!

4. WordPress-Favicon über die Theme-Einstellungen hochladen

Viele Premium-Themes ermöglichen es dir direkt in den Theme-Einstellungen, ein Favicon hinzuzufügen.

Etwa bei Enfold (eines der beliebtesten Themes im Envato Market), kannst du direkt in den Theme-Optionen ein Site-Icon hinzufügen. So kannst du dir Umwege oder ein zusätzliches Plugin sparen.

Die meisten Themes greifen jedoch auf den Customizer zurück – auch sehr populäre Vertreter wie Elementor oder Divi.

5. Warum wird mein WordPress-Favicon nicht angezeigt?

Auch wenn die Fehlerquote bei der Einbindung eines Favicons wirklich gering ist, kann es hin und wieder vorkommen, dass dein Favicon nicht angezeigt wird.

Eine pauschale Fehlerursache dafür auszumachen ist schlichtweg unmöglich und hängt auch entscheidend von der Methode ab, die du bei der Einbindung deines Favicons verwendet hast.

Vielleicht liegt bei dir ja eine der folgenden Ursachen vor:

• Du hast WordPress-Cache oder Browser-Cache nicht geleert
• Du hast die Bilddatei gelöscht / den Namen geändert, die du um Customizer als Icon hinterlegt hast
• Du hast das Favicon beim Hochladen via FTP in das falsche Verzeichnis kopiert oder die Datei falsch benannt (favicon.ico)

6. FAQ

Hier habe ich dir Antworten auf häufige Fragen rund um WordPress-Favicons zusammengestellt: