Eigenes Favicon in WordPress einbinden: so geht’s!

Das Favicon ist ein kleines Icon, welches im Browsertab oder -fenster links vor dem Titel oder der URL der aufgerufenen Website erscheint. Zudem sieht man es auch in den Lesezeichen. Das Favicon liegt meist im ICO-Format vor und ist 16×16 oder 32×32 Pixel groß. Moderne Browser unterstützen mittlerweile auch die Dateiformate .png und .gif.

Es dient dazu, die Website von anderen leichter unterscheidbar zu machen und erhöht den Wiedererkennungswert. In den Lesezeichen findet man die Website zudem schneller, wenn man das Favicon kennt. Daher hat inzwischen nahezu jede Website ein individuelles Favicon.

Eine Anleitung, wie man eines in WordPress einfügt, folgt nun:

Icon in passendes Format konvertieren

Es gibt gute Dienste im Netz, um sich ein eigenes Favicon zu generieren

Zuerst konvertiert man das Logo oder die Grafik die man als Favicon haben möchte, in ein passendes Format. Hierfür eignet sich u. a. der Dienst iConvert Icons in der Online-Version. Nachdem man die Grafik hochgeladen und konvertiert hat, wird die Datei in den gängigen Formaten und Größen angezeigt und man kann sich das zukünftige Favicon im Wunschformat herunterladen. Die Besten Ergebnisse erzielt man, wenn die Ausgangsdatei bereits quadratisch ist.

Ins root-Verzeichnis laden und einbinden

Nun lädt man das Favicon in das Wurzelverzeichnis von WordPress hoch. Dann muss folgender Code in der header.php des verwendeten Themes gleich nach dem öffnenden <head>-Tag eingefügt werden:

<link rel="shortcut icon" href="<?php echo site_url(); ?>/favicon.ico" />

Falls der Dateiname des Favicons von o. g. Code abweicht, muss dieser natürlich noch angepasst werden. Nach dem Speichern kann man im Browser kontrollieren, ob das Ganze auch greift. Im Seitenquelltext müsste nun ein Link zum Favicon mit absoluter URL ausgegeben werden. Das sieht etwa so aus:

So wird das Favicon im Quelltext aufgerufen

Es kann sein, dass man den Browsercache (und den Cache von WordPress) leeren muss, bis das Icon im Browser angezeigt wird. Ist das Lesezeichen für die Website bereits gesetzt, sollte man es noch einmal neu setzen, um das neue Favicon zu laden.

Mit wenigen Schritten hat man nun den Wiedererkennungswert der eigenen Website erhöht.