kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Apple Touch Icon für das Retina Display

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

8 Kommentare

  1. André

    Verfasst am 23. September 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? ;-)

  2. Jonas Hellwig

    Verfasst am 23. September 2010 um 18:56 Uhr.

    Hängt es. ;)

  3. Ferdi

    Verfasst am 3. November 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

    • Jonas Hellwig

      Verfasst am 3. November 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

  4. Ferdi

    Verfasst am 4. November 2010 um 13:05 Uhr.

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

  5. Konrad

    Verfasst am 18. Mai 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

  6. Webdesign Soest

    Verfasst am 4. Januar 2013 um 1:48 Uhr.

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

  7. Cindy

    Verfasst am 26. April 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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.