Les inventions d'Apple que sont l'iPhone, l'iPod Touch et l'iPad forment aujourd'hui un ensemble d'outils permettant de naviguer sur le web. Leur popularité est telle que des fonctionnalités spécifiques à ces plate-formes sont souvent mises en place pour faciliter leur utilisation avec un site web en particulier et avec la navigation tactile.
Parmi elles, la création d'une icône spécifique d'accès au site web, pour l'écran d'accueil (un raccourci dirons-nous). En effet, le navigateur Safari Mobile qui accompagne les trois appareils cités précédemment prévoit la prise en compte d'une balise <link> supplémentaire pour faciliter la création d'un lien direct associé à un fichier icône au format PNG.
Par défaut si aucune icône n'est indiquée, une capture d'écran de votre site sera utilisée.
Implémentation d'une icône
Pour implémenter cette fonctionnalité sur votre site il vous suffit de créer une icône de format carrée, idéalement avec une résolution supérieure ou égale à 114 x 114 pixels (*). L'effet "glossy" et les coins arrondis seront ajoutés automatiquement par l'appareil lui-même. Sauvegardez le tout au format PNG.
Par défaut, le navigateur Safari Mobile vérifiera la présence d'un fichier portant le nom de apple-touch-icon.png à la racine de votre site. Cependant il vous est possible de prendre la main sur ce comportement (pour attribuer une icône spécifique à une page par exemple ou placer le fichier dans un sous-répertoire) pour cela il vous faut ajouter cette ligne dans la section <head> de votre code html :
<link rel="apple-touch-icon" href="chemin_vers_votre_image.png" />
Cette icône sera donc utilisée à la place de apple-touch-icon.png. Et le tour est joué!
(*) Apple recommandait initialement une dimension de 57 x 57 px, mais la résolution de leurs nouveaux appareils se trouvant augmentée, celle des icônes peut également l'être pour gagner en qualité. En effet toute icône sera redimensionnée aux valeurs requises par la plate-forme de destination. Notez que le site Apple.com utilise une icône de 129 x 129px. Les dimensions minimales sont de :
- iPad : 72 x 72 px
- iPhone (≥4) : 114 x 114 px
- iPhone ≤3GS: 57 x 57px
Allons plus loin
Apple prévoit de vous donner la main sur les détails.
Voyons précisément comment procéder.
Suppression des effets par défaut
Comme nous l'avons vu précédemment, la machine ajoute automatiquement des reflets sur votre icône.
Il est possible de lui demander de ne pas les mettre en utilisant la valeur "apple-touch-icon-precomposed" :
<link rel="apple-touch-icon-precomposed" href="chemin_vers_votre_image.png" />
Adapter votre image aux résolutions
Apple prévoit également de pouvoir multiplier les occurence du link pour ajouter autant d'icônes adaptées aux différentes résolutions.
Pour ce faire il suffit de rajouter lattribut size à l'élément link :
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
Ici nous avons donc une icône adaptée à iPhone 3 (la première en 57 x 57 px), une icône adaptée aux iPads, et une dernière pour l'iPhone 4 et + (Retina).
Commentaires
Vu que Safari Mobile chercher ce apple-touch-icon.png, j'ai peur que ça fasse comme favicon.ico, c'est à dire qu'on soit obligé de créer ce fichier (même vide) si on ne veux pas accumuler les erreurs 404 dans les logs de son serveur HTTP.
Pour information, si on ne veut pas que l'effet glossy et les coins arrondis soient appliqués, il faut nommer l'icône apple-touch-icon-precomposed.png (ou rajouter -precomposed dans la valeur de l'attribut rel si on utilise la solution à base de balises link).
Dernier truc. Si on veut forcer notre icône de 72px pour les iPad (par exemple) et empêcher Safari de redimensionner automatiquement la grande version, il faut utiliser :
< link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="/link/to/iOS-57px.png" />
< link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="/link/to/iOS-72px.png" />
< link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="/link/to/iOS-114px.png" />
Cf. http://www.campaignmonitor.com/blog/post/3234...
On y apprend aussi qu'il y a un bug avec les iPhone 4 et l'option "apple-mobile-web-app-capable". L'icône devient pixellisée...
C'est vraiment une utilisation spécifique.
Très bien pour un site mobile mais moins pour un site/blog perso par exemple (surtout si il n'a pas de version mobile).
Mais c'est un "plus" qui ne coute pas grand chose.
Merci pour les captures étapes par étapes, on peut voir où et comment sera affichée l'icone.
Super merci. pour la France d'en Bas (sous Wordpress et une version mobile) un clone en blog de mon autre site Destinationcyber.com, j'avais fait un post pour annoncer cette version mobile et comment l'intégrer dans l'iPhone, mais sans mettre d'icône spécifique. Effectivement, sur l'iPhone cela affiche une copie d'écran en icône.
Mouais....Pas super fan personnellement de la politique d'Apple en matière de balise méta. Entre celle spécifique au viewport, l'inclinaison...etc, si tous les constructeurs commencent à en faire de même on va finir avec un <head> plus gros que le <body>, façon culbuto inversé...
@ThomasB : En effet, il est possible d'empêcher l'appareil de modifier l'icône, je ne voulais pas non plus aller trop loin dans la description des possibilité, et surtout autant essayer de garder une harmonie des icônes dans les apparareils Apple! Mais ton info est juste ;-)
@JackNUMBER Tu oublis l'iPad dans ton raisonnement, qui permet de naviguer de manière aisé sur le web, et cette fonctionnalité d'ajout d'icône sur la page d'accueil est vraiment très pratique!
@fanchlerouge Tout le plaisir est pour moi!
@Florian_R Je partage cet avis, les développent spécifique ne devrait pas exister, mais le problème ici c'est que Apple a créé un tout nouveau média avec ses spécificités, un développement spécifique est donc nécessaire, d'autant plus nécessaire que leur nombre d'utilisateurs est très important et toujours en forte croissance!
Merci pour la demarche :)
Si je suis réticent également aux balises propriétaires, il en est qui s'imposent comme des standards à apporter à son site. Il me semble que Facebook possède aussi une balise pour représenter en image une page qu'une personne voudrait partager sur le réseau social.