Touch Icons für Apple iOS und Android erstellen und einbinden

Wenn man Websites mit mobilen Endgeräten aufruft, auf den Apples iOS oder Googles Android läuft, kann man diese bookmarken und auf dem Homescreen speichern (bei Safari z.B. “-> Zu Home-Bildschirm”). Schön wäre es natürlich, wenn die Bookmarks dann noch ein hübsches Icon haben, das sie wie Apps aussehen lässt. So wie in diesem Beispiel hier.

Das Ganze lässt sich in wenigen Schritten bewerkstelligen.

1. Icon Dateien erstellen

Es gibt nur wenige Anforderungen an die Dateien. Sie müssen lediglich 144 x 144 Pixel groß sein (für Retina Displays iPhone 4/4S und neues iPad) und als .png gespeichert werden. Um die runden Ecken und den Schatten braucht man sich nicht kümmern. Diese Effekte werden in iOS bzw. Android automatisch hinzugefügt.
Möchte man auch in der Reeder App eine optimale Darstellung, wählt man als Größe am Besten 241 x 241 Pixel. (Hat tip: Martin Wolf)

Die Icons für diese Website hier und für mein Photoblog pabst-photo.com sehen z.B. so aus:

Diese Dateien müsst ihr nun mit dem Namen “apple-touch-icon.png” im Rootverzeichnis  auf eurem Webserver ablegen.

2. Dateien im Header verlinken

Nun müssen die Dateien nun noch innerhalb des <head>-Bereichs verlinkt werden. In deinem WordPress-Theme muss der Codeschnipsel in der Datei header.php eingetragen werden.

Hier ist wichtig, im rel-Attribut “precomposed” anzugeben und den absoluten Pfad zur Datei zu notieren, da die Datei sonst von Android ingnoriert wird. Für iOS reicht es theoretisch aus, nur die Datei im Root-Verzeichnis der Domain abzulegen, ohne die Verlinkung im <head>. Aber wir wollen ja auch für Android (ab 2.1) ein schickes Icon, daher die erweiterte Einbindung (siehe hierzu auch einen Artikel von Rob Flaherty). Ein Nebeneffekt der “precomposed”-Variante ist übrigens, dass iOS dem Icon keinen Schein hinzufügt.

Fertig

Das war es schon!

Eine kleine Besonderheit gibt es noch, wenn man WordPress und das Plugin WPtouch verwendet. Dieses scheint das rel-Attribut zu “verschlucken”, sodass iOS hier noch den berüchtigten Glanz hinzufügt und Android das Icon komplett ignoriert und stattdessen das im Plugin WPtouch eingestellte Icon der jeweiligen Seite verwendet. Dem kann man entgegenwirken, wenn man das Icon noch in einer zweiten Version inkl. runden Ecken erstellt und innerhalb des WPtouch-Plugins hochlädt und den Seiten zuweist. Dieses wird dann zusätzlich auch auf der mobilen Ansicht oben links neben dem Titel angezeigt.

Die vollständige Dokumentation von Apple gibt es hier:
Safari Web Content Guide: Configuring Web Applications

8 Kommentare zu “Touch Icons für Apple iOS und Android erstellen und einbinden

  1. PDK Check- Sebastian

    Hatte durch Zufall davon gehört das es wohl diese ICONS gibt und auch SEO Relevant sein können, daher danke für das Tutorial!

    Antworten
  2. Patrick Waven

    Hey!
    Danke für die tolle Beschreibung. Genau das, was ich gesucht hab. :)
    Eine Frage hab ich noch: ist das wirklich auch SEO-relevant?

    Antworten
  3. Webdesig Bonn

    Da spalten sich die Geister.
    Ich denke nicht das es wirklich SEO relevant ist. Es dient der usability. (und einen Fun Faktor hat es auch). Der Besucher findet deinse Hompage schneller wieder oder wird beim finden des icons an Sie erinnert und kehrt warscheinlicher noch mal auf deine Seite zurück.Trozdem ein nettes Extra was man seinen Besuchern bieten kann.

    Antworten
  4. Marc

    Super Anleitung! Jetzt klappt’s auch mit den Mobile Touch Icons. Vielen herzlichen Dank. Bis vor wenigen Minuten wusste ich nicht einmal, dass es sie gibt….

    Antworten

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *