HTML / CSS, Webseitenoptimierung

Touch-Icons für iPad, iPhone und iPod in Webseite integrieren – HomeScreen Bookmark

WordPress Entwickler und Webdesigner

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.

Anzeige:




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: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden .

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.