Von einer App erwartet man, dass Sie mit einem individuellen Icon vom Home Screen aus gestartet werden kann. Auch unsere HTML5 Web App soll da nicht nachstehen.
Das Icon kann einfach verlinkt werden, wenn man die richtige Relation angibt:
<link rel="apple-touch-icon" href="iconname.png" >
Das Icon sollte in der Größe von 57×57 Pixeln vorliegen und wird automatisch mit den abgerundeten Ecken und dem Glanzeffekt dargestellt. Wenn dies nicht gewünscht wird, kann durch das Hinzufügen von „precomposed“ in der Linkrelation die automatische Darstellungsanpassung unterdrückt werden.
<link rel="apple-touch-icon-precomposed" href="iconname.png" >
Durch die explizite Einbindung des Icons ist es auch möglich, verschiedene Icons für verschiedene Teile der Website anzulegen.
Startup Grafik für die Web App
Guter Stil ist auch, eine Startup Grafik zu verwenden, die angezeigt wird, während die App lädt. Insbesondere bei komplexeren Seiten, die ein Sekündchen zum Laden brauchen, wirkt das professioneller. Auch sinkt durch den Einsatz der Ladegrafik die Frustration über die Ladedauer und das subjektive Zeitempfinden der Ladedauer sinkt. Die Anzeige der Startup Grafik steuert man mit diesem Code:
<link rel="apple-touch-startup-image" href="startupimagename.png" >
6 Antworten auf 7. Ein Icon für den Homescreen (Web Clip Icon)