Apple Touch Icons und sonstige Touch-Icons für Websites

Aufgrund der zunehmenden Vielfalt bei den Geräten und Systemen nimmt auch die Vielfalt bei den Icons zu, die man für Websites verwendet. Früher benötigte man lediglich ein Favicon im Dateiformat .ico, das man ins Wurzelverzeichnis der Website ablegte, damit die Browser in der Titelleiste oder im Tabregister ein kleines Bild anzeigen konnten. Mittlerweile benötigt man für verschiedene Zwecke Icons in unterschiedlichen Größen. Außerdem ist man bei der Auswahl des Dateiformats nicht mehr an .ico gebunden und kann z.B. Icons im Format .png bereitstellen. Beispielsweise wurden mit Windows 8 die Tiles (Kacheln) eingeführt und als Entwickler von Websites hat man die Möglichkeit, das Aussehen der Windows-Tiles zu beeinflussen, die beim Anheften von Webseiten angezeigt werden.

Durch die Verbreitung von mobilen Geräten wie Smartphones oder Tablets haben sich vor allem die Apple Touch Icons etabliert, die nicht nur auf iOS-Systemen genutzt werden. Sie werden z.B. auch auf Android-Systemen genutzt. Wenn ein Benutzer eine Webseite zum Homescreen des Smartphones hinzufügt, wird für den Eintrag automatisch ein Icon erstellt. Auch hierbei haben Entwickler die Möglichkeit, durch Bereitstellen von passenden Touch-Icons das Aussehen zu beeinflussen. Meisten sind diese quadratisch, haben abgerundete Ecken und können das Logo der Website oder ähnliches enthalten.

Apple Touch Icons für Webseiten

Dateinamen für Apple Touch Icons für iOS-Systeme

Beim Hinzufügen einer Webseite zum Homescreen ist zunächst das maßgebend, was im HEAD-Bereich einer Webseite angegeben wurde. In dem Fall können die Dateinamen beliebig sein, da sie aus den Einträgen im HEAD-Bereich entnommen werden können. Wenn im HEAD-Bereich nichts angegeben wurde, dann wird der Reihe nach versucht, folgende Dateien vom Wurzelverzeichnis der Website zu laden.

  • apple-touch-icon-<size>-precomposed.png (z.B. apple-touch-icon-120x120-precomposed.png)
  • apple-touch-icon-<size>.png (z.B. apple-touch-icon-120x120.png)
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png

Welche Größe als <size> eingesetzt wird, hängt von der benötigten Icongröße für das verwendete System ab. Wird die Datei apple-touch-icon-precomposed.png bzw. apple-touch-icon.png verwendet und ist sie größer als vom System benötigt wird, wird es auf die benötigte Größe skaliert. Sind im HEAD-Bereich keine Einträge vorhanden und sind die gesuchten Dateien auch nicht vorhanden, hat das keine gravierenden Auswirkungen. In dem Fall wird als Icon ein kleines Screenshot von der Webseite angezeigt. Bei anderen Systemen kann es sein, dass die Datei favicon.ico oder ein Standard-Icon verwendet wird.

Unterschied zwischen apple-touch-icon-precomposed.png und apple-touch-icon.png

Der Unterschied zwischen den beiden Dateinamen ist wie folgt und betrifft im Grunde nur iOS-Systeme vor der Version 7. Bei diesen Systemen wurden die Icons geändert, wenn der Dateiname nicht *-precomposed.png gewesen ist. Beispielsweise wurden den Icons runde Ecken und ein Glanzeffekt hinzugefügt. Wollte man das verhindern, mussten die Dateien mit *-precomposed.png benannt werden. Ab der iOS-Version 7 werden die Icons nicht mehr geändert und es ist somit zumindest für iOS-Systeme ab der Version 7 nicht mehr zwingend notwendig, die Dateien mit *-precomposed.png zu benennen.

Verwendung der Dateien in anderen Systemen

Die Apple Touch Icons werden mittlerweile nicht nur in iOS-Systemen verwendet, sondern auch in anderen, z.B. Android. Allerdings ist das Verhalten nicht einheitlich. Bei manchen Systemen muss ein Eintrag im HEAD-Bereich erfolgen, bei manch anderen reicht das Vorhandensein der Datei aus. Es kann auch sein, dass nur die Dateien mit dem Namen *-precomposed.png berücksichtigt werden. Somit hat man mehrere Möglichkeiten bei der Benutzung der Touch-Icons. Einige Beispiele.

Möglichkeit 1

  • Ob bei iOS-Systemen vor der Version 7 das Bild verändert wird oder nicht, spielt keine Rolle.
  • Ob andere Systeme die Bilddateien finden und benutzen, spielt keine Rolle.
  • Ob die Benutzer unnötig große Dateien laden, spielt keine Rolle.

Das ist die einfachste Variante. In dem Fall braucht man lediglich eine große Datei, z.B. 192 x 192 Pixel, mit dem Namen apple-touch-icon.png in das Wurzelverzeichnis abzulegen. Werden andere Größen benötigt, wird das Bild skaliert. In iOS-Systemen vor der Version 7 würde die Datei verändert werden. Jedoch würden einige Systeme, die einen Eintrag im HEAD-Bereich oder die Datei mit dem Namen *-precomposed.png benötigen, das Touch-Icon nicht laden.

Möglichkeit 2

  • Bei allen iOS-Systemen soll das Bild nicht verändert werden.
  • Ob andere Systeme die Bilddateien finden und benutzen, spielt keine Rolle.
  • Ob die Benutzer unnötig große Dateien laden, spielt keine Rolle.

Auch diese Variante ist einfach. Man braucht lediglich eine Datei mit dem Namen apple-touch-icon-precomposed.png in das Wurzelverzeichnis abzulegen. Der Unterschied zu Möglichkeit 1 besteht lediglich darin, dass auch in iOS-Systemen vor der Version 7 das Icon nicht verändert werden würde.

Möglichkeit 3

  • Bei allen iOS-Systemen soll das Bild nicht verändert werden.
  • Auf anderen Systemen, auf denen Apple Touch Icons nutzbar sind, sollen sie genutzt werden können.
  • Ob die Benutzer unnötig große Dateien laden, spielt keine Rolle.

In dem Fall benötigt man einige Einträge im HEAD-Bereich. Außerdem ist es empfehlenswert, die folgenden Dateien ins Wurzelverzeichnis abzulegen.

  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png
  • touch-icon-192x192.png

Der Eintrag im HEAD-Bereich könnte wie folgt sein.

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png">
<link rel="icon" type="image/png" sizes="192x192" href="/touch-icon-192x192.png">

Bei dieser Konstellation wird das Icon auch bei iOS-Systemen vor der Version 7 nicht verändert. Außerdem werden auch die Systeme berücksichtigt, die einen Eintrag im HEAD-Bereich benötigen. Der Eintrag in der zweiten Zeile ist für Systeme, die als Attribut rel="icon" benötigen. Zusätzlich enthält dieser einen Hinweis zur Größe des Bilds mit dem Attribut size="192x192". Für den Fall, dass ein System die Datei apple-touch-icon.png abruft, liegt dieser im Wurzelverzeichnis. Somit hätte man zumindest eine sehr breite Abdeckung. Bei dieser Konstellation könnte es jedoch passieren, dass einige Systeme auch für das Favicon das Bild touch-icon-192x192.png laden, wodurch unnötigerweise Bandbreiten in Anspruch genommen werden. Auch das Bild apple-touch-icon-precomposed.png würde häufig auf eine andere Größe skaliert werden.

Möglichkeit 4

  • Bei allen iOS-Systemen soll das Bild nicht verändert werden.
  • Auf anderen Systemen, auf denen Apple Touch Icons nutzbar sind, sollen sie genutzt werden können.
  • Es soll nach Möglichkeit Bandbreite gespart werden.

In dem Fall können Bilder für Touch-Icons und Favicons in weiteren Größen bereitgestellt werden. Hierbei könnte man folgende Dateien bereitstellen (Bildgrößen sind im Dateinamen enthalten).

  • touch-icon-192x192.png
  • touch-icon-128x128.png
  • touch-icon-96x96.png
  • favicon-48x48.png
  • favicon-32x32.png
  • favicon-16x16.png
  • 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
  • apple-touch-icon.png

Der HEAD-Bereich könnte hierbei folgende Einträge enthalten.

<link rel="icon" type="image/png" sizes="192x192"
 href="/touch-icon-192x192.png">
 
<link rel="icon" type="image/png" sizes="128x128"
 href="/touch-icon-128x128.png">
 
<link rel="icon" type="image/png" sizes="96x96"
 href="/touch-icon-96x96.png">
 
<link rel="icon" type="image/png" sizes="48x48"
 href="/favicon-48x48.png">
 
<link rel="icon" type="image/png" sizes="32x32"
 href="/favicon-32x32.png">
 
<link rel="icon" type="image/png" sizes="16x16"
 href="/favicon-16x16.png">
 
<link rel="apple-touch-icon-precomposed" sizes="180x180"
 href="/apple-touch-icon-180x180-precomposed.png">
 
<link rel="apple-touch-icon-precomposed" sizes="152x152"
 href="/apple-touch-icon-152x152-precomposed.png">
 
<link rel="apple-touch-icon-precomposed" sizes="144x144"
 href="/apple-touch-icon-144x144-precomposed.png">
 
<link rel="apple-touch-icon-precomposed" sizes="120x120"
 href="/apple-touch-icon-120x120-precomposed.png">
 
<link rel="apple-touch-icon-precomposed" sizes="114x114"
 href="/apple-touch-icon-114x114-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="76x76"
 href="/apple-touch-icon-76x76-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72"
 href="/apple-touch-icon-72x72-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="60x60"
 href="/apple-touch-icon-60x60-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="57x57"
 href="/apple-touch-icon-57x57-precomposed.png">

<link rel="apple-touch-icon-precomposed"
 href="/apple-touch-icon-precomposed.png">

Der Eintrag für die Datei apple-touch-icon-precomposed.png erfolgt in diesem Beispiel zuletzt. Bei der Größe kann man entweder von den kleinsten (z.B. 57 x 57) oder größten (z.B. 192 x 192) Abmessungen ausgehen. Bei einigen (älteren) Systemen kann es nämlich passieren, dass das Attribut sizes="..." nicht berücksichtigt wird. In dem Fall wäre der letzte Eintrag maßgebend. Hierbei muss man zwischen folgenden Möglichkeiten entscheiden

  • Priorität auf das Aussehen des Icons setzen: Die Datei wird mit großen Abmessungen bereitgestellt und bei Bedarf herunter skaliert, wenn im System ein kleines Icon benötigt wird. Hier hat man zwar kaum Qualitätsverluste, das würde jedoch unnötige Bandbreiten in Anspruch nehmen.
  • Priorität auf die Bandbreite legen: Die Datei wird mit geringen Abmessungen bereitgestellt. Dadurch spart man zwar Bandbreiten. Bei Systemen, die größere Icons benötigen, wird das Bild jedoch vergrößert und somit verzerrt.

Die Einträge mit dem Attribut rel="icon" sind ebenfalls so angeordnet, dass die Angabe für das kleinste Favicon zuletzt erfolgt. So wird das kleinste Favicon geladen, falls ein System das Attribut sizes="..." nicht kennen sollte. Für Systeme, die das Attribut sizes="..." kennen, stehen viele verschiedene Dateien bereit. So hat man eine möglichst breite Abdeckung und das Laden unnötig großer Dateien würde zumindest vermindert werden.