In einem etwas länger zurückliegenden Artikel habe ich euch gezeigt, wie ihr eurer Webseite ein TouchIcon hinzufügen könnt, dies war allerdings beschränkt auf das iPhone ohne Retina-Display. Um das ganze jetzt aufzustocken hier die Variante, wie TouchIcons im richtigen Format für iPad, iPhone und iPad eingebunden werden.
Bei den TouchIcons handelt es sich quasi um Favicons die auf dem Homescreen des iOS Gerätes angezeigt werden, wenn ein entsprechender Bookmark vom User gesetzt wird oder anders gesagt: Die Webseite lässt sich öffnen wie eine App und hat einentsprechendes Icon auf dem Homescreen.
Das ganze lässt sich relativ einfach einbinden, es ist allerdings wichtig das die Icons auch in der richtigen Größe angelegt werden:
Der folgende Code muss zwischen den beiden <head> * </head> Tag eingebaut werden:
<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-ipad-retina.png"> |
Die abgerundeten Ecken werden von dem iPhone automatisch angelegt, ihr baut also ein quadratisches Icon mit folgenden Pixelmaßen:
– Icon für iPod und iPhone ohne RetinaDisplay – 57×57 Pixel
– Icon für iPad – 72×72 Pixel
– Icon für iPod und iPhone mit RetinaDisplay – 114×114 Pixel
Um das Icon nun auf eurem Homescreen als Bookmark sehen zu können, müsst ihr bzw. eure User die Webseite im Safari auf dem Gerät öffnen und als Lesezeichen hinzufügen, dort muss „dem Homescreen hinzufügen“ gewählt werden.
Danach befindet sich euer Webseiten-Icon / TouchIcon wie ein App-Symbol auf dem Homescreen.
Viel Spaß damit.
Schlagworte zu diesem Artikel: Icon, iPad, iPhone, iPod, TocuIcon
Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.