Ein Apple Touch Icon für die eigene Webseite erstellen

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:

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

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):

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

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.:

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

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!

39 Kommentare

  1. Hallo Ellen :)
    Mich würde jetzt sehr interessieren wie sowas unter Windows geht?

    Liebe Grüße

    Kevin Groth

    • Meinst du das im Ernst? Ein Bild kann man unter jedem OS erstellen, in Windows kannst du ja Paint dazu benutzen oder Photoshop oder Gimp.

    • wahrscheinlich sagt ihr mir über die „Verknüpfung“ aber gibt es auch einen anderen weg das man nicht gleich sieht das es eine Verknüpfung ist?

      lg.

      Kevin

      • @Kevin, eigentlich sind Verknüpfungen doch recht praktisch, du kannst den Namen ja ändern. Ob es die Touch Icons Option auch für Windows Mobile gibt, weiß ich selbst leider nicht, werde das mal recherchieren.

        • Mir gehts grundsätzlich darum wie man eine verknüpfung hinbekommt ohne das links unten das zeichen „verknüpfung“ auf das Icon liegt.

  2. Hi Ellen!

    Ich bin ja auch auch Fan von diesen Icons, habe mich allerdings grade gefragt ob es überhaupt leute gibt, die das nutzen. Ich selbst kann mich nur erinnern, dass es für den Mobilen Termin-Planer der re:publica ganz praktisch war, aber sonst würde ich mir keine Seiten auf diese Art speichern.

    Mich würde interessieren was Du, oder andere deiner Leser dazu denken.

    • @Nils, ja das stimmt schon, auf dem iPad finde ich es allerdings schon sehr praktisch, da man hier ja viel mehr Platz hat. Und wenn man einen eigenen Blog hat, kann man ja zumindest diesen und vielleicht ein paar weitere Lieblings-Websites speichern :)

      • Was mir dabei grade noch einfällt: Wie siehts denn nun bei’m iPad3 bzw. Retina-Display aus? Müssen die Icons zukünftig nicht größer sein um das Beste an sauberkeit rauszuholen?

  3. Ist nur echt die Frage, ob man für jede Nischenplattform die eigene Website aufblasen sollte, nur weil es gerade „hip“ ist.

    Hätte Apple hier wenigstens eine allgemein verträgliche Lösung angeboten, könnte man es ja noch akzeptieren. Zumal es für Android ja auch funktioniert. Aber so mit Herstellernamen drin ist es doch echt daneben.

    Beim Viewport haben sie es ja auch vernünftig gemacht.

  4. Klasse Beitrag. Ich mag solche „angepassten“ Icons. Der Tipp um den „Glossy“ Effekt wegzukriegen war hilfreich, danke!

    Grüße, Vincent

  5. hier wäre noch zu erwähnen, dass dies auch wunderbar für die schnellwahl des opera browsers funktioniert.

  6. Das Icon ist eigentlich 57×57 Pixel groß. Für die Größeren Icons empfiehlst sich das Benutze des sizes-Attribut:

    Steht bei Apple in dem verlinkten Dokument. Was mir noch auffällt ist, dass das größte Icon bei Apple mit 114×114 Pixel angegeben ist und nicht 128×128 Pixel. Wie kommst Du auf diese Größe, Ellen?

  7. Hallo Ellen

    schöner Artikel. Ich habe deinen Artikel bei mir noch ergänzt und darüber geschrieben, wie man sich dazu noch schöne Startbildschirme zaubern kann. Die Bilder gibts sogleich auch gerade als Download.

    Nebenbei: funktionieren hier die Ping- oder Trackbacks nicht?

    Liebe Grüsse

    Claudio

  8. Schöner Artikel, kurz und knapp zusammengefasst.
    Allerdings gibts bei dem Thema auch eine Menge zu beachten, wenn man es richtig machen will.

    Mal konkret zu der Icon-Größe:
    57x57px – iPhone, iPod Touch, Android 2.1+
    72x72px – iPad
    114x114px – iPhone mit Retina-Display
    144x144px – iPad mit Retina-Display

    Wenn man nur iOS-Geräte unterstützen will, kann man das -Tag auch weglassen und die Icons im Hauptverzeichnis der Webseite speichern:
    apple-touch-icon-144×144-precomposed.png
    apple-touch-icon-144×144.png

    Und noch was wichtiges:
    iOS 1 und Blackberry OS6 unterstützen KEINE precomposed-Icons, Android 2.1 unterstützt NUR precomposed-Icons.

    Hier noch eine elegante Lösung:

    Erklärung:
    Ältere iOS-Geräte unterstützen das „size“-Attribut nicht, laden also das letzte Icon.
    Ab iOS 4.2 wird „size“ erkannt und somit das passende Icon geladen und die anderen ignoriert.
    Android kennt „size“ zwar nicht, lädt aber komischerweise das erste Icon und ignoriert die anderen.

    Somit hat man immer das optimale Icon für das jeweilige Gerät. Natürlich könnte man auch nur das größte Icon nehmen, was dann auf den Geräten entsprechend runtergerechnet wird, aber die Lösung spart Traffic & Performance.

    Gruß

      • Liebe Ellen

        Besten Dank für Deinen Artikel zum Apple-Touch-Icon!
        Interessant wäre noch wie das ganza auch für Android funktioniert.

        @Andreas:
        Vielen Dank für den ergänzenden Kommentar. Sehe ich das richtig, du verwendest nur precomposed-Icons?
        Kann ich das ganze auch ohne precomposed-Icons verwenden? Sollte ja funktionieren, doch wenn ich auch Android unterstützen will, muss als erstes ein precomposed-Icon hin. Welches Icon wird von den iDevices gewählt, wenn für die gleiche Grösse ein precomposed-Icon und ein normales Icon angebe? Habe kein Gerät zum testen.

        Ich denke mir das Ganze so: http://pastebin.com/K1NpG35n

        So könnte man auch Geräte unter iOS 1 unterstützen.

        Gruss

        • Mindestens ein precomposed Icon ist sinnvoll, da die anderen nicht von Android unterstützt werden. Wenn das egal ist, kannst du natürlich auch nur normale Icons verwenden.

          Wenn du normale und precomposed Icons verwendest, zieht das Gerät das precomposed Icon vor, allerdings nur, wenn beide Versionen in der passenden Größe für das Gerät vorliegen. Sonst wird das verwendet, welches in der Reihenfolge höher steht.

          Hab deinen Beispielcode mal durchgetestet:
          Android 2.2/2.3/4.0: 144px precomposed
          iPhone: apple-touch-icon
          iPhone Retina: 114px
          iPad: 72px
          iPad Retina: 144px precomposed

          Somit wäre das normale 144px-Icon überflüssig

          Gruß

          • @Adreas:
            Vielen Dank für das Testen meines Beispielcodes! Habe selbst nur ein Android 4.0 zum Ausprobieren.

            Bei deiner Variante werden iSO 1 undBlackberry OS6 nicht unterstützt (sind aber auch nicht sehr verbreitet). Ich versuche möglichst alle Geräte zu unterstützen und mich nicht nur auf iDevices zu beschränken (es soll doch auch auf meinem HTC gut aussehen :P).

            Interessieren würde mich noch, ob du irgendwelche Effekte zu den precomposed-Icons hinzufügst oder ob sie einfach als glanzlose, flache Icons daher kommen.

            Wie sieht es mit Windows Phone aus? Lässt sich hier auch ein Icon definieren anstelle eines Snapshots?
            (http://www.russellbeattie.com/blog/creating-a-pinnable-windows-phone-7-tile-for-your-website-like-google)

            Aktualisierter Beispielcode: http://pastebin.com/dPRsS48e
            Hier würde beim precomposed-Icon einen Effekt, wie er automatisch bei den normalen Icons erstellt wird wohl Sinn machen, um keine Unterschiede zwischen den Icons zu haben.

            Gruss

  9. Hi Ellen,

    ich habe auch einen schönen Code gefunden:
    http://cubiq.org/add-to-home-screen
    Dort kann man auch noch einiges editieren.

    Aber ich hab eine Frage. Ich nutze WordPress und ein responsive Theme das ich über IPhone aufrufe.
    Wenn ich nun den Code einfüge und das Icon auf den Server laden, wird das zwar in der „Bubble“ angezeigt, wenn ich aber auf „zum Home Bildschirm“ klicke und ich den Text defienieren kann, ändert sich das Icon und wird schwarz. Das ist dann nicht schön.

    Vielleicht hat es damit zu tun das meine Startseite eine Portfolio Seite ist ?

    Ich bin etwas ratlos weil ich schon ewig rumprobiere.

    Damit Du weißt was ich meine öffne mit IPhone (wenn Du eins hast) diese Seite:
    neoevoke.sfe.co.at

    Vielen Dank für die Hilfe.
    Stefan

  10. Hallo, ich bin auf der Suche nach einem Plugin für WordPress, welches beim Aufruf eins WordPress Themes auf einem Mobilen Device von Apple im Safari dem Benutzer einen Hinweis gibt das er die Webseite via Apple Touch direkt aufrufen kann.

    Ich habe das schon bei diversen Seiten gesehen und würde das gern auch meinen Kunden zur verfügung stellen.

    Ich hoffe die Fragestellung war verständlich.

    LG Pascal

  11. Super Tipps, würde gerne ausprobieren.
    Aber wie soll ich es testen, wenn ich keine Geräte selber zum testen habe?
    (iphone3, 4, 5,…Android,…) Gibt es im Web Seiten, wo ich meine Webseite testen kann, wie es ausseht?

    Viele Grüße
    Peter

  12. Hallo Ellen,

    der Code für das Icon ohne Glanz-Effekt ist nicht ganz richtig. Das rel-Attribut muss ebenfalls „apple-touch-icon-precomposed“ heißen.

  13. Das ganze funktioniert auch wenn man die Icons in seinen Web Root packt.
    Sowie bei den normalen Favicon einer Webseite.

    Also ist das „“ nicht nötig.

  14. Vielen Dank Ellen,
    Du hast mir geholfen!
    Bei mir funktioniert es unter Android mit rel = apple-touch-icon-precomposed
    Der Code von Andreas ging bei mir nicht…

  15. Ich selber lege, gerade wenn ich unterwegs bin, die Webseiten auf den Bildschirm, die ich oft benötige. Das ändern von Reise zu Reise. So bin ich sehr flexibel und kreiere mir meinen „Arbeitsplatz“ immer wieder neu. Ich habe ein Android Handy.
    In letzter Zeit bekam ich auf WP sehr viele Fehlermeldungen wegen des Aufrufs
    /apple-touch-icon-precomposed.png und /apple-touch-icon.png. Ich habe nun nach Deiner Anleitung diese Bilder erstellt. Nun bin ich mir nicht sicher, wo ich die auf dem Server ablegen muss bei einer WPMU. Gemäss 404 Report werden die Bilder im Stammverzeichnis gesucht. Da kann ich aber nicht, weil es ja eben noch andere WP-Seiten gibt. Ich habe sie ins Child-Theme gelegt. Ist das richtig?
    Wie kann ich das testen?

  16. Hallo Ellen

    Apple Touch Icon ist ja schon und gut und ein responsives Themes auch, aber was ich suche ist ein Hinweis/Vorschlag auf der Seite, wenn man mit iPhone/IPad etc. auf einer Seite ist, das man das Speichern kann. Denn die meisten User wissen nicht das es diese Funktion gibt. Mit einem Hinweiss auf
    der Startseite, resp. ein Vorschlag (klicke hier um die Seite auf …… zu speichern, würden sicher viel mehr Seiten auf den Devices gepeichert. Ich habe das schon auf Seiten angetroffen, weiss leider nicht mehr wo. Habe nach einem entprechenden WordPress Plugin gesucht und nichts gefunden. Vieleicht weisst Du oder sonst jemand wo und wie man das macht.

    LG Pascal

Hinterlasse eine Antwort

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