Icons verapplen

"Rotten Apple"
© 2010 Steff Hoehne

Ich wundere mich seit einiger Zeit, dass ich immer wieder Zugriffe auf nicht existierende Bilder auf meinem Blog habe. Es handelt sich dabei um
/apple-touch-icon.png
/apple-touch-icon-precomposed.png

Nachdem ich heute nun im Quellcode einer Website über die Anweisung
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />
gestolpert bin, habe ich etwas recherchiert und folgende Seiten gefunden:

• iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips
• Safari Web Content Guide: Configuring Web Applications
• Safari HTML Reference: Supported Meta Tags

Dort erfährt man interessante Dinge:

1. Die ohnehin vorhandenen Anweisungen
   <link rel="shortcut icon" href="..." />
   <link rel="icon" href="..." />
   die Browser wie Firefox, Internet Explorer, Chrome und Opera verwenden, reichen natürlich für tolle Gadgets wie das iPhone nicht. Apple muss dafür eigene einführen, schließlich sind deren Icons unstandardmässig 57x57 Pixels groß.
   Wenn man das Attribut rel="apple-touch-icon" verwendet, werden die Ecken abgerundet und es wird ein tolles Schattenspiel darübergelegt.
   Will man das nicht, verwendet man rel="apple-touch-icon-precomposed" und signalisiert, dass man nicht will, dass Apple das Icon modifiziert.

   Unverständlicherweise machen das nicht alle Browser-Hersteller so, am besten auch noch gleich für jede Version ein eigenes Bild. Und sicher werden wir jetzt dann noch die Variante für das iPhone 4 mit höherer Auflösung und für das iPad kriegen, weil da sehen die 57x57 Pixel großen Popelicons sicher häßlich aus. Vielleicht verwendet Apple ja bald ein Multi-Image Format ähnlich ICO nur mit anderer Spezifikation?

2. Man kann noch viel mehr verwurschteln, mit:
   <meta name="apple-mobile-web-app-capable" content="yes" />
   kann man dem Safari das User-Interface ausblenden und ihn in den Vollbildschirm-Modus schalten.

3. Hat man obigen Fullscreen-Modus aktiviert, kann man sich noch über die Statusleiste her machen und sie mit
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
   halbdurchsichtig unterlegen, statt das Textfenster unterhalb davon beginnen zu lassen.

Na dann ...