WordPress Favicon: Wie du schnell zu einem Website-Icon für deine WordPress-Seite kommst

WordPress Favicon

Das WordPress Favicon ist der Feinschliff für deine Website. In diesem Tutorial zeige ich dir, wie du ein Favicon zu deiner WordPress-Seite hinzufügst. Ein Favicon ist das kleine Symbol, das auf der Browser-Registerkarte und in Lesezeichenlisten erscheint. Es braucht nicht viel Zeit, um ein Website-Icon einzurichten, und es kann dazu beitragen, dass sich deine Seite von anderen abhebt! Besonders in den mobilen Suchergebnissen.

Du kannst dein Favicon mit einem beliebigen Bildbearbeitungsprogramm selbst erstellen, aber wenn du dir die Mühe nicht machen willst, gibt es einige kleine Tricks, wie du das Ganze wesentlich vereinfachen kannst

Dieses Tutorial hilft dir unabhängig von deinem Theme weiter. Also völlig egal, welches Theme du verwendest. Weiter unten im Artikel findest du aber auch noch zusätzliche Tipps, um ein Favicon in WordPress Themes wie Divi und Astra einzufügen.

Was ist ein Favicon?

Favicons (kurz für „Favoritensymbol“) sind ein winziges grafisches Element, mit dem eine WordPress Website von anderen Lesezeichen unterschieden werden kann. Ein Favicon ist 16px x 16px groß und wird in der URL- und Lesezeichenleiste im Browser angezeigt.

Favicons sind also ein rechteckiges Bild, dass auf deiner Website für den Browser hinterlegt wird. Das gewünschte Bild kann dabei ein vollständig gefüllten oder aber auch einen transparenten Hintergrund haben.

Favicon einer WordPress Webseite
Favicon einer WordPress Webseite

Seit der Veröffentlichung von WordPress 4.3 ist es möglich, “Favicons” zu deiner Website hinzuzufügen.
  
Die Kunst besteht darin, ein WordPress Favicon zu erstellen, bei dem sofort erkennbar ist, dass es zu deiner Website verlinkt, ohne dass es gleichzeitig Systemressourcen beansprucht. Das werden wir in diesem detaillierten Leitfaden behandeln.

Warum solltest du ein Favicon auf deiner Website einfügen?

Auch wenn Favicons bei der Suchmaschinenoptimierung keine große Rolle spielen, ist es schwer vorstellbar, dass jemand eine WordPress-Website erstellt, ohne diesem kleinen Symbol eine hohe Priorität einzuräumen.
 
Das liegt daran, dass dein WordPress Favicon im Grunde dein “Fingerabdruck” ist. Es ermöglicht es, dein Lesezeichen auf den ersten Blick zu erkennen, sorgt für mehr Markenkongruenz und erhöht die Wahrscheinlichkeit, dass Besucher auch mit deiner Website interagieren.
 
Richtig eingesetzt, kann ein Favicon deine Website nicht nur aufwerten, sondern auch dein Branding und deine Sichtbarkeit verbessern.

Das gilt ganz besonders in den mobilen Suchergebnissen, in denen Google das Favicon einer Website direkt an der entsprechenden Stelle neben der Website  anzeigt.

Ein einzigartiges Favicon für hohen Wiedererkennungswert in WordPress erstellen

Auch wenn Favicons winzig sind (16 mal 16 Pixel sind nicht gerade viel Platz), musst du bei ihrer Erstellung sehr sorgfältig vorgehen.
 
Das ist nichts, was du unüberlegt angehen solltest. Es ist etwas, das du wirklich gut durchdenken musst, etwas, das du auf den Punkt bringen willst.
 
Als Erstes solltest du dir überlegen, wie du den verfügbaren Platz nutzen willst. Kleine, einfache, aber optisch ansprechende Favicons sind viel effektiver als solche, die versuchen, zu viel in diese kompakte Fläche zu packen.
 
