Icons verapplen

It's a maexotic world ...


"Rotten Apple" © 2010 Steff Hoehne
"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:

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

Comments

    • Posted byRoman
    • on
    Unter OSX verwendet Apple '.icns' als Multi-Image Format. Groessen hierbei sind 512, 256, 128, 32 und 16px.
    Reply

Add Comment

Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications.

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA