In unseren Website Projekten setzen wir flexible Webdesigns ein, damit die Internetauftritte unserer Kunden auch auf mobilen Geräten wie iPad und iPhone optimal aussehen. Zum schnellen Aufruf von Websites kann man auf diesen Geräten einen Link auf den Startbildschirm ablegen. Damit dieser Link vergleichbar einer App aussieht, verwendet man sogenannte „Touch Icons“. In diesem Artikel beschreiben wir, wie auch Sie diese Touch Icons für Ihre Website einsetzen können.

Touch Icon vorbereiten

Zunächst brauchen wir eine Grafikdatei, die als Basis für ein Touch Icon dient. In der Regel verwenden wir dafür eine besondere Version des Logos. Für das moderne  „Flat Design“ empfiehlt es sich das Logo von Schlagschatten und dreidimensionalen Elementen zu befreien. Auf Apples neuem iOS7 wird häufig eine dezenter Farbverlauf im Hintergrund verwendet. Diese vorbereitete Bilddatei speichern Sie in den folgenden verschiedenen Größen im PNG Format ab. Seit dem neuen Betriebssystem für Apple iOS7 werden die folgenden Größen benötigt.

Verwenden Sie für die unterschiedlichen Bildgrößen die folgenden Dateinamen:

• apple-touch-icon-57×57.png
• apple-touch-icon-76×76.png
• apple-touch-icon-120×120.png
• apple-touch-icon-152×152.png

Möchten Sie, dass der typisch „Glossy Effekt“ bei älteren Apple Geräten nicht automatisch den Icons hinzugefügt wird, gelten die folgenden Dateinamen:

• apple-touch-icon-57×57-precomposed.png
• apple-touch-icon-76×76-precomposed.png
• apple-touch-icon-120×120-precomposed.png
• apple-touch-icon-152×152-precomposed.png

Die einzelnen Bilddateien, werden für die folgenden Gerätetypen verwendet:

• apple-touch-icon-57×57-precomposed.png oder apple-touch-icon-57×57.png für nicht-Retina iPhone und iPod Touch
• apple-touch-icon-76×76-precomposed.png oder apple-touch-icon-76×76.png für iPad mini und die iPads der ersten und zweiten Genration
• apple-touch-icon-120×120-precomposed.png oder apple-touch-icon-120×120.png für iPhone 4+ (mit Retina Display)
• apple-touch-icon-152×152-precomposed.png oder apple-touch-icon-152×152.png für iPad 3+ (mit Retina Display)

Theoretisch kommen Sie auch mit einer Bildgröße aus. Verwenden Sie ein hochauflösendes Touch Icon und nutzen Sie es für alle mobilen Geräte. Geräte mit geringerer Auflösung skalieren das Icon automatisch herunter. Der Nachteil ist, dass diese Geräte eine zu große Bilddatei laden müssen, während auch eine viel kleinere Datei genauso gut funktioniert hätte. Dies verschwendet Bandbreite für den Endbenutzer, wenn die Website zum Startbildschirm hinzugefügt wird. Ist Ihnen das egal, verwenden Sie einfach die folgenden Dateien aus der Datei mit der Auflösung 152×152 Pixel:

• apple-touch-icon.png

oder entsprechend

• apple-touch-icon-precomposed.png

Touch Icon in die Website einbinden

Früher war es nötig, die Touch Icons mit Hilfe von HTML-Code in die header.php Ihrer WordPress Website einzubinden. Für die aktuellen iOS Versionen reicht es aus, die Grafikdateien in das Hauptverzeichnis Ihrer Website abzulegen. Wenn keine Symbole in der Header-Datei angegeben sind, wird iOS Safari das Website-Root-Verzeichnis nach den entsprechenden Dateien durchsuchen.
Das Ergebnis lässt sich sehen:

Touch Icons für Android & Co.

Legen Sie ausschließlich Wert auf Apples iPhone, iPod oder iPad, brauchen Sie nicht weiterlesen. Möchten Sie auch für Android, BlackBerry und Co. vorbereitet sein, kopieren Sie die folgenden zwei Dateien  in das Hauptverzeichnis Ihrer Website und benenn Sie diese wie folgt:

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

Nun müssen Sie diese Icons noch in die Header-Datei Ihres WordPress Themes einbinden. Dazu kopieren Sie die folgenden Snippets innerhalb des Bereichs <header> … </header> Ihrer header.php Datei:

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

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

Das war’s!