Favicon im Stylesheet
Anders als bei der Einbettung im HTML-Code kann bei der Integration des Favicon-Bildes im Stylesheet einer Homepage der Browsercache zum Zuge kommen, wenn weitere Seiten abgerufen werden. Dabei unterscheidet sich diese Lösung kaum von der HTML-Variante.
Nun hat aber die direkte Einbettung eines Favicons im HTML-Code der Internetseite einen entscheidenden Nachteil: Bei jedem einzelnen Seitenaufruf werden die Bilddaten für das Favicon erneut an den Webbrowser des Seitenbesuchers übertragen. So entsteht, bei jedem Folgeaufruf einer weiteren Seite der Website, unnötigerweise zusätzlicher Traffic, der mittels externer Speicherung vermieden werden kann.
Das liegt daran, dass eine extern abgelegte Favicon-Datei nach deren Download im Browsercache abgelegt wird und bei Folgeaufrufen wiederum aus diesem Cache entnommen wird. Während die erste Seite also – aufgrund der Einsparung seitens der HTTP-Requests – schneller beim Client landet, dauert jeder weitere Seitenaufruf etwas länger, da die Daten für das Icon noch einmal übertragen werden. Verwendet die Website ein externes Stylesheet, kann dieses genutzt werden um hier Abhilfe zu schaffen.
Dazu werden einfach die Bilddaten des Favicons in das Stylesheet der Website integriert. Dabei wird die CSS-Datei bei Folgeaufrufen aus dem Browsercache gelesen, die Bilddaten also nur einmal – nämlich zusammen mit dem ohnehin benötigten Stylesheet beim ersten Seitenaufruf – herunter geladen. Im Falle einer Auslagerung im Stylesheet empfiehlt es sich übrigens, die Style-Angaben mitsamt der Bildinformationen in gepackter Form auszuliefern. Handelt es sich um eine statische Stylesheet-Datei, so können die dort gespeicherten Bilddaten des Icons sogar direkt in komprimierter Form auf dem Webserver abgelegt werden.
Mittels entsprechender Angaben in der .htaccess-Datei wird bei der Anfrage an den Webserver entschieden, ob das Stylesheet gepackt oder ungepackt ausgeliefert werden soll. Unterstützt der Browser den Empfang gepackter Daten, so fällt auch weniger Traffic an und der Dowload geht zügiger voran. Dies wirkt sich positiv auf die Website Performance aus: Schließlich muss der Webserver die Daten nicht bei jeder Anfrage des Stylesheets vor der Übertragung packen, sondern kann sich statt dessen um die Beantwortung anderer Anfragen kümmern.
Das hier angegebene Beispiel besteht aus einer HTML-Datei und einem Stylesheet. Im auf diesen Absatz folgenden Stylesheet stehen – neben den anderen für die Formatierung der Website nötigen Style-Angaben – die Bilddaten, die als Hintergrund für das Link-Element mit der ID „icon” verwendet werden sollen.
link#icon {
background-image:url("data:image/x-icon;base64,<Daten>");
}
...
Die Einbettung funktioniert ähnlich wie beim vorherigen HTML-Beispiel. Im Prinzip steht das, was bei einer HTML-Einbettung im HREF-Attribut abgelegt war, hier nur in der Eigenschaft Background-Image des Stylesheets. Folgender Abschnitt gibt ein vereinfachtes Grundgerüst der HTML-Datei an:
<head>
...
<link id="icon" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="/style.css" />
<!--[if lt IE 8]>
<style type="text/css">
link#icon { background-image:url("/favicon.ico"); }
</style>
<![endif]-->
...
</head>
<body>
...
</body>
</html>
Das Link-Element wird im HTML-Code ohne HREF-Attribut definiert und zugleich mittels dem ID-Attibut unter der ID „icon” eindeutig identifizierbar. Dann wird das externe Stylesheet eingebunden und damit auch die dort enthaltenen Bilddaten. Der Conditional-Comment ist wieder nur für IEs vor Version 8 und enthält das von diesen Browsern benötigte alternative Stylesheet, welches einen Link zur extern gespeicherten Favicon-Datei enthält. Wichtig ist, dass dieser Abschnitt nach dem extern eingebundenen Stylesheet steht, da die Werte sonst überschrieben werden.