Le Carnet de Thierry » mobile http://regagnon.com/blog Les aventures de Thierry Régagnon sur le Web et au Japon. Wed, 25 Apr 2012 05:54:24 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Les favicons de l’iPhone : les Apple Touch Icons http://regagnon.com/blog/2008/12/03/favicons-iphone-apple-touch-icons/ http://regagnon.com/blog/2008/12/03/favicons-iphone-apple-touch-icons/#comments Wed, 03 Dec 2008 18:01:57 +0000 Thierry http://regagnon.com/blog/?p=132 Les possesseurs d’iPhone ou d’iPod Touch sont des utilisateurs un peu à part. Ils ont leur propre format de favicon. Les favicons « classiques » ne sont pas affichées par Safari Mobile. Mais il est par contre possible de définir une icône à afficher sur l’écran d’accueil (utilisée comme raccourci). Je vous conseille fortement de prendre le temps de créer une icône pour ses utilisateurs. Si aucune icône n’a été définie pour le site web, Safari Mobile réalise une capture d’écran de la partie visible de la page afin de l’utiliser pour icône. En pratique, à moins d’avoir un site comportant des couleurs vives et uniques, à partir de la deuxième icône de ce style, il devient très difficile d’identifier le raccourci.

Capture d'écran d'un iPhone montrant les deux types d'icones (capture du site et personnalisée)

Comme vous pouvez le voir avec cette capture d’écran de mon iPhone, l’icône générée automatiquement est totalement inutile car il est quasiment impossible d’identifier le site web (pour cette exemple, mon blog) et en plus elle est moche! Par contre, l’icône personnalisée a l’air d’être native à l’iPhone et attire le regard, ce qui est idéal pour les utilisateurs exigeant que sont les consommateurs des produits Apple.

Comment fait on pour personnaliser ces icônes?

Premièrement, ce n’est applicable que sur les iPhones avec au moins la mise à jour 1.1.3 comportant la fonctionnalité Web Clip. Je pense que tous les iPhones sont à jours, mais on ne sait jamais…

Il faut savoir que l’iPhone applique 3 effets avant de rajouter l’icône sur l’écran d’accueil :

  • des bords arrondis,
  • une ombre sous l’icône,
  • un aspect brillant.

Une icône avant et après l'ajout des effets visuel par l'iPhone

Ne donnez donc pas un aspect brillant ou des bords arrondis à votre image. Cela ferait double emploi… L’iPhone attend une image au format PNG de 57 par 57 pixels, dans le cas contraire l’image est redimensionnée à la bonne taille.
Mise à jour du 28 juin 2010 : Avec la sortie de l’iPhone 4, la taille maximale des icônes est passée à 114 par 114 pixels pour tenir compte du nouvel écran.

Le plus simple pour appliquer l’icône sur tout un site web, est de la mettre à la racine avec le nom : apple-touch-icon.png. Depuis la version 2.0 du firmware de l’iPhone, il est possible d’indiquer par le nom du fichier, que l’on ne veut pas des effets visuels supplémentaires. Pour cela le fichier doit s’appeler : apple-touch-icon-precomposed.png.

Mais si on ne veut appliquer l’icône que sur sur une page, ou un ensemble de pages? Dans ce cas-là, il vous faut la définir directement dans le section head de votre document HTML par ce bout de code :

<link rel="apple-touch-icon" href="/nom-icone-personalisee.png" />

L’effort n’est pas monstrueux et c’est beaucoup plus confortable pour les utilisateurs d’iPhone et d’iPod Touch. Vos internautes pourront alors être fiers d’arborer le raccourci de votre site sur leur écran d’accueil.

Voici 2 articles de l’Apple Developer Connection sur le sujet :

]]> http://regagnon.com/blog/2008/12/03/favicons-iphone-apple-touch-icons/feed/ 6