Einbinden eines Favicons in eine Webseite

0

Bei einem Favicon handelt es sich um ein kleines 16 Pixel x 16 Pixel großes Bild, das in der Adressleiste des Browsers angezeigt wird. Es steigert den Wiedererkennungswert einer Webseite und hilft dem User beispielsweise, die Seite in seinen Lesezeichen wiederzufinden.
Im Folgenden werde ich drei verschiedene Möglichkeiten betrachten, wie ein Favicon zu einer Webseite hinzugefügt werden kann.

1) Hinzufügen über den Dokumentenheader

Üblicherweise wird das Favicon innerhalb des Dokumentenheaders mithilfe des nachfolgenden HTML-Codes zu einer Webseite hinzugefügt. Das href Attribut zeigt dabei auf den Speicherort der im .ico-Format vorliegenden Bilddatei. Diese Lösung funktioniert auch außerhalb von WordPress, da keine WordPress-spezifischen Funktionen verwendet werden. Wird diese Möglichkeit in einem WordPress-Theme angewendet, müssen die Anpassungen in der header.php des Themes vorgenommen werden.

<link href="pfad/zum/favicon.ico" rel="shortcut icon" />

2) Favicon im Root-Verzeichnis

Eine einfachere Möglichkeit besteht darin, das Favicon im Root-Verzeichnis, also der obersten Verzeichnisebene der Webseite, zu speichern. Denn dann erkennen zumindest neuere Browser das Favicon automatisch und fügen es den entsprechenden Seiten hinzu. Ein entsprechender Verweis innerhalb des Headers entfällt.

3) Hinzufügen über die WordPress-Funktionsdatei

Mehr Kontrolle über die Anzeige des Favicons bietet die Möglichkeit, die ich im Folgenden vorstellen möchte. Hierzu muss die Datei functions.php des aktuellen Themes um unten stehende Funktion erweitert werden. Diese macht zunächst nichts anderes als die zu Beginn vorgestellte Lösung über die Anpassung des Dokumentenheaders, jedoch wird das Favicon dabei nicht nur zum Frontend der Webseite, sondern auch zum Admin-Panel und zur Login-Seite hinzugefügt.

//Favicon für Frontend und Backend hinzufügen
function LB_favicon() {
	$favicon = 'pfad/zum/favicon.ico';	
	echo '<link href="' . $favicon . '" rel="shortcut icon" />';
}
add_action( 'admin_head', 'LB_favicon' );
add_action( 'login_head', 'LB_favicon' );
add_action( 'wp_head', 'LB_favicon' );

Die oben vorgestellte Lösung ist nicht nur elegant, sondern bietet auch noch weitere Möglichkeiten zur Anpassung der Darstellung von Favicons auf den verschiedenen Seiten. So ist es problemlos möglich, für jede der Seiten ein eigenes Favicon zu erstellen. Benötigt werden drei Bilddateien, deren Pfad jeweils in den Funktionen angegeben wird. Die entsprechenden Funktionen sähen dann folgendermaßen aus.

function LB_favicon_frontend() {
	$favicon = 'pfad/zum/frontend_favicon.ico';	
	echo '<link href="' . $favicon . '" rel="shortcut icon" />';
}
add_action( 'wp_head', 'LB_favicon_frontend' );

function LB_favicon_admin() {
	$favicon = 'pfad/zum/admin_favicon.ico';	
	echo '<link href="' . $favicon . '" rel="shortcut icon" />';
}
add_action( 'admin_head', 'LB_favicon_admin' );

function LB_favicon_login() {
	$favicon = 'pfad/zum/login_favicon.ico';	
	echo '<link href="' . $favicon . '" rel="shortcut icon" />';
}
add_action( 'login_head', 'LB_favicon_login' );

4) Fazit

Es ergeben sich viele Möglichkeiten, ein Favicon zu einer Webseite hinzufügen. Dabei hat jede der Lösungen Vor- und Nachteile, Nutzern von WordPress empfehle ich auf jeden Fall die Verwendung der letzten Lösung, da sie elegant und flexibel ist.

Abschließend noch ein Hinweis zum Testen des Codes. Nach dem Hinzufügen des Favicons muss zunächst der Cache des Browsers gelöscht werden, ansonsten wird das Favicon (vor allem bei der zweiten Möglichkeit) nicht angezeigt.

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Zu diesem Artikel sind bisher keine freigegebenen Kommentare vorhanden.