🎉 Neles brandneuer Instagram-Kurs kommt im August 2022!Ja, zeig mir den Kurs!

10 Tage, 10 E-Mails

Du willst in 2022 mehr Besucher und Kunden über SEO bekommen?

Starte mit meinem kostenlosen E-Mail-Training, um 10 fatale SEO-Fehler zu vermeiden, die dich deine Google-Rankings kosten.

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

WordPress-Favicon einfügen oder ändern

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.

Favicon Beispiel

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.

Favicon Safari

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.

Favicon erstellen

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.

Favicon Customizer

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.

Favicon FTP

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:

Kann ich WordPress-Favicons auch seitenspezifisch festlegen?

Ja, das ist möglich. Allerdings leider nicht per Plugin. Eine Anleitung, wie du das per Code löst, findest du bei CSS-Tricks.

Wie kann ich verschiedene WordPress-Favicons automatisch rotieren?

Mithilfe des Plugins Favicon Rotator lassen sich mehrere Bilder als Favicon hinterlegen, die zufällig ausgespielt werden. Dadurch werden den Besuchern unterschiedliche Favicons angezeigt.

In welchen Browsern wird das WordPress-Favicon angezeigt?

Nahezu alle modernen Browser zeigen ein Favicon an, darunter Edge, Firefox, Google Chrome, Internet Explorer, Opera und Safari.

Die Dateiformate ICO, PNG und GIF können alle Browser darstellen, animierte GIFs werden nur durch Firefox und Opera 7.0 korrekt dargestellt.

Der Internet Explorer ist außerdem nicht in der Lage, JPEG und SVG korrekt zu lesen.

Finn Hillebrandt

Finn Hillebrandt

Gründer von Blogmojo, SEO-Experte mit 11+ Jahren Erfahrung, WordPress-Fan

Finn hilft Online-Unternehmern mehr Kunden und Besucher über Google zu bekommen.

Er setzt dabei nicht auf Hörensagen, sondern führt ständig eigene Tests und Recherchen durch, um herauszufinden, wie Google wirklich tickt. Achtung, Nerd-Alarm! 🤓

Er teilt sein Wissen hier auf dem Blog in 80+ Fachartikeln zu Online-Business, WordPress und SEO sowie in Online-Kursen, wie z. B. seinem SEO-Kurs „New Level SEO“ und seinem Mini-Kurs „Kann ich ranken?“.

Erfahre mehr über Finn und das Team, folge ihm auf Instagram, Twitter und LinkedIn oder tritt seiner Facebook-Gruppe SEO & Affiliate-Marketing bei.

Werbehinweis für Links mit Sternchen (*)

Es handelt sich um einen Affiliate-Link, das heißt, wenn du auf der verlinkten Website etwas kaufst, erhalten wir eine Provision. Dies hat keinerlei Einfluss darauf, wie wir ein Tool oder einen Anbieter bewerten.

Wir empfehlen nur Tools bzw. Anbieter, hinter denen wir auch wirklich stehen. Für dich entstehen dadurch natürlich keine zusätzlichen Kosten! Du hilfst jedoch uns und diesem Projekt. Danke! ❤️

Du willst in 2022 mehr Besucher und Kunden über SEO bekommen?
10 SEO-Fehler

Dann starte mit meinem E-Mail-Training, um 10 fatale SEO-Fehler zu vermeiden, die dich deine Google-Rankings kosten.

Es kostet dich keinen Cent, nur deine E-Mail-Adresse. 😉

👉 Ja, zeig mir das Training!