Auch die Einfachheit ist ein wichtiger Teil des Puzzles. Wenn du wirklich versuchst, einen Großteil deines Markenelements auf diesem kleinen Platz unterzubringen, hast du die meiste Arbeit hinter dir.

Die richtige Größe für dein Favicon

Wie bereits erwähnt, bist du bei der Größe deines Favicons auf 16 x 16 Pixel beschränkt.
 
Alles, was größer ist, wird nicht richtig angezeigt. Bei einer geringeren Größe könnte dein Favicon jedoch falsch skaliert werden – oder es könnte geschrumpft bleiben und du würdest nicht jeden Pixel des verfügbaren Platzes voll ausnutzen.
 
Wenn du dein Favicon entwirfst, solltest du an die Größenbeschränkungen denken. Das ist ein winzig kleines Symbol. Die Details müssen nicht überragend sein – aber es muss sofort als dein WordPress-Fingerabdruck zu erkennen sein.
 

Online-Tools, um dein WordPress Favicon zu erstellen

In den “dunklen Zeiten” der WordPress-Entwicklung (noch vor ein paar Jahren) mussten Favicons von Hand erstellt werden. Meistens mit Tools wie Photoshop, GIMP und Co.
 
Heute ist das nicht mehr der Fall. 

Heute gibt es eine ganze Reihe von Tools, mit denen du die Entwicklung von Favicons abkürzen kannst.
 
Mit Favicon-Generatoren (wie dem Real Favicon Generator) kannst du ein 260 x 260 Pixel großes Bild – ein JPEG, PNG oder SVG – in ein richtig skaliertes Favicon umwandeln, das sofort einsatzbereit ist.

sind nur einige der anderen Tools auf dem Markt, die dir helfen, kostenlos dein eigenes Favicon-Design auf den Weg zu bringen.
 

Schritt für Schritt erklärt: 4 Möglichkeiten, ein Favicon zu deiner WordPress-Seite hinzuzufügen 

Nachdem du dein Favicon erstellt hast, ist es an der Zeit, es auf deiner WordPress Website und in den Lesezeichenleisten deiner Besucher zu platzieren.
 
Im Folgenden findest du eine kurze Übersicht über vier gängige Methoden, um Favicons in deine WordPress-Website einzubinden – und das mit so wenig Aufwand wie nur irgend möglich.

Option 1: Über den WordPress Customizer

Mit dem WordPress Customizer (zu finden in den Design -> Customizer Einstellungen deines WordPress-Administrations-Backends) kannst du in Rekordzeit ein großartiges Favicon erstellen und es auch an der richtigen Stelle hochladen.
 
Das ist zweifellos die schnellste Methode, um ein Favicon auf deiner Website zu platzieren.
 
Beginne mit einem 512 x 512 Pixel großen Bild, das du als Favicon verwenden möchtest. So musst du das eigentliche Bild nicht in das .ICO-Format umwandeln.

Favicon über den WordPress Customizer einstellen
Über den Punkt „Website-Informationen“ im Customizer kannst du dein Favicon einstellen

Gehe durch den WordPress Customizer in deinem administrativen Backend, wähle die Datei, die du verwenden möchtest, unter dem Abschnitt „Website Informationen“ aus und lade dann das eigentliche Bild hoch.
 
Klicke auf “Speichern” und dann auf “Veröffentlichen” – und schon bist du fertig!

Website Icon einrichten
Einrichtung des Website-Icons im WordPress Backend


 
Option 2: Indem du ein Plugin verwendest
 

Es gibt eine Reihe von Plug-ins, mit denen du auch dieses Projekt zum Erfolg führen kannst.
 
Mit dem Favicon Rotator Plug-in wird das Hochladen und Hinzufügen eines Favicons zu deiner WordPress-Installation zum Kinderspiel. Du kannst sogar mehrere Favicons in einer rotierenden Bibliothek hinzufügen und sie jedes Mal austauschen lassen, wenn jemand deine Seite aufruft.

Favicon Plugin für WordPress
Favicon Plugin für WordPress

