Beitrag

 
Apple Touch Icon für WordPress

WordPress Websites wie Apps auf dem Startbildschirm ablegen

In unseren Website Projekten setzen wir flexible Webdesigns ein, damit die Internetauftritte unserer Kunden auch auf mobilen Geräten wie iPad und iPhone optimal aussehen. Zum schnellen Aufruf von Websites kann man auf diesen Geräten einen Link auf den Startbildschirm ablegen. Damit dieser Link vergleichbar einer App aussieht, verwendet man sogenannte „Touch Icons“. In diesem Artikel beschreiben wir, wie auch Sie diese Touch Icons für Ihre Website einsetzen können.

Touch Icon vorbereiten

Zunächst brauchen wir eine Grafikdatei, die als Basis für ein Touch Icon dient. In der Regel verwenden wir dafür eine besondere Version des Logos. Für das moderne  „Flat Design“ empfiehlt es sich das Logo von Schlagschatten und dreidimensionalen Elementen zu befreien. Auf Apples neuem iOS7 wird häufig eine dezenter Farbverlauf im Hintergrund verwendet. Diese vorbereitete Bilddatei speichern Sie in den folgenden verschiedenen Größen im PNG Format ab. Seit dem neuen Betriebssystem für Apple iOS7 werden die folgenden Größen benötigt.

57x57 Pixel

57×57 Pixel

76x76 Pixel

76×76 Pixel

120x120 Pixel

120×120 Pixel

152x152 Pixel

152×152 Pixel

Verwenden Sie für die unterschiedlichen Bildgrößen die folgenden Dateinamen:

  • apple-touch-icon-57×57.png
  • apple-touch-icon-76×76.png
  • apple-touch-icon-120×120.png
  • apple-touch-icon-152×152.png

Möchten Sie, dass der typisch „Glossy Effekt“ bei älteren Apple Geräten nicht automatisch den Icons hinzugefügt wird, gelten die folgenden Dateinamen:

  • apple-touch-icon-57×57-precomposed.png
  • apple-touch-icon-76×76-precomposed.png
  • apple-touch-icon-120×120-precomposed.png
  • apple-touch-icon-152×152-precomposed.png

Die einzelnen Bilddateien, werden für die folgenden Gerätetypen verwendet:

  • apple-touch-icon-57×57-precomposed.png oder apple-touch-icon-57×57.png für nicht-Retina iPhone und iPod Touch
  • apple-touch-icon-76×76-precomposed.png oder apple-touch-icon-76×76.png für iPad mini und die iPads der ersten und zweiten Genration
  • apple-touch-icon-120×120-precomposed.png oder apple-touch-icon-120×120.png für iPhone 4+ (mit Retina Display)
  • apple-touch-icon-152×152-precomposed.png oder apple-touch-icon-152×152.png für iPad 3+ (mit Retina Display)

Theoretisch kommen Sie auch mit einer Bildgröße aus. Verwenden Sie ein hochauflösendes Touch Icon und nutzen Sie es für alle mobilen Geräte. Geräte mit geringerer Auflösung skalieren das Icon automatisch herunter. Der Nachteil ist, dass diese Geräte eine zu große Bilddatei laden müssen, während auch eine viel kleinere Datei genauso gut funktioniert hätte. Dies verschwendet Bandbreite für den Endbenutzer, wenn die Website zum Startbildschirm hinzugefügt wird. Ist Ihnen das egal, verwenden Sie einfach die folgenden Dateien aus der Datei mit der Auflösung 152×152 Pixel:

  • apple-touch-icon.png

oder entsprechend

  • apple-touch-icon-precomposed.png

Touch Icon in die Website einbinden

Früher war es nötig, die Touch Icons mit Hilfe von HTML-Code in die header.php Ihrer WordPress Website einzubinden. Für die aktuellen iOS Versionen reicht es aus, die Grafikdateien in das Hauptverzeichnis Ihrer Website abzulegen. Wenn keine Symbole in der Header-Datei angegeben sind, wird iOS Safari das Website-Root-Verzeichnis nach den entsprechenden Dateien durchsuchen.

Das Ergebnis lässt sich sehen:
Apple Touch Icon für WordPress

Touch Icons für Android & Co.

Legen Sie ausschließlich Wert auf Apples iPhone, iPod oder iPad, brauchen Sie nicht weiterlesen. Möchten Sie auch für Android, BlackBerry und Co. vorbereitet sein, kopieren Sie die folgenden zwei Dateien  in das Hauptverzeichnis Ihrer Website und benenn Sie diese wie folgt:

  • apple-touch-icon.png
  • apple-touch-icon-precomposed.png

Nun müssen Sie diese Icons noch in die Header-Datei Ihres WordPress Themes einbinden. Dazu kopieren Sie die folgenden Snippets innerhalb des Bereichs <header> … </header> Ihrer header.php Datei:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png">

Das war’s!

Autor:

Thorsten Faltings ist der Gründer von Elbnetz. Für Ihn ist das Internet zur Speerspitze der Kundengewinnung geworden. Damit ist die Website das wichtigste Instrument der Vermarktung. Get in touch via Twitter oder Facebook.

  • Thomas

    Hallo Thorsten, liebe User,
    bei mir hat das mit dem Touch-Icon auf Android nicht sofort funktionert, meine beiden Zeilen lauten nach meiner Modifikation:

    und diese stehen zwingend in der Wp-Datei „header.php“ zwischen und erst dann hat es funktioniert.

    Meine Webseite wird demnächst mit WordPress betrieben, wird zur Zeit noch aufgebaut, Vielen Dank, habe hier auf Elbnetz schon einige sehr brauchbare Tipps gefunden!

    Antworten

Ein Kommentar? Gern!

Ihnen gefällt unser Blog?

Dann wird Sie unser
Buch begeistern!

Mehr erfahren

Ihnen gefällt unser Blog?