Notes

L’Apple Touch Icon et le Retina Display de l’iPhone 4

Un icône 129 x 129 px pour les iDevices

Tags : , , , ,

J’avais posté ici même, à la sortie de l’iOS 1.1.3, un tutoriel vous expliquant comment afficher une icône de votre site sur le springboard de l’iPhone et de l’iPod Touch.

Je vous y expliquais comment créer une icône de 57x57px nommée “apple-touch-icon.png”.

J’y relevais également le mystère de l’Apple Touch Icon du site d’Apple qui, elle, ne mesurait pas 57x57px mais était bien plus grande : 129 x 129 px http://apple.com/apple-touch-icon.png.

L’apple-touch-icon du site d’Apple :

 Apple apple-touch-icon.png

L’arrivée du Retina Display et de l’iPad

Le mystère est maintenant levé avec l’arrivée sur le marché de l’iPad, accompagné de son grand écran, ainsi que de l’iPhone 4 et de son Retina Display, le fameux écran possédant une résolution de plus de 300dpi.

Je fais un aparté pour dire qu’en tant que graphiste, la nouvelle de la sortie de cet écran à été une véritable claque et promet un avenir merveilleux pour la création graphique pour écran (screen) quand cette définition d’écran sera standardisée et arrivera sur toutes les machines. En effet 300dpi est la définition de l’impression sur papier (print) et passer à 72dpi pour l’écran, en tant que créateur, ça a toujours été assez frustrant. Relever la définition des écrans au même niveau de définition que le papier, c’est à dire à 300dpi, la définition où les points deviennent invisibles à l’oeil nu est un vieux fantasme qui devient donc, avec le Retina Display d’Apple, une réalité.

Utilisez une icône de 129 x 129 px

Sur cet écran ultra précis, donc, les icônes en 57 x 57 px apparaissent pixélisées, Il créé, en effet des icônes de 114 x 114 px. L’iPad, quant à lui, créé des icônes de 72 x 72 px.

- iPhone ≤3GS : 57 x 57px
- iPad : 72 x 72 px
- iPhone (≥4) : 114 x 114 px

Pour que la touch icon de votre site apparaisse bien sur les écrans de ces nouveaux devices, je recommande à tout le monde d’installer sur son site une icône de 114x114px au minimum, et, pour plus de confort et de sécurité quant à l’avenir : il est préférable de faire comme Apple et d’utiliser une icône de 129 x 129 px.

Installer sa favicon sur son site

- Déposer l’image dans le dossier racine de votre site web. Safari ira automatiquement la chercher.

- Vous pouvez également mettre cette icône où vous voulez et l’appeler dans head. Vous pouvez, ainsi, avoir une icône différente pour chaque section de votre site. (Vous voulez, peut-être, une icône de banane pour votre rubrique "Banane" et une icône de Kiwi pour illustrer votre rubrique "Kiwi".)

<link rel="apple-touch-icon" href="icone_perso.png"/>

Pour votre site sous SPIP :

[(#REM) Icone WebClip pour iPhone/iPod Touch ]
[<link rel="apple-touch-icon" href="(#CHEMIN{icone_perso.png})"/>]

- iOS transformera automatiquement votre image et lui ajoutera un petit effet de brillance et des coins arrondis. Vous pouvez cependant annuler cette fonction si vous préférez ajouter vous-même ces effets (ou tout simplement vous en passer). Il faut dire à iOS que votre icône est déjà précomposée :

<link rel="apple-touch-icon-precomposed" href="icone_perso.png" />

© 2017 - Abel Poucet web design