Was sind den nun wieder APPLE TOUCH ICONS, fragen sich bestimmt einige.
Welche Funktion haben diese Icons und warum werden diese denn überhaupt gebraucht?
Mit Hilfe von APPLE TOUCH ICONS bekommt man die Möglichkeit, bestimmte Lieblingswebseiten auf seinem Homescreen abzuspeichern. Um diese dann neben der großen Vielzahl der anderen Apps auf dem Device schnell wiederfinden zu können, bietet uns Apple die Möglichkeit, einen Screenshot von der Website zu machen und diesen dann abzuspeichern. Schöner und eleganter ist es jedoch, wenn man jenen Webseiten gleich ein vorbereitetes APPLE TOUCH ICON zur Verfügung stellt, welches sich automatisch integriert und das so aussieht, als wäre die gespeicherte Webseite auf dem Homescreen eine App. Dabei verbirgt sich hinter diesem Icon eigentlich nur ein ganz normales Lesezeichen.
Wie das geht, zeigen wir hier:
Das Icon anfertigen:
Das APPLE TOUCH ICON kann leicht wie ein Favicon erstellt werden. Dafür speichert man ein PNG-Bild beispielsweise in den folgenden Formaten ab:
- 16×16
- 32×32
- 48×48
- 64×64
- 128×128
- 512×512
Um den Glanz-Effekt sowie die abgerundeten Ecken braucht man sich in diesem Fall nicht zu kümmern. Das übernimmt das Betriebssystem ganz automatisch von selbst. Damit die Icons dementsprechend angezeigt werden, lädt man sie in den eigenen Webseiten-Ordner hoch und speichert den URL-Pfad der Bilder bzw. der ICONS. Wichtig ist, dass man das ICON nicht nur in einer Größe anlegt, denn dann würde diese Grafik automatisch vom System skaliert werden, was zu unschönen Verzerrungen und zu Unschärfe-Effekten führen könnte.
Einbinden der APPLE TOUCH ICONS:
Innerhalb des HEAD-TAGS fügt man nun folgenden Code ein:
<link rel="apple-touch-icon" sizes="16x16" href="img/apple-touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="32x32" href="img/apple-touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="48x48" href="img/apple-touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="64x64" href="img/apple-touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="128x128" href="img/apple-touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="512x512" href="img/apple-touch-icon-iphone.png" />
Wenn man das noch erweitern möchte, legt man noch APPLE TOUCH ICONS in den weiter unten aufgeführten Formaten für die Retina-fähigen Geräte von iPhone und iPad an.
<link rel="apple-touch-icon" sizes="144x144" href="img/apple-touch-icon-ipad-retina.png" /> <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-iphone-retina.png" /> <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon-iphone.png" />
Die Icons Dateien selbst lädt man auf seinen Server in den jeweiligen Ordner.
Zur besseren Übersicht haben wir hier noch einmal alle gängigen ICON-Größen für die jeweiligen Apple-Devices zusammengefasst und aufgelistet:
| Device | ab iOS7 [px] | vor iOS7 [px] |
| iPhone 6 plus | 180×180 | - |
| iPhone 6 | 120×120 | - |
| iPhone 5 | 120×120 | 114×114 |
| iPhone 4s | 120×120 | 114×114 |
| Non-Retina iPhone | - | 57×57 |
| iPad und iPad mini mit Retina | 152×152 | 144×144 |
| ältere iPads und iPads mini ohne Retina | 76×76 | 72×72 |
Hier sollte noch erwähnt werden, dass man die Pfade zu den Icons auf seinem Server anpassen muss.
Pfade anpassen:
Wie im Bild unten könnte eine Webseitenstruktur aussehen.
Die APPLE TOUCH ICONS wurden im IMG-Ordner abgelegt.
Um nun, wie im Code oben dargestellt, die APPLE TOUCH ICONS einzubinden, muss der Pfad zum Icon angepasst werden. Wie im Falle oben sollte der HTML-Head so aussehen.
Wenn nun alle Daten hochgeladen sind und die HTML-Struktur angepasst wurde, sollte nun auch in der Überprüfung im Browser im Tab ein kleines Icon erscheinen. Auch beim Abspeichern auf dem iPhone wie auch auf dem iPad sollte nun das jeweilige Icon erscheinen.
Wir wünschen euch viel Spaß beim Nachvollziehen dieses Tutorials.