Wie binde ich ein Apple Touch Icon ein?
- Hannah Schröder
- Maik Gnyza
Ein Touch Icon wird auf dem Home-Screen eines mobilen Endgerätes angezeigt, sobald ein Kunde auf seinem Smartphone eine Website auf seinem Home-Bildschirm hinzufügt. Es erscheint ein Icon, siehe Beispiel:
Über dieses Icon, kann der User direkt auf Ihre Website springen ohne diese im Web suchen zu müssen.
Einbindung:
Um zu gewährleisten, dass das Icon auf jedem Endgerät ideal abgebildet wird, wird empfohlen die PNG-Datei in unterschiedlichen Größen zur Verfügung zu stellen. Je nach Gerät wird automatische entschieden, welche Größe die Richtige ist. Die Effekte, wie abgerundete Ecken oder Glanz, werden von iOS automatisch generiert. Das Icon muss diese Eigenschaften also nicht von selbst besitzen. Wird kein Hintergrund bzw. ein durchsichtiger Hintergrund gewählt ersetzt Apple dies durch eine andere Farbe. Bei der Erstellung der Bilder sollte also auf den Hintergrund geachtet werden.
iOS sucht automatisch im Root-Verzeichnis der Website nach einer Datei mit dem Namen “apple-touch-icon.png”. Dementsprechend soll die Datei als “.png” abgespeichert werden.
Größen, die Sie verwenden sollten:
57x57
60x60
72x72
76x76
114x114
120x120
128x128
144x144
152x152
167x167
180x180
Die fett markierten Größen sind die (nach Stand 2019) aktuellen Größen. Kleinere Versionen werden heutzutage kaum noch genutzt, es schadet aber nicht, diese anzubieten.
Eingebunden wird der Quellcode in einer Content-Seite. Der Name dieser lautet header_html.
Apple Dokumentation
In der offiziellen Apple Dokumentation finden Sie alle nötigen Informationen, wie der Quellcode zur Einbindung des Apple Touch Icons auszusehen hat.
Wie der Quellcode aussehen sollte (Stand Anfang 2021):
<!-- Touch Icons START --> <link rel="apple-touch-icon" href="Web URL/PFad in dem das PNG liegt/apple-touch-icon.png” /> <link rel="apple-touch-icon" href=”Website URL/Pfad in dem das PNG liegt/apple-touch-icon-57x57.png” sizes="57x57" /> <link rel="apple-touch-icon" href=”Website URL/Pfad in dem das PNG liegt/apple-touch-icon-60x60.png” sizes="60x60" /> <link rel="apple-touch-icon" href=”Website URL/Pfad in dem das PNG liegt/apple-touch-icon-72x72.png” sizes="72x72" /> <link rel="apple-touch-icon" href=”Website URL/Pfad in dem das PNG liegt/apple-touch-icon-76x76.png” sizes="76x76" /> <link rel="apple-touch-icon" href=”Website URL/Pfad in dem das PNG liegt/apple-touch-icon-114x114.png” sizes="114x114" /> <link rel="apple-touch-icon" href=”Website URL/Pfad in dem das PNG liegt/apple-touch-icon-120x120.png” sizes="120x120" /> <link rel="apple-touch-icon" href=”Website URL/Pfad in dem das PNG liegt/apple-touch-icon-128x128.png” sizes="128x128" /> <link rel="apple-touch-icon" href=”Website URL/Pfad in dem das PNG liegt/apple-touch-icon-144x144.png” sizes="144x144" /> <link rel="apple-touch-icon" href=”Website URL/Pfad in dem das PNG liegt/apple-touch-icon-152x152.png” sizes="152x152" /> <link rel="apple-touch-icon" href=”Website URL/Pfad in dem das PNG liegt/apple-touch-icon-180x180.png” sizes="180x180" /> <link rel="apple-touch-icon" href="Website URL/Pfad in dem das PNG liegt/apple-touch-icon-precomposed.png” /> <!-- Touch Icons ENDE --> |
|---|
Die fett gedruckten Wörter sollten durch Ihre eigenen Daten ersetzt werden.
Sowohl das apple-touch-icon.png, als auch das apple-touch-icon-precomposed.png werden im Format 57x57 abgespeichert. Der Zusatz “precomposed” sorgt dafür, dass das Icon keine abgerundeten Ecken hat. Der letzte Teil des Quellcodes ist somit optional.
Bitte bedenken Sie, dass sich die Vorgaben zum Quellcode ändern können. Prüfen Sie die offizielle Dokumentation von Apple.