60 Minuten GRATIS-Webdesign-Workshop

Mit Geschäftsführer & Webdesign-Profi Oliver Pfeil

In diesem Artikel zeige ich dir, wie du ein WordPress Favicon einfügen oder ein bestehendes ändern kannst. Durch die Einbindung deines Favicons sorgst du für ein einheitliches Branding und erhöhst deinen Wiedererkennungswert.

Ein Favicon ist eine winzige Grafik (Image), die im Browser links neben dem Titel dargestellt wird. Das WordPress-Favicon ist zudem auch sichtbar, wenn die Website oder der Blog in den Lesezeichen im Browser gespeichert wird. Fast alle Browser stellen das Favicon-Bild in den Lesezeichen mit dar.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Zusammenfassung: So kannst du das Favicon in WordPress einbinden:

  1. Klicke im WordPress Backend auf Design – Customizer
  2. Je nach Theme findest du hier unterschiedliche Einstellungen. Suche nach dem Bereich „Favicon“.
  3. Lade jetzt das Website-Icon hoch und speichere das Favicon ab.

WordPress Favicon erstellen

Ein WordPress Favicon kannst du einfach erstellen. Dazu benötigst du lediglich eine Grafik, die du als Favicon nutzen möchtest. In der Regel handelt es sich dabei um das Logo. Beachte bitte, dass das Favicon quadratisch und sehr klein ist. Nach der Einbindung in WordPress sollte das Favicon gut erkennbar sein.

WordPress Favicon einfügen

Das Erstellen deines Favicons benötigt 2 Schritte:

  1. Bild auf die Größe 32 x 32 Pixel verkleinern (in manchen Fällen auf 16 x 16 Pixel)
  2. Umwandlung der Datei auf das Format .ico

Die Änderung der Größe kannst du mit deinem Grafikbearbeitungsprogramm durchführen. Das funktioniert mit jeder beliebigen Software. Wichtig ist, dass dein Favicon auch in der kleinen Größe noch gut erkennbar ist. Achte bitte darauf.

Als Nächstes musst du das Bild im Format .ico speichern. Da dies die das benötigte Dateiformat ist. Die meisten Grafikprogramme können allerdings nicht in dieses Format konvertieren.

Das ist aber kein Problem, denn es gibt viele Online-Dienste, mit denen du das Favicon ändern kannst. Damit kannst du aus deiner Grafik ein richtiges Favicon machen, dass du anschließend in WordPress einbinden kannst.

Klicke auf „Durchsuchen“, wähle die Datei aus und klicke auf „hochladen“. Jetzt kannst du sich das fertige Favicon herunterladen. Benenne diese Datei so um, dass sie „favicon.ico“ lautet.

Favicon in WordPress einfügen

Der finale Schritt ist nun, das Favicon in WordPress einzufügen. Wie so oft, gibt es verschiedene Wege, das zu tun. Im folgenden 3 Möglichkeiten:

Ich empfehle dir die Variante mit Theme oder Plugin. Das alleinige Hochladen des Favicons in WordPress ist oft nicht ausreichend genug. Dennoch möchte ich dir alle 3 Möglichkeiten in folgender Anleitung ausführlich zeigen.

Wenn du die Einbindung testen möchtest, solltest du zuvor immer deinen Browser-Cache leeren. Alternativ kannst du auch ein Inkognito verwenden.

Wie du siehst, brauchst du dazu keinen Code/PHP einbinden. Alle funktioniert bequem über die Oberfläche deiner Seite.

Favicon mittels deines WordPress-Themes ändern

Jedes moderne und gut programmierte Theme bietet dir die Möglichkeit, ein Favicon ganz einfach einzubinden, bzw. zu ändern. Du kannst es über die Theme-Optionen einfügen.

Da es viele Theme-Hersteller gibt und jedes etwas anders angepasst wird, kann ich dir keinen allgemeingültigen Menüpunkt dafür sagen. Wenn dein Theme diese Funktion anbietet, findest du die Möglichkeit in den Theme-Optionen (Customizer) und kannst von dort das Favicon einfügen.

In der Regel findest du die Einstellung hier:

  1. Klicke auf Design – Customizer.
  2. Anschließend klickst du auf „Website-Informationen“.
  3. Es erscheint der Bereich „Website-Icon“.
  4. An dieser Stelle kannst du das Favicon einfügen oder das bestehende Bild/Image ändern.
WordPress Favicon ändern
WordPress Favicon ändern

Das Favicon per WordPress-Plugin einfügen

Falls die Möglichkeit über den Customizer nicht funktioniert hat, kannst du dein WordPress Favicon mithilfe eines Plugins einfügen. Ich empfehle dir dafür folgendes Plugin:

Link: Hier gehts zum Plugin

