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.
Inhalt
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.
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:
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!
2 Kommentare. Wir freuen uns über Ihren Kommentar
Vielen Dank für den hilfreichen Beitrag! Ich wusste gar nicht, dass man WordPress-Websites so einfach als „App“ auf dem Startbildschirm ablegen kann. Das ist wirklich praktisch, besonders wenn man oft auf bestimmte Seiten zugreifen möchte, ohne jedes Mal den Browser öffnen zu müssen. Die Anleitung war super verständlich und leicht nachzuvollziehen. Ich habe es gleich ausprobiert und bin begeistert, wie schnell das geht. Jetzt habe ich meine wichtigsten Seiten immer griffbereit und es fühlt sich fast wie eine echte App an. So eine Funktion spart wirklich Zeit und ist ideal für alle, die viel mit WordPress arbeiten. Toller Tipp!
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!