Wer kennt sie nicht? Die kleinen Bilder oder Grafiken, die in den Tabs des Browsers neben dem Namen der Website angezeigt werden. Diese Grafiken werden als Favicon bezeichnet. In diesem Beitrag erfährst du, warum es wichtig ist, ein eigenes Favicon zu haben. Ich erkläre dir, wie du ganz einfach und schnell ein Favicon in WordPress einbinden kannst.
Was ist ein Favicon?
Als Favicon werden die kleinen Symbole neben dem Namen der Website in den Tabs der Browser bezeichnet. Ein Favicon ist ein Akronym für „favorite icon“. Das Favicon wird in der Datei „favicon.ico“ hinterlegt. Die genaue Definition von Favicon kannst du bei Wikipedia nachlesen.
Seit der WordPress-Version 5.4 erscheint bei jeder WordPress-Installation, in der die Datei „favicon. ico“ fehlt, automatisch das WordPress-Logo.
Warum ist es wichtig ein eigenes Favicon zu haben?
Ein Favicon stärkt den Wiedererkennungswert der besuchten Website und erleichtert das Suchen in der Favoritenliste. Es dient als Orientierungshilfe in Tabs. Wenn du, wie ich viele Tabs gleichzeitig im Browser offen hast, verschwindet nach und nach der Name der Website. Womöglich siehst du dann nur noch die Logos von WordPress.
Mit einem eigenen Favicon stärkst du deine eigene Marke (Branding) und die Webseite sieht professioneller aus. Das kann wichtig werden, wenn du mit deiner Website Geld verdienen möchtest.
Das Favicon soll ein Hingucker sein, der sofort signalisiert, wessen Website das ist. Denk an die Logos bekannter Marken. Wenn du kein Logo hast, dann suche dir ein geeignetes Motiv für dein Favicon aus. Finde ein Bild oder ein Symbol, das zu deinem Thema passt. Denke daran, dass die Grafik sehr klein und quadratisch ist und einen Wiedererkennungswert haben soll.
Wie erstelle ich ein Favicon?
Erstelle zunächst eine Grafik oder ein Bild. Beachte, dass ein Favicon immer quadratisch ist und im kleinen Format gut aussehen soll. Das Favicon wird in den Browsern in einer Standardgröße von 16 x 16 Pixel angezeigt. Für das Bild wird eine Größe von 512 x 512 px empfohlen, da das Favicon heute auch in anderen Anwendungen verwendet wird. Schneide das Bild entsprechend zu. Um später keine unliebsame Überraschung zu erleben, solltest du dir das Bild in der fertigen Größe 16 x 16 px anschauen. Speichere das Bild als jpg oder png ab.
Favicon in WordPress einbinden
Du hast verschiedene Möglichkeiten das Favicon einzubinden.
- über das Theme mit dem WordPress Customizer
- mit einem Plugin (WordPress)
- manuell mit FTP (beliebige Website)
Favicon über das Theme mit dem WordPress Customizer einbinden
Wenn dein Theme das Einbinden eines Favicons unterstützt, wird das entsprechende Bild in die Mediathek hochgeladen. Klicke dann unter dem Punkt Design auf Customizer. Es öffnet sich ein neues Menü. In meinem Theme kann ich unter Website-Informationen mein Favicon einrichten. Das Favicon wird beim nächsten Aktualisieren der Website im Browser angezeigt. (Eventuell Cache löschen)
Favicon mit einem Plugin in WordPress einbinden
Einfach und schnell wird das Favicon mit dem kostenlosen Plugin Favicon by RealFaviconGenerator erstellt und eingebunden. Du brauchst nur das vorbereitete Bild hochladen und der Anleitung des Plugins folgen.
Das Plugin bietet noch einige zusätzliche Optionen an. Du kannst damit z. B. Icons für Apps oder für verschiedene Plattformen erstellen.
Favicon manuell mit FTP einbinden
Für Anfänger ist diese Methode nicht geeignet. Zum manuellen Einbinden über FTP solltest du etwas Erfahrung mit HTML haben. Weitere Voraussetzung ist ein Child-Theme, da noch ein Codeschnipsel eingefügt werden muss.
Zum Einbinden des Favicons wird eine Datei mit dem Namen „favicon.ico“ benötigt. Falls dein Grafikprogramm die Endung „ico“ nicht unterstützt, brauchst du zum Umwandeln eine zusätzliche Software oder einen Favicon Generator z. B. Favicon Generator von Website Planet.
Damit das Icon sichtbar wird, muss es im Root-Verzeichnis (Wurzelverzeichnis) deiner Website als „favicon.ico“ abgespeichert werden. Damit das Icon in allen Browsern und Anwendungen sichtbar wird, musst du noch zusätzlich ein Codeschnipsel im <head> – Bereich deiner Dateien einbinden und anschließend die Dateien per FTP hochladen.
<link href="favicon.ico" type="image/x-icon" rel="shortcut icon"/>
Fazit
Ein Favicon für die eigene Website zu erstellen und einzubinden ist nicht schwer. Es ist eine einfache und schnelle Möglichkeit, sich einen Wiedererkennungswert zu schaffen. Durch das Favicon wird die Webseite besser wahrgenommen, sie sieht professioneller aus und schafft Vertrauen bei Leser*innen. Es wäre schade, eine wirkungsvolle Marketingmaßnahme zu verschenken. Die kleinen Bilder haben einen Wiedererkennungswert, den man nicht unterschätzen sollte.
Dieser Beitrag erschien zuerst auf meinem Blog Bloggen mit Konzept, der inzwischen geschlossen wurde. Der Beitrag wurde überarbeitet und neu veröffentlicht.
