Touch Icon erstellen und einbinden
Erstellen wir nun zu erst einmal ein Touch Icon. Das Standard Touch Icon ist eine Grafik der Größe 57 x 57 Pixel im Format .png. Ist das Icon mit dem entsprechenden Logo fertig, muss es in das HTML-Dokument eingebunden werden. Folgende Code-Zeile ist dafür nötig:
<link rel="apple-touch-icon" href="/images/touch-icon-57.png" />Diese Zeile muss in den head-Bereich des HTML-Codes geschrieben werden. Unser Icon liegt im Ordner images und hat den Namen touch-icon-57.png. Das Icon funktioniert nun auf dem iPhone, iPod-Touch und iPad. Und obwohl apple-touch-icon im Code steht, wird das Icon auch auf Android Geräten angezeigt. Die runden Ecken und der Glanzeffekt werden automatisch erzeugt. Den Glanzeffekt kann man ausschalten - mehr dazu im übernächsten Abschnitt.
Verschiedene Auflösungen für unterschiedliche Endgeräte
Wie schon erwähnt berücksichtigt die obige Lösung nur das Standard Touch Icon, d.h. auf iPhones oder iPads mit hochauflösendem Retina-Display wird das Icon gestreckt. Um diesen Qualitätsverlust zu umgehen, geben wir für jede Auflösung das passende Icon in der passenden Größe an. Für das iPhone, den iPod und Android Geräte passt das Standard-Icon, für iPads ohne Retina erstellen wir eine Grafik mit 72 x 72 Pixel. Für hochauflösende iPhones gibt es ein Icon der Größe 114 x 114 Pixel, also doppelt so breit und hoch wie das Standard-Icon. Für iPads mit Retina-Display brauchen wir ein Icon in 144 x 144 Pixel. Das Einbinden erfolgt nun wie oben, einziger Unterschied mit dem Attribut sizes geben wir die jeweilige Größe unserer Icons an.
<link rel="apple-touch-icon" href="/images/touch-icon-57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/images/touch-icon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/touch-icon-114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/images/touch-icon-144.png" />Touch Icon ohne Glanzeffekt
Nachdem wir nun alle Auflösungen abgedeckt haben, gibt es noch eine Möglichkeit den Glanzeffekt unseres Icons auszuschalten. Dazu ersetzen wir obigen Code durch folgende Zeilen:
<link rel="apple-touch-icon-precomposed" href="/images/touch-icon-57.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/touch-icon-72.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/touch-icon-114.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/images/touch-icon-144.png" />Mit apple-touch-icon-precomposed sagen wir dem Endgerät, dass unser Icon bitte so dargestellt werden soll, wie wir es entworfen haben, also ohne automatischen Glanzeffekt. Die runden Ecken lassen sich hingegen nicht verhindern.
Unterstützung weiterer Android Geräte
<link rel="apple-touch-icon" sizes="76x76" href="/images/touch-icon-76.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/images/touch-icon-120.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/images/touch-icon-152.png" />Icons für Windows 8 und Windows Phone
Auch für Windows 8 mit IE 11 und Windows Phone kann man Icons und zusätzliche Meta-Daten hinterlegen.
<meta name="application-name" content="Titel der Webseite"/>
<meta name="msapplication-TileColor" content="#FFFFFF"/>
<meta name="msapplication-TileImage" content="/images/touch-icon-144.png" />
<meta name="msapplication-starturl" content="http://www.domain.de" />
<meta name="msapplication-square70x70logo" content="/images/touch-icon-70.png"/>
<meta name="msapplication-square150x150logo" content="/images/touch-icon-150.png"/>
<meta name="msapplication-wide310x150logo" content="/images/touch-icon-310-150.png"/>
<meta name="msapplication-square310x310logo" content="/images/touch-icon-310.png"/>
<meta name="msapplication-navbutton-color" content="#FFFFFF" />
<meta name="msapplication-tooltip" content="Titel der Webseite" />