Ein Favicon ist dieses kleine Icon, welches bei vielen Browsern neben dem Titel der aktuell besuchten Seite erscheint. Es hilft den Besuchern dabei, deine Website besser zu erkennen und kann aufgrund des Wiedererkennungswerts Teil deines Brandings werden.
Besonders wenn ein Besucher viele Tabs offen hat, kann ein Favicon bei der Navigation zwischen den Tabs helfen, schnell die richtige Seite zu öffnen.
In diesem Artikel erfährst du, wie du auf deiner WordPress Website ein Favicon einbinden kannst.
Wie kann ich ein Favicon erstellen?
Das entscheidende Kriterium für ein Favicon ist, dass es viereckig ist. Im klassischen Sinn braucht es die Maße 16×16 oder 32×32 Pixel und wird in der Dateiendung favicon.ico abgespeichert.
Für WordPress-Nutzer ab Version 4.3 gibt es aber eine alternative und einfachere Form der Einbindung, die lediglich ein Bild/Logo (.jpg) mit 512×512 Pixel voraussetzt, zumindest aktuell bei den Standard-Wordpress Themes und vielen anderen Themes. Dieses erstellst du mit dem Bildbearbeitungsprogramm deiner Wahl:
Wenn dir Ideen für dein Favicon fehlen, ein Tipp von mir: Nimm einfach den Anfangsbuchstaben deiner Website und füge diesen auf einen Hintergrund (512×512) mit einer zu deiner Website passenden Farbe ein. Abspeichern, fertig. Aber Achtung bei Verwechslungsgefahr zu eingetragenen Markenlogos.
Favicon erstellen Anleitung für WordPress: Schritt für Schritt (zwei Vorschläge)
An dieser Stelle möchte ich dir zwei Vorschläge für die Erstellung eines Favicons geben. Diese Varianten habe ich beide bereits angewendet. Das beste daran, es geht sehr fix!
Klicke dazu einfach auf den Vorschlag, der dich interessiert.
- Öffne Canva
- „Create a design“
- „Use custom dimensions“
- „Background“ –> Farbe wählen
- „Text“ –> Buchstabe mit Schriftart, Schriftgröße (ca. Größe 350) usw. auswählen
- „Download“ –> als .jpg
- Fertig.
- Screenshot von Anfangsbuchstaben auf der Website (Frontend), ungefähr in viereckiger Größe. Tipp: Lass dafür einfach kurz nur den Anfangsbuchstaben etc. bei „Titel der Website“ stehen.
- Screenshot abspeichern als .png oder .jpg
- Favicon Generator öffnen (z.B. favicon-generator.de)
- Screenshot Bild hochladen
- Generiertes Favicon anschauen
- Bei Gefallen herunterladen (Rechtsklick, Speichern unter, Name geben: favicon.ico)
- Fertig.
Favicon einbinden bei vielen WordPress Standard Themes (512×512 Pixel)
Für diese Möglichkeit brauchst du ein .jpg Bild mit den Maßen 512×512 Pixel oder größer. Falls es ein größeres Bild sein sollte, kannst du aber auch in WordPress selbst einen Ausschnitt im gleichen Bildverhältnis auswählen. Wenn du ein Theme wie das WordPress Twenty Sixteen oder auch viele andere benutzt (ich benutze gerade das Theme GeneratePress), findest du die Einstellung wie folgt:
Favicon einbinden über das Wordpress Frontend
… also dort, wo die finalen Beiträge wie ein Besucher siehst:
Den nächsten Schritt siehst du etwas weiter unten.
Favicon einbinden über das Wordpress Backend
… also dort wo du alles einstellen kannst:
Favicon bzw. Icon (512×512) bei „Website-Informationen“ hochladen
Du kommst also sowohl über das Frontend als auch das Backend zum letztendlichen Zielort für dein Favicon bzw. Icon. Wenn du auf Website-Informationen – in der Regel das erste Feld – klickst und etwas nach unten scrollst, kannst du dein Bild (min. 512×512 Pixel) hochladen.
Nachdem du dein Bild hochgeladen und ausgewählt hast, kannst du an dieser Stelle Folgendes sehen:
Jetzt bist du fertig und kannst dich zurücklehnen.
Falls dieses Vorgehen bei dir nicht funktionieren sollte, dann kannst du auch die folgende bzw. klassische Methode probieren.
Klassisches Vorgehen Favicon einbinden (32×32 Pixel)
Bis vor kurzem habe ich noch diese Variante gewählt, um ein Favicon bei WordPress einzubinden. Wenn du einmal weißt, wie es geht, ist es auch nicht wirklich schwieriger. Allerdings brauchst du dafür einen FTP-Zugang für deine Website.
In der Regel reicht dafür Web-FTP bei deinem Hosting-Anbieter oder du nutzt einen Klienten wie FileZilla.
Letztendlich musst du dein Favicon mit den Maßen 16×16 oder 32×32 Pixel mit dem Namen „favicon.ico“ abspeichern und via FTP im Root-Verzeichnis deiner Website hochladen.
In meinem Fall ist es das Verzeichnis /querverstand.de
Im Anschluss musst du in der Regel nur noch deinen Browser aktualisieren und das Favicon erscheint.
Fazit
Ein Favicon kannst du mittlerweile sehr schnell erstellen. Einige Tipps dafür konnte ich dir hoffentlich in diesem Beitrag geben. Das Einbinden geht insbesondere mit dem neueren WordPress und vielen Themes als einfache Bilddatei (512×512 Pixel) für Favicon / Web-Icon super easy.
Bei Premium Themes gibt es meist extra Felder, wo du ein Favicon oder auch Logo etc hochladen kannst. Welche Maße in dem individuellen Fall benötigt werden, stehen in der Regel mit dabei. Für ein klassisches Favicon sind es wie bereits mehrfach erwähnt 16×16 oder 32×32 Pixel mit dem Dateinamen „favicon.ico„.
Bisher habe ich zum Einbinden des Favicons vorwiegend die klassische Variante via FTP gewählt, werde in Zukunft aber bei anderen Websites auch häufiger die integrierte WordPress-Variante wählen.
Wenn dir der Beitrag gefallen hat, kannst du ihn gern teilen oder einen Kommentar hinterlassen.