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, wie du ein Favicon erstellst und 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?
Das Favicon erleichtert das Suchen in der Favoritenliste, dient als Orientierungshilfe in Tabs und hat damit einen Wiedererkennungswert der gesuchten Website. 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 das Logo von WordPress.
Mit einem eigenen Favicon erleichterst du dem Benutzer, deine Website schnell zu finden und stärkst damit deine eigene Marke (Branding). Außerdem sieht es professioneller aus. Das kann wichtig werden, wenn du mit deiner Website Geld verdienen möchtest.
Wie erstelle ich ein Favicon?
Das Favicon wird als Grafik oder Bild in die Website oder das Blog individuell eingebunden.
Das Favicon wird in den Browsern in einer Standardgröße von 16×16 Pixel angezeigt. Früher wurden die Bilder oder Grafiken in einer Größe von 32×32 px erstellt. Heute wird das Favicon auch in anderen Anwendungen verwendet. Es wird eine Größe von 512×512 px empfohlen.
Suche dir ein geeignetes Motiv für dein Favicon aus. Am besten ist ein Logo geeignet. Wenn du kein Logo hast, nimm 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. Schneide das Bild im Format 512×512 px und speichere es im jpg oder png-Format ab.
Alternativ kannst du ein Favicon mit einem Online Tool oder mit einem Plugin erstellen. Es gibt verschiedene Favicon Generatoren z. B. den Favicon Generator von WebsitePlanet oder von favicon.cc.
Favicon einbinden
Du hast verschiedene Möglichkeiten ein Favicon einzubinden.
- mit dem WordPress Customizer
- mit einem Plugin (WordPress)
- manuell (beliebige Website)
Favicon über den WordPress Customizer einbinden
Seit WordPress 4.3 (August 2015) ist es möglich, ein Favicon, ganz ohne Vorkenntnisse direkt in WordPress einzubinden. Du brauchst dazu nur die Rechte als Administrator und eine vorbereitete Grafik oder ein Bild im Format 512×512 px, die über die Mediathek hochgeladen werden. Ein kleines Tutorial Favicon in WordPress einbinden.
Favicon mit einem Plugin einbinden
mit dem Plugin Favicon by RealFaviconGenerator kannst du ein Favicon erstellen und einbinden. Das geht genauso einfach wie mit dem WordPress Customizer, bietet aber noch einige zusätzliche Optionen an. Du kannst damit z. B. Icons für Apps oder für verschiedene Plattformen erstellen.
Favicon manuell einbinden
Diese Methode empfehle ich bei WordPress nicht mehr, da noch ein Codeschnipsel eingefügt werden muss. Erstens benötigst du dazu ein Child-Theme und zweitens solltest du etwas Erfahrung mit HTML haben.
Manuell wird das Favicon über FTP eingebunden. 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.
<link href="favicon.ico" type="image/x-icon" rel="shortcut icon"/>
Anschließend die Dateien per FTP hochladen.
Das Favicon wird in einer Datei dem Namen „favicon.ico“ abgespeichert. Falls dein Grafikprogramm die Endung „ico“ nicht unterstützt, brauchst du zum Umwandeln eine zusätzliche Software z.B. IrfanView für Windows. IrfanView ist eine Freeware zum Anzeigen von Fotos und Grafiken.
Fazit
Es ist schade, wenn du auf ein individuelles Erkennungszeichen deiner Website verzichtest. Die kleinen Bilder haben einen Wiedererkennungswert, den man nicht unterschätzen sollte.
Ein Favicon für die eigene Website zu erstellen und einzubinden ist nicht schwer. Seit es die Möglichkeit gibt, das Favicon über den Customizer in WordPress einzubinden, geht es ganz schnell und kann auch von jedem WordPress Anfänger problemlos durchgeführt werden.
Einfache Einbindung in WordPress
Fotos: © Kristina Marino
