Neben dem Favicon gehört das WebClip-Icon (auch Apple Touch Icon genannt) mittlerweile zum Must-Have einer guten Website. In einem älteren Artikel habe ich erklärt was genau man machen muss und worum es sich hier überhaupt handelt.

Nun schiebe ich ein wichtiges Update nach: Seit dem iPhone 4 mit seinem brillianten Retina-Display muss das Apple Touch Icon nämlich in höherer Auflösung vorliegen, sonst sieht es so aus wie auf folgendem Screenshot.

Höhere Auflösung für das Apple Touch Icon auf dem Retina Display

Damit das Icon auch auf dem Retina-Display hübsch anzusehen ist muss es nicht wie bisher in einer Abmessung von 60 x 60 Pixeln sondern in 129 x 129 Pixeln Größe vorliegen! Ansonsten bleibt alles beim Alten. Das Icon muss als PNG unter dem Namen „apple-touch-icon.png“ im Root Eurer Website liegen.

Tipp: Wenn Ihr das Icon aktualisiert dauert es ein wenig bis das iPhone es merkt. Um diesen Vorgang zu beschleunigen könnt Ihr die Grafik direkt im mobilen Browser aufrufen. Anschließend ist der Cache geleert.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 12 Kommentare

  1. Henryk
    schrieb am 17.12.2018 um 23:44 Uhr:

    Hallo Jonas, wie bekomme ich das hin, dass im neuen Tab vom Firevox ein Vorschaubild bei Überblick angezeigt wird. Nicht nur die ICONS, unter wichtige Seiten. Nennt sich card-preview-image, wenn man auf Elemt untersuchen geht. Meine og:image hab ich befüllt :)
    Hab dazu noch nichts im Netz gefunden…. Villeicht weißt du ja schon was…

    Antworten
    • Jonas Hellwig
      schrieb am 18.12.2018 um 16:42 Uhr:

      Hallo Henryk, puh – gute Frage. Dazu muss ich auch erst einmal recherchieren. Kann ich dir leider spontan nicht sagen.

      Antworten
      • Henryk
        schrieb am 23.12.2018 um 08:53 Uhr:

        Hallo Jonas, übrigens vielen Dank für den Tipp aus dem Artikel, hat wunderbar geklappt. Wird jetzt sehr schön als Vorschauicon im Firefox angezeigt.
        https://www.lerne-kaempfen.de/images/vorschaubild-icon.jpg
        Mit dem anderen Bild hat jetzt auch geklappt.
        https://www.lerne-kaempfen.de/images/vorschaubild-icon2.jpg
        Ich hatte einfach die Bildgröße geändert (300×200) und zusätzlich die og Angaben eingefügt.

        Scheint daran gelegen zu haben.
        Ich probiere jertzt noch ob meine og: url auch mit Umlauten angezeigt wird.
        Die Seite ist unter lerne-kaempfen.de gehostet und unter lerne-kämpfen.de (für die Flyer und Werbung) hab ich eine Weiterleitung… mal sehen.
        (Bitte lösch den Post von Cindy, er führt auf eine Pornoseite)

  2. Cindy
    schrieb am 26.04.2013 um 19:29 Uhr:

    Wieso 129×129 … die Größe als Ausgangsgröße ist falsch. Der Artikel gehört etwas überarbeitet. Hier: http://favicons.info/apple-touch-icon.html wie auch wo anders ist von 144×144 die Rede. Grüße

    Antworten
  3. Webdesign Soest
    schrieb am 04.01.2013 um 01:48 Uhr:

    Auch nach einer Aktualisierung und direktem Aufruf klappt es nicht. Sowohl im Root als auch im /images-Ordner. Gibt es neue Erkentnisse?

    Antworten
  4. Konrad
    schrieb am 18.05.2011 um 14:46 Uhr:

    Im root der Webseite *graus*. Das klingt ja nach schlimmster Microsoft – favicon.ico Manier.

    Apple selbst gibt in ihrer Dokumentation genau an, wie die verschiedenen Icon Größen verlinkt werden sollen.

    lg konrad

    Antworten
  5. Apple Touch Icon (auch ohne Glanz) erstellen | kulturbanause blog
    schrieb am 19.04.2011 um 20:06 Uhr:

    […] In einem früheren Beitrag habe ich bereits erklärt wie Ihr das Apple Touch Icon erstellt und welche Voraussetzungen das Icon erfüllen muss damit es auch auf dem Retina-Display des iPhone 4 hü…. Nun möchte ich erneut ein Update nachschieben und erklären wie Ihr den automatisch von iOS […]

    Antworten
  6. Ferdi
    schrieb am 04.11.2010 um 13:05 Uhr:

    Danke für dein Antwort, ich werde es mal ausprobieren!

    Antworten
  7. Ferdi
    schrieb am 03.11.2010 um 21:23 Uhr:

    Hab mal ne Frage:
    Kann ich auch einen Titel für die App (in HTML) eingeben?
    Also wenn man auf das „+“-Symbol –> „Zum Home-Bildschirm hinzufügen“ drücke, dann seh ich ja links das Icon und rechts kann man einen Namen eingeben, kann man den schon vorprogrammieren?

    Ich hoffe ihr könnt mir weiterhelfen!
    Ich bedank mich schon mal im Voraus! :)
    Ferdi

    Antworten
    • Jonas Hellwig
      schrieb am 03.11.2010 um 21:44 Uhr:

      Ich glaube das funktioniert so ohne weiteres nicht. Das iPhone nimmt immer automatisch den <title> der gebookmarkten Seiten. Allerdings kannst du versuchen für das iPhone einen alternativen <title> anzugeben. Damit könntest du es dann bestimmen.

      <title><?php echo strpos($_SERVER['HTTP_USER_AGENT'], 'iP')?'iDevice title':'normal title'; ?></title>

      Bei dynamischen Seitentiteln wird das ganze dann aber evtl. etwas lästig.

      Der oben gepostete Code ist nicht getestet. Danke für Feedback!

      http://stackoverflow.com/questions/3400741/setting-home-screen-icon-name-for-mobile-safari

      Antworten
  8. Jonas Hellwig
    schrieb am 23.09.2010 um 18:56 Uhr:

    Hängt es. ;)

    Antworten
  9. André
    schrieb am 23.09.2010 um 18:49 Uhr:

    Na ob die Aktualisierung des WebClip-Icons von kulturbanause.de wohl damit zusammenhängt, dass der Betreiber des Blogs seit kurzem auch ein iPhone 4 sein Eigen nennt? ;-)

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →