Homescreen-Touch-Icons für die eigene Seite

Mit wenig Aufwand lassen sich eigene Homescreen-Icons für (nicht nur iOS)-Smartphone und Tablets in die eigene Seite integrieren.

Die Integration von Touch-Icons funktioniert ähnlich wie die bekannten 16×16 Pixel großen Favicons aus der Browserleiste:

  • über Namenskonvention
  • über Meta-Tags in der head-Sektion der HTML-Seite

Unterschiedliche Geräte, unterschiedliche Auflösungen

Da die mobilen Endgeräte mit den unterschiedlichsten Bildschirmauflösungen ausgestattet sind, kann man das Touch-Icon in mehren Auflösungen spezifizieren.

Touch Icons mit Plattformrendereffekt

Das mobile Betriebssystem fügt dem Homescreen-Touch-Icon üblicherweise einen plattformabhängigen grafischen Effekt hinzu. Unter iOS zum Beispiel ist das z.B. der glänzende Effekt.
Mit folgendem Block, wird dieser Effekt automatisch hinzugefügt:


<link rel="apple-touch-icon" href="/icon-57x57.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="/icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="/icon-114x114.png"/>

Touch Icons ohne Plattformrendereffekt

Möchte man aus ästhetischen Gründen auf den grafischen Effekt verzichten, kann das durch Angabe des precomposed-Postfixes erreicht werden:


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

Zusammenfassung

Die mobilen Touch-Icons lassen sich leicht in bestehende Sites integrieren und erhöhen die User-Experience auf Smartphones und Tablets. Das spezifizieren von Homescreen-Icons funktioniert analog zu den Favicons über Namenskonvention oder im HTML-Head-Bereich.
Durch unterschiedlich aufgelöste Touch-Icons wird man auch den neuen HiDPI-Devices (aka Retina Display) gerecht. Der grafische Plattformeffekt kann – wenn gewünscht – durch einen eigenen ersetzt werden.
Und: funktioniert auch unter Android.