Favicon für HTML-Seiten

Das Standard-Icon für Websites ist favicon.ico und als Entwickler von Websites musste man sich früher nur mit dieser Datei begnügen, die im Format .ico in der Größe 16 x 16 Pixeln vorliegen musste und im Wurzelverzeichnis der Website abgelegt wurde. Mittlerweile hat man mehr Auswahlmöglichkeiten und das Standard-Favicon kann z.B. auch in den Formaten .gif oder .png vorliegen. Allerdings muss man in diesen Fällen im HEAD-Bereich der Webseiten gewisse Angaben machen.

Für weitere Geräte bzw. Systeme können zusätzliche Icons bereitgestellt werden. Diese müssen häufig in einer anderen Größe und Dateiformat vorliegen und anders benannt werden. Die Geräte- und Systemvielfalt hat soweit zugenommen, dass ein Standard-Favicon mit der geringen Größe nicht mehr ausreicht. Möchte man die Geräte- und Systemvielfalt nicht berücksichtigen, so sollte man zumindest das Standard-Favicon bereitstellen, das im Dateiformat .ico, .gif oder .png vorliegen kann.

Das Standard-Favicon kann, außer beim Internet Explorer 6 - 10, in verschiedenen Formaten bereitgestellt werden. Beim Dateityp kann man sich für eins aus den folgenden drei genannten entscheiden.

• Dateityp .ico, z.B. favicon.ico in der Größe 16 x 16 oder 32 x 32 Pixeln (im IE 6 - 10 nur Dateityp .ico möglich).
• Dateityp .gif, z.B. favicon.gif in der Größe 16 x 16 Pixeln.
• Dateityp .png, z.B. favicon.png in der Größe 16 x 16 Pixeln.

Entscheidet man sich für den Dateityp .ico und ist der Dateiname favicon.ico, braucht man die Datei nur im Wurzelverzeichnis der Website abzulegen. Die Browser rufen die Datei in der Regel automatisch beim Aufruf einer Webseite vom Wurzelverzeichnis ab. Es sind in diesem Fall keine Angaben im HEAD-Bereich notwendig und es ist auch zu empfehlen, in solchen Fällen keine Angaben im HEAD-Bereich zu machen, damit evtl. Konflikte mit bestimmten Browsern, die ein anderes Favicon anzeigen sollen, vermieden werden.

Hat man jedoch die Datei anders benannt oder liegt die Datei nicht im Wurzelverzeichnis, sondern in einem Unterordner, dann muss man das im HEAD-Bereich angeben, selbst wenn der Dateityp .ico ist. Möchte man ein Favicon vom Dateityp .gif oder .png, dann muss im HEAD-Bereich ebenfalls ein Eintrag dazu erfolgen.

Ein Eintrag im HEAD-Bereich erfolgt über den LINK-Tag, der mit folgenden Attributen versehen wird.

• Die Pfadangabe zum Favicon mit href="...". Als Wert fügt man einen absoluten oder relativen Pfad zur Datei ein.
• Der Dateityp mit type="...". Ist beim Dateityp .ico nicht unbedingt notwendig.

Für den Dateityp trägt man innerhalb von type="..." folgende Werte ein.

• Beim Dateityp .ico: image/vnd.microsoft.icon.
• Beim Dateityp .gif: image/gif.
• Beim Dateityp .png: image/png.

Beim Dateityp wird auch häufig image/x-icon angegeben, was zwar in der Regel bei den Browsern funktioniert, jedoch gemäß IANA nicht der offizielle MIME-Type für das Dateiformat .ico ist.

Neben den Attributen href="..." und type="..." wird das Attribut rel="..." benötigt, mit dem angegeben wird, dass ein Icon geladen werden soll. Dabei sind folgende Werte möglich.

• Für den IE: rel="shortcut icon" (zumindest bis IE 11).
• Für sonstige Browser: rel="icon".

Neben dem Standard-Favicon hat man die Möglichkeit, für bestimmte Systeme Browser Favicons in anderen Größen und Dateiformaten bereitzustellen, z.B. favicon-96x96.png (dazu weiter unten mehr). Es müssen somit viele Konstellationen berücksichtigt werden. Nachfolgend einige Möglichkeiten.

Möglichkeit 1

• Der Dateityp ist .ico.
• Der Dateiname ist favicon.ico.
• Die Datei befindet sich im Wurzelverzeichnis der Website.

Das ist eine empfehlenswerte Variante. In dem Fall braucht man keinen Eintrag im HEAD-Bereich und dadurch gibt es keine Konflikte mit Favicons in anderen Größen, für die Einträge im HEAD-Bereich erfolgen würden.

Möglichkeit 2

• Der Dateityp ist .ico.
• Der Dateiname ist favicon.ico (oder auch anders).
• Die Datei befindet sich nicht im Wurzelverzeichnis der Website.

Das ist keine empfehlenswerte Variante. Jedoch kann es manchmal durchaus notwendig sein, wenn z.B. das zugrunde liegende CMS einen bestimmten Ordner für Favicons vorsieht und diese Einstellung sich nicht ändern lässt. In dem Fall benötigt man zwei Einträge im HEAD-Bereich, da der IE (zumindest in der Vergangenheit) nur das Attribut rel="shortcut icon" akzeptiert, manche anderen Browser nur rel="icon" und manche Browser akzeptieren wiederum beide Varianten und bei Vorhandensein beider Einträge ignorieren sie das Attribut rel="icon". Ein Beispielcode für beide Einträge wäre wie folgt.

In XHTML ist zu beachten, vor der schließenden Klammer den Trailing-Slash mit " /> anzugeben. Würde sich die Datei im Wurzelverzeichnis befinden, dafür die Datei nicht favicon.ico benannt werden, würde sich an dieser Stelle nichts ändern und man bräuchte ebenfalls beide Einträge.

Möglichkeit 3

• Der Dateityp für den IE soll .ico sein, da der IE 6 - 10 nur diesen Dateityp berücksichtigt.
• Der Dateiname für den IE ist favicon.ico.
• Die Datei favicon.ico befindet sich im Wurzelverzeichnis der Website.
• Der Dateityp für andere Browser ist nicht .ico, sondern .gif oder .png.
• Der Dateiname für die übrigen Browser kann beliebig sein, z.B. favicon-16x16.png.

In dem Fall ist der Speicherort der Datei favicon-16x16.png unerheblich. Es muss auf jeden Fall ein Eintrag im HEAD-Bereich hierfür erfolgen. Für die Datei favicon.ico ist ein Eintrag jedoch nicht empfehlenswert und auch nicht notwendig. Denn, der IE würde die Datei automatisch abrufen, da es favicon.ico heißt und sich im Wurzelverzeichnis befindet.  Im HEAD-Bereich würde somit lediglich folgender Eintrag vorgenommen werden.

Würde man nämlich bei dieser Konstellation unnötigerweise einen Eintrag mit rel="shortcut icon" für favicon.ico vornehmen, würden manche Browser den Eintrag mit rel="icon" für die Datei favicon-16x16.png ignorieren und die Datei favicon.ico anzeigen.

Möglichkeit 4

• Der Dateityp für den IE soll .ico sein, da der IE 6 - 10 nur diesen Dateityp berücksichtigt.
• Der Dateiname für den IE ist entweder nicht favicon.ico...
• ...oder, die Datei favicon.ico befindet sich nicht im Wurzelverzeichnis der Website.
• Der Dateityp für andere Browser ist nicht .ico, sondern .gif oder .png.
• Der Dateiname kann beliebig sein, z.B. favicon-16x16.png.

Das ist eine sehr ungünstige Konstellation. Denn, in dem Fall müssten sowohl für den IE, als auch für die anderen Browser Einträge im HEAD-Bereich erfolgen. Der Code wäre z.B. wie folgt.

Der Code hätte zur Folge, dass manche Browser den Eintrag mit rel="icon" ignorieren und somit die Datei mit dem Format .ico anzeigen. Um zu verhindern, dass diese Browser den Eintrag mit rel="shortcut icon" berücksichtigen, kann man diese Zeile in einem Kommentar setzen und eine Abfrage für den IE implementieren. Der Code wäre dann wie folgt.

Mit diesem Code würden die übrigen Browser das PNG-Bild angezeigt bekommen. Beim IE würde das Bild mit dem Format .ico angezeigt werden. Allerdings gibt es hier eine Ausnahme beim IE10. Der berücksichtigt kein PNG-Bild als Favicon. Außerdem werden beim IE 10 bedingte Kommentare nicht unterstützt. Hierbei kann man sich den Umstand zunutze machen, dass die meisten IE 10 Benutzer ein Windows 8 Betriebssystem haben. Mit Windows 8 sind nämlich die sogenannten Tiles (Kachel) eingeführt. Sobald ein Benutzer eine Webseite zur Kachel-Oberfläche hinzufügt, wird das Tile der Webseite angezeigt. Das sind 144 x 144 Pixel große Bilddateien im PNG-Format und bei einem transparentem Hintergrund des Bildes kann die Hintergrundfarbe für das Tile vorgegeben werden. Für das PNG-Bild und für die Hintergrundfarbe benötigt man jedoch zwei Angaben im HEAD-Bereich. Der Code könnte somit wie folgt erweitert werden.

In diesem Beispiel wird für das Tile eine weiße Hintergrundfarbe (#ffffff) zugewiesen und als Bild die Datei "tile-144x144.png".

Möglichkeit 5

• Der Dateityp für alle Browser ist nicht .ico, sondern .gif oder .png.
• Der Speicherort und der Dateiname können in dem Fall beliebig sein.

In diesem Fall würde das bedeuten, dass beim IE 6 - 10 kein Favicon angezeigt werden würde. Sowohl für den IE, als auch für die übrigen Browser wäre jeweils ein Eintrag im HEAD-Bereich notwendig. Jedoch würden hier keine Konflikte mit rel="shortcut icon" und rel="icon" entstehen und in beiden Fällen könnte man ein Bild im Format .png angeben. Ein Beispielcode bei einem Dateinamen favicon-16x16.png.

Wie man sieht, kann das Bereitstellen eines Standard-Favicons mit sehr vielen Unwägbarkeiten verbunden sein.

Das Verkleinern eines großen Bildes oder Verwenden des Buntstift-Werkzeugs und das anschließende Speichern der Datei im Format .ico, .gif oder .png ist z.B. mit dem Bildbearbeitungsprogramm GIMP möglich. Eine Schritt-für-Schritt Anleitung hierfür ist auf der Seite Favicon mit GIMP erstellen zu finden.

Nicht alle Bildbearbeitungsprogramme unterstützen das Erstellen und Abspeichern eines Bildes im Dateiformat .ico. In solchen Fällen kann man ein 16 x 16 (oder 32 x 32) Pixel großes Bild erstellen und zunächst in einem anderen Format abspeichern, z.B. im Format .png. Danach kann man eine andere Software verwenden, mit der man das Bild im Format .ico konvertieren kann. Beispielsweise ist eine Konvertierung von und zu vielen Formaten mit dem Programm Irfanview möglich. In Adobe Photoshop ist das zumindest in der Vergangenheit standardmäßig nicht möglich gewesen. Man benötigte zunächst ein Plugin und konnte danach Bilder im Format .ico abspeichern.

Manchmal behelfen sich Entwickler damit, indem sie die Dateiendung einer Datei, die im Format .gif oder .png vorliegt, einfach umbenennen. Das mag zwar bei manchen Browsern funktionieren. Jedoch funktioniert das nur, weil die Browser in diesem Punkt "fehlertolerant" sind und die Datei in dem Dateiformat anzeigen, in dem sie ursprünglich vorhanden waren. Aus einer PNG- oder GIF-Datei wird durch Umbenennen der Dateiendung keine ICO-Datei. Hierfür muss man die Exportieren-Funktion eines geeigneten Programms verwenden, das ein Exportieren bzw. Abspeichern im Format .ico unterstützt.

Da die Geräte- und Systemvielfalt erheblich zugenommen hat, werden mittlerweile vielerlei Favicons mit den unterschiedlichsten Größen und Dateiformaten benötigt und die Entwicklung wird mit Sicherheit hin zu noch mehr Vielfalt gehen. Für solche Favicons benötigt man (neben der Datei) ebenfalls Einträge im HEAD-Bereich und manchmal sogar eine zusätzliche Konfigurationsdatei. Die Standard-Datei favicon.ico mit der Größe von 16 x 16 oder 32 x 32 Pixeln wird den Ansprüchen der neueren Zeit nicht mehr gerecht und als Entwickler sollte man entscheiden, ob und wie lange man überhaupt noch auf das Dateiformat .ico setzt. Das Format .png ist beispielsweise wesentlich geeigneter für Icons. Außerdem ist zu entscheiden, in welchen Größen das Favicon bereitgestellt werden sollte, damit man ein möglichst breites Spektrum an Geräten und Systemen abdeckt.

Hierbei ist die Besonderheit zu berücksichtigen, dass viele Einstellungen, Konfigurations- oder Bilddateien nicht zu den HTML-Spezifikationen zählen und häufig von den Herstellern in Eigenregie eingeführt und berücksichtigt werden. Das bedeutet jedoch nicht, dass das nur bei den Geräten und Systemen von dem Hersteller funktioniert. Ist z.B. die Einführung gewisser Icons mit bestimmten Größen und Dateiformaten für bestimmte Zwecke nützlich gewesen, setzen manche Hersteller in ihren Systemen ebenfalls auf diese Dateien. Beispielsweise wurden für das iOS-System die "Apple Touch Icons" eingeführt, die vorrangig für Systeme auf mobilen Geräten gedacht sind und mittlerweile auch in anderen Systemen berücksichtigt werden, z.B. im Browser Chrome in Android. Der Bereich ist auch sehr lebendig geworden. Was auf der einen Version funktioniert, kann auf der Nachfolgeversion wieder veraltet sein und durch etwas anderes ersetzt werden. Beispielsweise erfolgten für Windows 8 die Bild- und Farbangaben für die Windows-Tiles durch META-Tags. Bereits in Windows 8.1 wurde die Konfigurationsdatei browserkonfig.xml eingeführt und die Angaben zu den Kacheln sollen in dieser Datei erfolgen.

Nachfolgend ist eine Auflistung über einige sinnvolle Konfigurations- und Bilddateien ohne nähere Beschreibung. Eine ausführliche Beschreibung ist jeweils auf den dazugehörigen Seiten enthalten. Die Bildgrößen sind den Dateinamen zu entnehmen.

Benötigte Dateien:

• tile-558-558.jpg
• tile-558-270.jpg
• tile-270-270.jpg
• tile-128-128.jpg
• browserconfig.xml

HTML-Code im HEAD-Bereich ist nicht notwendig. Die Konfigurationsdatei browserconfig.xml wird automatisch abgerufen, worin die Angaben über die Tiles gemacht werden. Nähere Informationen unter Windows Tiles und browserconfig.xml für Websites.

Benötigte Dateien:

• apple-touch-icon-180x180-precomposed.png
• apple-touch-icon-152x152-precomposed.png
• apple-touch-icon-144x144-precomposed.png
• apple-touch-icon-120x120-precomposed.png
• apple-touch-icon-114x114-precomposed.png
• apple-touch-icon-76x76-precomposed.png
• apple-touch-icon-72x72-precomposed.png
• apple-touch-icon-60x60-precomposed.png
• apple-touch-icon-57x57-precomposed.png
• apple-touch-icon-precomposed.png (in Größe 180 x 180 Pixel)
• apple-touch-icon.png (in Größe 180 x 180 Pixel)

Eine nähere Beschreibung dazu ist auf der Seite Apple Touch Icons zu finden. Im HEAD-Bereich werden bei diesen Dateien folgende Angaben mit dem LINK-Tag gemacht.

Neben den Tiles und Apple Touch Icons können weitere Icons in unterschiedlichen Größen bereitgestellt werden. Diese werden im HEAD-Bereich mit den Größen angegeben. Die Systeme könnten die Datei mit der notwendigen Größe abrufen. Einige Beispiele:

• favicon-192x192.png (für Homescreen in Android)
• favicon-96x96.png (für Google TV)
• favicon-32x32.png (für Safari auf Mac)
• favicon-16x16.png (Favicon in Standard-Größe)

Die Angaben im HEAD-Bereich könnten wie folgt aussehen.

Andere Icons mit anderen Größen können ähnlich bereitgestellt erden. Bei diesem Satz ist der Code für das Standard-Icon zuletzt eingefügt, damit die Browser, die das Attribut size="..." nicht interpretieren, das kleinste Icon erhalten.

Benötigte Dateien für Chrome in Android:

• launcher-icon-36x36.png
• launcher-icon-48x48.png
• launcher-icon-72x72.png
• launcher-icon-96x96.png
• launcher-icon-144x144.png
• launcher-icon-192x192.png
• manifest.json (für die Konfiguration)

Im HEAD-Bereich erfolgt ein Eintrag für die Datei manifest.json, in der Angaben zum Webapp gemacht werden müssen. Nähere Informationen sind unter Webapps mit manifest.json erstellen zu finden.

Neben den genannten Favicons sind noch weitere Möglichkeiten vorhanden, z.B. der Opera Speed Dial. Es ist immer abzuwägen, welche berücksichtigt werden sollen.