Apple Touch Icon erstellen Mit Hilfe eines Apple Touch Icons kann man sich bestimmte Webseiten auf dem Home-Screen des iPhones oder iPads abspeichern. So kann man immer wieder schnell auf seine Lieblings-Webseiten zugreifen. Besonders schön ist es, wenn diese Webseiten ein extra vorbereitetes Apple Touch Icon anbieten, denn standardmäßig wird nur ein verkleinerter Screenshot der Webseite als Icon angezeigt. Mit einem integriertem Apple Touch Icon wird es möglich, das eigene Logo oder ein zum Webdesign passendes Symbol zu verwenden. Und so funktioniert’s:

Das Icon erstellen

Ein Apple Touch Icon kann man ähnlich wie ein Favicon ganz leicht erstellen. Es wird lediglich ein PNG-Bild im Format 128×128 Pixel benötigt. Den Glanz-Effekt und die abgerundeten Ecken muss man nicht selbst erzeugen. Diese Effekte werden von Apple automatisch hinzugefügt. Dann lädt man sich das Icon in den eigenen Webseiten-Ordner hoch und speichert sich den URL-Pfad des Bildes.

Den benötigten Code einbinden

Innerhalb des head-tags (z.B. unterhalb des Favicon Icons) fügt man jetzt folgenden Code ein:

[code]
<link rel="apple-touch-icon" href="http://deinedomain.de/apple-touch-icon.png"/>
[/code]

Verwendest du WordPress kannst du innerhalb des head-tags in der header.php Datei deinen Code auch in dieser Form einfügen (wenn das Apple Touch Icon Bild im Haupt-Ordner des aktiven Themes eingefügt hat):

[code]
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon.png"/>
[/code]

Icon ohne abgerundete Ecken und Glanzeffekt

Möchtest du keinen Glanzeffekt oder abgerundete Ecken für das eigene Icon verwenden, muss man das vorbereitete Icon mit dem Zusatz “precomposed” abspeichern. Also z.B.:

[code]
<link rel="apple-touch-icon" href="http://deinedomain.de/apple-touch-icon-precomposed.png"/>
[/code]

Weitere Infos zum Apple Touch Icon findest du auch noch auf der Apple iOS Developer Webseite.

Hast du weitere Tipps oder Fragen zur Integration eines Apple Touch Icons? Über dein Feedback und weitere Tipps freue ich mich sehr!