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 :

11 réflexions au sujet de « Les favicons de l’iPhone : les Apple Touch Icons »

  1. Merci pour l’info, moi je cherchais pourquoi les logs d’apache étaient infesté d’erreurs 404 pour les fichiers apple-touch-icon-precomposed.png et compagnie.

    Contrairement à l’auteur de l’article je déconseille tous les webmasters de créer ce genre d’icônes personnalisées.

    Je trouve ça d’un mauvais goût même. Apple se la joue Microsoft maintenant ?

    Oui, trois ou quatre icônes ça coûte pas cher mais si tout le monde se la joue pareil, vous imaginez si pour créer un site WEB il fallait développer un supplément pour chaque ordinateur susceptible de naviguer sur ce fameux site ? On avait déjà pas assez d’Internet Explorer qui respecte pas les standards ou Mozilla qui impose les siens, il faut encore qu’on se coltine les « iPhone » et compagnie.

    Déjà qu’un Internet parallèle se développe depuis plusieurs années (le WAP) qui commence à prendre une importance non-négligeable.

    Alors au final on doit développer un site WEB pour les machines et navigateurs habituels, un pour Internet Explorer, un pour le WAP adapté à des petits écrans de quelques milliers de pixels un pour des PDA/netbooks en (S)VGA, puis des icônes pour Môssieur iPhone.

    D’un côté la résolution des écrans augmentent : les gens ont des écrans de 19, 20 voire 21/ 22 pouces, du coup les sites évoluent pour profiter de cette grande taille, mais de l’autre, on se réduit à des écrans de 10cm². OK, je dérive.

    :/

    Dommage que l’iPhone ait fait un carton, ça leur aurait fait changer de méthode.

  2. Je me sens un peu bête là … je viens de découvrir cette fonctionnalité grâce à cet article. Merci bcp! reste plus qu’à créer une icone … et à développer la version mobile de toupil.fr, pour simuler une application iphone 🙂

  3. A je comprends tout .. On peut bloquer ces requêtes par un robots.txt par hasard ? Parce que bon je ne propose pas ces images sur mes sites et j’ai des tonnes d’erreurs 404 dans les logs apache aussi.

    Merci apple !! ..

  4. Attention, autres tailles: 72 et 144. @David Perso je fait un fichier apple-touch-icon.png, et dans mon .htaccess: RewriteRule apple-touch-icon-precomposed\.png$ /apple-touch-icon.png [QSA,L,R=301] RewriteRule apple-touch-icon-57×57\.png$ /apple-touch-icon.png [QSA,L,R=301] RewriteRule apple-touch-icon-57×57-precomposed\.png$ /apple-touch-icon.png [QSA,L,R=301] RewriteRule apple-touch-icon-72×72\.png$ /apple-touch-icon.png [QSA,L,R=301] RewriteRule apple-touch-icon-72×72-precomposed\.png$ /apple-touch-icon.png [QSA,L,R=301] RewriteRule apple-touch-icon-114×114\.png$ /apple-touch-icon.png [QSA,L,R=301] RewriteRule apple-touch-icon-114×114-precomposed\.png$ /apple-touch-icon.png [QSA,L,R=301] RewriteRule apple-touch-icon-144×144\.png$ /apple-touch-icon.png [QSA,L,R=301] RewriteRule apple-touch-icon-144×144-precomposed\.png$ /apple-touch-icon.png [QSA,L,R=301]

  5. Je trouve hallucinant que ces messieurs d’Apple ne prennent pas la peine de prendre ce qui existe. Pour ma part, il n’y aura pas d’icone spécial Apple, peu de trafic venant de ces terminaux pour changer ce qui est établie et ce qui est pris en compte par 97% des autres terminaux. Je vais consentir un renommage en HTACCESS du favico.ico en apple-touch-icon.png pour ne plus qu’on remplisse mes logs pour rien…

  6. Merci pour l’info, ça faisait un moment que je me demandais pourquoi j’avais tant de 404 sur cette image dans mes logs 🙂

    C’est quand même fou, Apple craque ^^

  7. merci pour le temps que vous passer sur ce blog et les informations que vous faites figurer. En tout cas c’est un blog utile de plus il est facile à consulter. Bonne continuation!

  8. Merci pour cette astuce, je viens de le faire et c’est pas mal du tout ! bonne continuation !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *