In WordPress ein Favicon einbinden, das ist eigentlich gar nicht so schwer. Seit WordPress 4.3 bieten Themes diese Option sogar im Rahmen Anpassen-Optionen an. Noch besser ist aber, dass diese Anpassung Theme übergreifend funktioniert. Mit anderen Worten: Wenn Sie wie ich öfter mal neue Themes ausprobieren, bleibt die Information, welches Bildchen für Ihre Website steht, erhalten. Vor gar nicht so langer Zeit musste man dies jedes Mal neu hinterlegen – oder die Lösung gar mittels eines Plugins anstreben. Bleibt nun also nur noch die Frage: Wie sieht ein gutes Favicon aus?
Was ist ein Favicon?
Ein Favicon ist eigentlich ein sehr kleines Bildchen, das Browser neben dem Titel der Seite (oder des Beitrags) oben im Tab oder zum Beispiel auch als Lesezeichen anzeigen. Der Internet Explorer gibt es sogar in der Adresszeile links neben der URL aus. Sehr klein meint dabei übrigens wirklich sehr klein: Ganze 16 x 16 Pixel (bestenfalls 32 x 32 Pixel) stehen zur Verfügung. Viel Information passt da nicht rein. Vor allem passt keine Information hinein, die wesentlich breiter als hoch (oder auch: wesentlich höher als breit) ist. Ein Favicon ist auf jeden Fall quadratisch. Also muss auch das, was es zeigt, quadratisch sein.
Favicon als Website Icon
Nun gibt es aber auch andere Einsatzorte für ein Favicon, nämlich die des App Icons. App Icons sind jene Bildchen, die zum Beispiel erscheinen, wenn Sie eine Verknüpfung Ihrer Website auf Ihr Desktop legen. Sie erscheinen aber auch auf mobilen Geräten und können um einiges größer sein als die winzigen 16 x 16 Pixel. Deshalb erwartet WordPress mittlerweile (sprich: seit Version 4.3) ein sogenanntes Website Icon von mindestens 512 x 512 Pixeln. Das ändert aber nichts an der Tatsache, dass das Bild als solches auch in winzig funktionieren muss. Der Platz neben dem Seitentitel im Browser Tab ist deswegen nicht größer geworden.
Immerhin brauchen Sie nur eine einzige Datei, die als Website Icon an allen Stellen Anwendung finden kann. Es ist nicht nötig, für unterschiedliche Einsatzorte unterschiedliche Dateien mit unterschiedlichen Größen zu erstellen. Allerdings sollte Ihr Favicon auf jeden Fall einen transparenten Hintergrund haben. Vielleicht ist Ihr Logo an sich nicht quadratisch, sondern wie unseres rund. Es sollte also innerhalb des quadratischen Bereiches nur den farbig gestalten, den es auch einnimmt.
Wenn Sie also eine Idee für ein Bild haben, das von gleicher Höhe und Breite auch sehr klein funktioniert, erstellen Sie es mit dem Bildbearbeitungsprogramm Ihrer Wahl in der Größe 512 x 512 Pixel und speichern Sie es als favicon.png ab. Denn im Gegensatz zu .jpg kann .png mit einem transparenten Hintergrund arbeiten.
Wie soll ich in WordPress das Favicon einbinden?
Grundsätzlich gibt es zwei Möglichkeiten, Ihr neues Favicon in WordPress einzubinden: Sie nutzen die Option Ihres Themes, ein Website Icon hochzuladen. Oder Sie erledigen die Aufgabe nach althergebrachter Art und binden es manuell in die header.php Ihres aktiven Themes ein.
Kleiner Exkurs in die Historie
Seit jeher Browser verstehen .ico als das Dateiformat für Favicons. Sie erkennen es sogar automatisch, wenn es mit der Bezeichnung favicon.ico im Stammverzeichnis der Domain liegt. Will man es anders nennen oder auch an einem anderen Ort speichern, braucht es eine Angabe in der header.php des aktiven Themes:
<link rel="shortcut icon" type="image/x-icon" href="Pfad zu der Favicon-Datei">
Es gibt allerdings gute Gründe, heutzutage auf dieses Vorgehen zu verzichten. Einer der geringsten ist, dass nicht jedes Bildbearbeitungsprogramm eine .ico-Datei erstellen kann. Gimp ist ein Kandidat, der dieses Format produzieren kann. Auch gibt es Favicon Generatoren, mit denen Sie die Aufgabe online erledigen können. Ein weiterer ist, dass Sie damit abhängig vom aktiven Theme sind, sprich: Bei einem Theme-Wechsel müssten Sie die Angabe in die header.php des neuen Themes übertragen. Außerdem funktioniert das Ganze sowieso nur updatesicher im Rahmen eines Child Themes.
Richtig übel wird es, wenn Browser sich von Ihrer klebrigen Seite zeigen. Google Chrome ist nur schwer dazu zu bringen, einen Favicon-Wechsel zu akzeptieren. Gerne zeigt Chrome noch Favicons, die lange schon nicht mehr auf dem Server existieren. Da nützt es auch nichts, den Cache zu löschen, da Chrome Favicons hier gar nicht speichert (es gibt hierfür eine eigene, versteckte Datei). Und für App Icons eignet sich das Vorgehen schließlich auch nicht, denn die wollen .png-Dateien, die man bei diesem Vorgehen eigens erstellen und anbieten müsste.
Das Favicon einbinden über Design > Anpassen Ihres Themes
Seit der WordPress Version 4.3 bieten Themes die Möglichkeit des Einbindens von Favicons im Rahmen von Design > Anpassen. Meist finden Sie die Option unter Website-Informationen. Einige Themes sortiert sie jedoch anders ein, zum Beispiel unter Site Logo. So oder so: Über das Hochladen Ihres Favicons als Website Icon in die Mediathek haben Sie die Aufgabe mit nur wenigen Klicks erledigt. Und dieses Vorgehen überzeugt sogar so hartnäckige Kandidaten wie Google Chrome.
Deshalb: Danke, liebe WordPress Community, für diese äußerst sinnvolle Erweiterung!
Beitragsbild: Britta Kretschmer
Schreibe einen Kommentar