All in One Favicon ist ein weiteres großartiges Plug-in für WordPress-Nutzer. Es vereinfacht den Prozess erheblich, obwohl es nicht annähernd so schnell ist wie der WordPress Customizer.
 
Weiter unten habe ich noch eine kleine Liste der besten Favicon Plugins für WordPress für dich.


 
Option 3: Dein WordPress Favicon manuell über einen FTP-Client einfügen
 

Natürlich kannst du ein Favicon auch manuell über einen FTP-Client zu deiner WordPress-Installation hinzufügen.
 
Alles, was du dafür tun musst, ist, das Bild, das du als Favicon verwenden möchtest, in das Stammverzeichnis deiner WordPress-Installation hochzuladen.
 
Ändere den Namen der Datei (nachdem du sie hochgeladen hast) in “favicon.ICO” und du bist startklar.


 
Option 4: Hochladen des Favicons über die Optionsseite deines Themes
 

Bei einigen WordPress-Themes kannst du ein Favicon über die Seite mit den Theme-Optionen in deinem Verwaltungs-Dashboard hinzufügen.
 
Um herauszufinden, ob dein Theme über diese Funktion verfügt, logge dich einfach in dein Admin-Panel ein, gehe auf die Seite mit den WordPress-Theme-Optionen und sieh nach, ob es dort eine Option zum Hochladen deines neuen Favicons gibt.
 
Wenn ja, lade die Datei einfach mit diesem Tool hoch, damit dein neues Favicon von nun an auf deiner Website zu sehen ist.


 
Die besten Favicon-Generator-Plugins für WordPress
 

Was die besten Favicon-Generator-Plug-ins angeht, kannst du mit den folgenden Optionen nichts falsch machen:
 
– Fresh Favicon (Funktioniert mit allen gängigen Browsern)
– TWI (bietet viel mehr als nur die Verwaltung von Favicons)
– Real Favicon Generator (Einfache, unkomplizierte und elegante Lösung für Favicons)
 
… Und das ist nur die Spitze des Eisbergs!
 
Die beiden Plug-ins Heroic Favicon Generator und Very Simple Favicon Manager verdienen ebenfalls eine lobende Erwähnung.


 
So änderst du das Favicon im WordPress Astra Theme

 
Um das Favicon im WordPress Astra-Theme zu ändern, musst du nur die folgenden Schritte ausführen:
 
Bereite zunächst die Bilddatei vor, die du als Favicon verwenden möchtest. Achte darauf, dass sie 512 x 512 Pixel groß ist.
 
Logge dich in dein WordPress Dashboard ein und navigiere dann zum Bereich Design -> Customizer. Gehe nun in den Bereich Header -> Website Informationen.
 
Klicke in diesem Backend im Abschnitt „Website-Icon“ auf „Bild auswählen“ und wähle das Bild aus, das du als dein neues Favicon verwenden möchtest.
 
Das war’s, du bist startklar!


 
So änderst du das Favicon im Divi-Theme
 

Das Favicon im WordPress-Theme Divi zu ändern, ist ebenfalls ziemlich einfach.
 
Du musst dazu den THEME CUSTOMIZER in deinem WordPress-Backend verwenden.
 
Logge dich zunächst in dein administratives Dashboard ein und gehe dann in den Bereich Divi Theme Options auf der Plattform.
 
Navigiere zu „Theme Customizer“ – „Allgemeine Einstellungen“ – „Website Informationen“ in den Theme-Optionen. Klicke auf die Einstellungen „Website-Icon“ oder „Design“, um die Option zum Hochladen des Favicon-Bildes zu finden.
 
Jetzt musst du das Favicon auswählen, das du verwenden möchtest. Achte nur darauf, dass es 512 x 512 Pixel groß ist und im ICO-, PNG- oder JPG-Format vorliegt.
 
Lade das Bild hoch und lass die Magie von WordPress den Rest der Arbeit für dich erledigen. Klicke auf die Schaltfläche „Veröffentlichen“ ganz unten auf dieser Seite und schon ist dein neues Favicon online!

Schreibe einen Kommentar