Die Einbindung funktioniert folgendermaßen:

  1. Erstelle ein quadratisches Bild aus deinem Logo mit den Maßen 260 x 260 Pixel (JPG- oder PNG-Datei).
  2. Installiere das gerade genannte Plugin.
  3. Lade die Bilddatei (JPG oder PNG) hoch und binde sie beim WordPress Favicon Plugin ein.

Favicon per FTP-Programm hochladen

Wie schon erwähnt, empfehle ich dir die ersten beiden Varianten. Diese letzte Möglichkeit ist lediglich die Notlösung, falls die anderen beiden Varianten aus welchem Grund auch immer nicht möglich sind.

Dazu öffnest du dein FTP-Programm und stellst die Verbindung mit deinem Webserver her.

Achte darauf, dass der Dateiname des WordPress-Favicons „favicon.ico“ lautet. Danach lädst du die Datei in das Root-Verzeichnis deiner WordPress-Installation. Das war es schon, jetzt ist dein Favicon in WordPress eingebunden.

WordPress Favicon ändern

Du kannst ein bestehendes WordPress Favicon jederzeit ändern. Das macht gerade dann Sinn, wenn du dein Logo geändert hast oder ein Beispiel-Favicon durch das Theme eingefügt wurde.

Das WordPress Favicon kannst du über denselben Weg ändern, wie du auch ein neues einbindest. Erstelle dazu als Erstes die neue Favicon-Grafik. Folgende Formate kannst du verwenden:

  • JPG
  • PNG

Die Änderung kannst du (wie etwas weiter oben beschrieben) über die Theme-Einstellungen oder mit dem Plugin „Favicon by RealFaviconGenerator“ durchführen.

WordPress Favicon testen

Der letzte Schritt besteht darin, das WordPress Favicon zu testen. Dazu solltest du vorab den Cache (Zwischenspeicher) deines Browsers leeren, damit das neue Favicon auch angezeigt wird. Alternativ kannst du bei deinem Browser die Inkognito-Funktion verwenden. Nur, wenn du das machst, wird sich dein Favicon ändern.

Wieso das Branding so wichtig ist

Du hast sicherlich nach diesem Thema gesucht, weil du deine Website oder deinen Blog optimieren oder besser gesagt dein Branding verbessern möchtest. Sobald ein Website-Besucher deine Seite in seinen Lesezeichen speichert, wird im Browser links neben dem Eintrag das Icon dargestellt. Sicherlich kennst du das von Lesezeichen, die du selbst gesetzt hast.

Dadurch erhöhst du den Wiedererkennungswert und die Chance ist groß, dass dieser Besucher deine Website zu einem späteren Zeitpunkt wieder besuchen wird. Das ist übrigens ein wichtiger SEO-Aspekt. Denn wenn ein Besucher deine Website / deinen Blog mehrmals besucht, ist das für Google natürlich ein positives Zeichen.

Bei deinem WordPress Favicon solltest du dich natürlich an deinem Logo und deiner CI (Corporate Identity) orientieren.

FAQ – Häufig gestellte Fragen

Welche Vorteile hat ein Favicon?

Das Favicon erzeugt zusätzliche Aufmerksamkeit in den Browser-Tabs und auch bei den gespeicherten Lesezeichen. Das sorgt für zusätzliches Branding. Ein Favicon ist ein kleines Symbol (16 x 16 oder 32 x 32 Pixel) groß. Dieses wird im Browser links neben dem Titel dargestellt. Außerdem wird es zusätzlich links neben den Lesezeichen gespeichert.

Wie kann ich ein Favicon erstellen?

Dazu gibt es spezielle Online-Favicon-Generatoren. Damit kannst du dein WordPress Favicon sehr einfach und in nur wenigen Minuten erstellen. Am besten verwendest du dein Logo dafür. Viele speichern Websites in den Lesezeichen des Browsers. Dabei wird das Icon neben dem Text dargestellt und sorgt so für zusätzlich Aufmerksamkeit.

Wie binde ich ein Favicon in WordPress ein?

Dazu kannst du entweder die Einstellungen deines Themes oder ein separates Plugin verwenden. Wie das funktioniert, erfährst du auf der Seite WordPress Favicon einfügen.

Wie kann ich in WordPress das Favicon ändern?

Als Erstes solltest du das neue Favicon erstellen. Anschließend kannst du dieses ändern und entsprechend ersetzen. Die bisherige Grafik wurde wahrscheinlich in den Theme-Einstellungen hinterlegt. Alternativ könnte es sein, dass du dafür ein Plugin in Verwendung hast. Prüfe diese beiden Dinge und dann kannst du an der entsprechenden Stelle das WordPress Favicon ändern.

Deine perfekte Website. In Rekordzeit.

60 Minuten Webdesign-Seminar mit Experte Oliver Pfeil