Les favicons de l’iPhone : les Apple Touch Icons

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 :

Les Japonais et l’Internet mobile

Une de mes anecdotes sur le Japon qui surprend beaucoup est l’interdiction de téléphoner dans les transports publiques. Je dois admettre que j’apprécie beaucoup cette interdiction. Cela n’empêche pas pour autant les japonais d’utiliser leur téléphone portable. Et il n’est pas rare de voir la moitié des voyageurs d’un wagon rivés sur leur keitai (téléphone portable). Que font-ils dessus? Ecrivent-ils des textos? Ecoutent-ils de la musique?

Mon téléphone portable japonais

Et bien non. Les japonais ont un usage plus avancé de leur téléphone portable que nous. Ils passent leur temps à s’échanger des e-mails, à parcourir le web, à jouer à des jeux ou encore à regarder la télé. Les dernières statistiques publiées par Comscore sur l’utilisation du web mobile par les japonais montrent qu’ils sont aussi nombreux à utiliser Internet depuis leur ordinateur que leur téléphone portable.

Parmi les 53,6 millions de Japonais à utiliser leur téléphone portable pour accéder à Internet. 75% s’occupent de leurs e-mails. Et plus de 50% l’utilisent pour surfer et rechercher des infos. Il m’est arrivé plus d’une fois lors d’une discussion avec un(e) japonais(e), qu’il/elle me demande d’attendre quelques minutes le temps qu’il/elle fasse une recherche rapide sur le web avec leur téléphone mobile avant de répondre à ma question.

Ces chiffres laissent présager de l’engouement probable du web mobile en France une fois que les opérateurs auront fait l’effort de concevoir des forfaits abordables et bien pensés. Je suis actuellement en train de me prendre la tête pour trouver l’opérateur et le forfait qui me permettra de gérer mes e-mails depuis mon portable, tout en ayant la possibilité de tester des pages web… Le prix annoncé de l’iPhone étant un peu trop élevé à mon goût.

Si vous souhaitez en préparation améliorer vos compétence dans le domaine du web mobile, vous pouvez vous tourner vers le dernier livre de Cameron Moll.