Sie sind hier: Home

Favicon im HTML-Code

Bei der Integration von Favicons in eine Internetseite stellt sich die Frage an welcher Stelle diese erfolgen sollte. Eine Möglichkeit ist das Einbetten der Bilddaten im HTML-Code. Aber diese Vorgehensweise hat auch seinen Nachteil.

Eine Einbettung eines Favicons kann auf zwei unterschiedliche Arten erfolgen. Zum Einen kann die Symbolgraphik direkt als Inline-Bild im HTML-Code der Internetseite eingebaut werden. Die zweite Möglichkeit besteht darin, das Icon mittels eines Stylesheets auszuliefern. Dabei wird das Favicon als Hintergrundgraphik im ohnehin abzurufenden Stylesheet der Website eingebettet, wodurch es auch gleich im Browsercache landet.

Der folgende Code-Abschnitt zeigt, wie die Integration im HTML-Dokument realisiert werden kann. Damit auch betagtere Versionen des Internet Explorer das Favicon darstellen ist wieder einmal eine Sonderbehandlung für den Browser nötig. Da IEs vor der aktuellen 8er-Version eingebettete Bilddaten nicht verarbeiten können – andererseits aber alle Seitenbesucher das Icon zu Gesicht bekommen sollen – lässt sich diese Extrawurst wie so oft leider nicht vermeiden.

<html>
    <head>
      ...
      <link rel="shortcut icon" href="data:image/x-icon;base64,<Daten>" type="image/x-icon" />
      
      ...
    </head>
    ...
  </html>

Grundsätzlich muss ein auf der Internetseite zu nutzendes Favicon – egal ob eingebettet oder extern verlinkt – im Head-Bereich der HTML-Seite angegeben werden. Im oben angegebenen (vereinfachten) Gerüst einer HTML-Datei steht sowohl der Code für ein extern verlinktes, als auch der eines eingebetteten Favicon. Die obere Angabe des Link-Tags steht für eine eingebettete Icon-Graphik, die im für Favicons vorgesehenen Dateiformat angegeben ist.

Ein Favicon wird für den Browser als solches kenntlich gemacht, indem man im Attribut REL das String „shortcut icon” angibt. Das HREF-Attribut des Link-Tags liefert dem Webbrowser die Information, wo das Icon abgelegt ist. Wie bei der Einbettung von Bildern üblich, wird dem Browser durch die Zeichenkette data: mitgeteilt, dass es sich bei den folgenden Angaben um direkt eingebettete Bilddaten handelt.

Nach dieser Einleitung folgt der vom Browser anzunehmende Dateityp, in dem die später folgenden Bilddaten gehalten sind („image/x-icon” für das ICO-Format). Darauf folgen dann, eingeleitet durch die Zeichekette „base64,”, die eigentlichen Bilddaten – angedeutet durch <Daten> –, die zuvor per Base64-Kodierung auf einen ASCII-Zeichensatz heruntergebrochen wurden. Darüber hinaus sollte im Type-Attribut des Link-Tags nochmals der Typ der Graphikdatei angegeben werden.

Durch den mittels Conditional-Comment eingeschlossenen zweiten Link-Tag werden auch ältere IEs dazu gebracht das Favicon darzustellen, indem die Datei extern verlinkt wird. Dieses HTML-Tag wird ausschließlich durch IEs mit Versionen unterhalb von 8 beachtet, während alle anderen Browser direkt das eingebettet Icon verwenden und sich das Nachladen der externen Datei sparen. Der einzige Unterschied zwischen diesen Anweisungen besteht also in den Angaben bezüglich des HREF-Attributs.

Seite 2 von 3 | « [1] • [2] • [3] »