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:

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.

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.

APPLETOUCHICON1

 

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.

APPLETOUCHICON2

 

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 welche versucht haben das tutorial nachzubauen, werden wohl mitbekommen haben das 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, das die meisten Browser (so auch der Safari-Browser) diese Icons nicht aus einem Ordner lesen können oder wollen oder wie auch immer.
DES RÄTSELS LÖSUNG:
Mann nehme die Files und verschiebt diese in den Webroot des Servers. Was Webrooot? Die bezeichnung Webroot ist nicht anders als das höchste verzeichnis nach auf der URL.
Ich erkläre es am Beispiel des hier unten dargestellen BILD.

APPLETOUCHICON1

 

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

webroot

Im Vergleich zum obigen Bild sieht man das 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 in der index.html.

APPLETOUCHICON3

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 erscheinen.

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

Keine Kommentare

Antworten

Sie müssen eingeloggt sein um ein Kommentar zu schreiben
© 2008 - 2017 www.fastlane.de - Über uns | Kontakt | Impressum