Apple Touch Icons erstellen

Was sind den nun wieder APPLE TOUCH ICONS? fragen sich bestimmt einige.

All jene welche versucht haben das tutorial nachzubauen, werden wohl mitbekommen haben das man nun ein paar Zeilen mehr Code in der Html Datei stehen hat, aber sich eben diese Zeilen auf nichts weiter sichtbares auswirken.

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.

 

UPDATE:
All jene die versucht haben das Tutorial nachzubauen, werden wohl mitbekommen haben, dass mann nun ein paar Zeilen mehr Code in der HTML Datei stehen hat, aber sich eben diese Zeilen auf nichts weiter sichtbares auswirken.
Das liegt daran, dass die meisten Browser (so auch Apples Safari) diese Icons nicht aus einem Ordner lesen können oder wollen oder wie auch immer…

DES RÄTSELS LÖSUNG:
Man nehme die Files und verschiebt diese in den Webroot des Servers. Was Webrooot? Die Bezeichnung Webroot ist nicht anders als das höchste Verzeichnis auf dem Webspace.
Ich erkläre es am Beispiel des hier unten dargestellen Bild.

 

Die 3 dargestellten Verzeichnisse und die index.html liegen hier im Webroot.

Im Vergleich zum obigen Bild sieht man, dass wir die Apple-Touch-Icons in den Webroot verschoben habe. Damit das ganze nun auch funktioniert, müssen die Pfade in der INDEX.HTML noch angepasst werden. Die geänderten Pfade sollten nun so aussehen wie hier …

Zum Test die Daten auf einen Server kopieren mit dem iphone oder ipad aufrufen und über die Einstellung „Zum Home Bildschirm hinzufügen“ das Apple Touch Icon anzeigen lassen.

Wir wünschen euch viel Spaß beim Nachvollziehen dieses Tutorials.