Apple Touch Icon erstellen und einbinden

Für Apple-Geräte ist als Standard-Icon eine Datei mit 152×152 Pixeln empfehlenswert. Das Icon braucht übrigens keine abgerundeten Ecken oder Glanzeffekte, das macht das Betriebssystem von selbst. Mit folgendem Meta-Tag im head der Seite bindet man das Apple Touch Icon ein.

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

Legt man das Icon im Root-Verzeichnis ab, dann ist dieser Meta-Tag nicht nötig – iOS sucht automatisch im Root-Verzeichnis nach einer Datei mit dem Namen apple-touch-icon.png. Möchte man das Icon dagegen in einem Unter-Ordner ablegen, dann muss die Zeile natürlich entsprechend angepasst werden:

<link rel="apple-touch-icon" href="/img/icons/icon.png" />

Beispiele für Apple Touch Icons

Apple Touch Icon in mehreren Größen

Je nach Gerät und iOS-Version zeigen iPhone und iPad die Website-Icons in unterschiedlichen Größen an, das größte Icon mit 152×152 Pixel kommt auf dem iPad mit Retina-Display unter iOS 7 zum Einsatz. Wurde das Apple Touch Icon in nur einer Größe eingebunden – so wie oben beschrieben – dann wird die Grafik für die anderen Größten skaliert, dabei kann es jedoch zu leichten Verzerrungen oder Unschärfen kommen. Will man also ganz sicher sein, dass das Icon oder Logo bei allen Display-Auflösungen scharf abgebildet wird, dann sollte man das Apple Touch Icon in mehreren Größen anbieten.

Gerät Größe des Touch Icons
(seit iOS 7)		 Größe des Touch Icons
(vor iOS 7)
iPhone 6 Plus 180×180 –
iPhone 6,
iPhone 5,
iPhone 4s		 120×120 114×114 (bis iPhone 5)
ältere iPhones (ohne Retina) – 57×57
iPad mit Retina 152×152 144×144
ältere iPads (ohne Retina) 76×76 72×72

Möchte man für jede dieser Größen ein eigenes Touch Icon einführen, dann bindet man folgende Zeilen im head der Seite ein.

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png" />

Touch Icon für Android

Aktuell nutzen auch Android-Geräte (aktuell noch) die als Apple Touch Icon eingebundenen Dateien, allerdings ist dies als deprecated eingestuft, für Android-Geräte sollte man daher ein eigenes Touch-Icon einbinden. Google empfielt dafür ein Dateigröße von 196×196 Pixeln.

<link rel="shortcut icon" href="android-icon.png" sizes="196x196">

Windows Touch Icons bzw. Windows Tile Icons

Windows bedient sich im Gegensatz zu Android nicht an den Apple Touch Icons, für das Microsoft-Betriebssystem muss man eigene sogenannte Tile Icons einbauen. Da man die Kacheln auf dem Windows Screen in verschiedenen Größen und Formaten einfügen kann, ist die Bereitstellung von mehreren Icons empfehlenswert:

<meta name="msapplication-square70x70logo" content="images/smalltile.png" />
<meta name="msapplication-square150x150logo" content="images/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="images/widetile.png" />
<meta name="msapplication-square310x310logo" content="images/largetile.png" />

Beispiel: Touch Icon nicht nur auf der Startseite einbinden

Als Beispiel für eine Website mit Apple Touch Icon und eine ohne entsprechende Einbindung schauen wir uns zwei bekannte Wetter-Websites an: Wetter.de hat ein Apple Touch Icon eingebunden, das Logo mit der Sonne. Bei Wetter.com wurde das Touch Icon wohl nur auf der Startseite eingebunden, jedoch nicht auf allen anderen Seiten. Da sich viele Website-Besucher in diesem Fall aber vermutlich nicht die Startseite, sondern die Unterseite des eigenen Wohnortes auf den Homescreen legen werden, ist das Touch Icon auf der Startseite leider nicht genug. Die beiden Wetter-Websites im Vergleich:

Beispiel für Apple Touch Icons von Wetter.de und Wetter.com