L'icône Apple Touch fournit explicitement l'image utilisée lorsqu'un visiteur ajoute votre site à l'écran d'accueil de son iPhone. Elle reste distincte du favicon d'onglet et des icônes déclarées dans le manifeste web.
Une seule taille : 180×180
180×180 pixels est la dimension couramment utilisée pour fournir une source haute définition. iOS sait réduire cette image pour des emplacements plus petits, ce qui permet de conserver une seule déclaration dans la plupart des projets.
Les anciennes recommandations listaient huit fichiers, de 57×57 à 152×152, avec une balise sizes pour chacun. Ces variantes ne servent plus : elles alourdissent votre HTML et provoquent des requêtes supplémentaires pour un rendu identique.
Le fichier doit être un PNG. iOS ne lit ni le SVG ni le WebP pour cette icône, et un JPEG perd le rendu net des aplats.
Préférer un fond opaque
Un fond transparent peut produire un résultat inattendu selon la version et le contexte d'affichage. Pour maîtriser le rendu de l'icône d'écran d'accueil, fournissez une composition avec un fond opaque choisi.
La solution est d'aplatir l'icône sur un fond opaque avant l'export. Choisissez une couleur de marque, ou un blanc franc si votre symbole est coloré, et ajoutez une marge d'environ 10 % autour du dessin pour respirer.
Inutile en revanche d'arrondir les coins vous-même : iOS applique son propre masque arrondi par-dessus. Un fichier déjà arrondi donne un double arrondi, avec des angles disgracieux.
La balise à coller
Une seule ligne suffit dans le head de vos pages : link rel="apple-touch-icon" href="/apple-touch-icon.png". L'attribut sizes est facultatif quand vous ne fournissez qu'un fichier.
Ajoutez éventuellement meta name="apple-mobile-web-app-title" content="Votre marque" pour maîtriser le libellé affiché sous l'icône. Sans cette balise, iOS reprend le titre de la page, souvent trop long, et le tronque.
Placez aussi une copie du fichier à la racine sous le nom apple-touch-icon.png : comme pour le favicon.ico, iOS le cherche à cette adresse quand aucune balise n'est trouvée.
Pourquoi votre icône ne se met pas à jour
iOS met l'icône en cache de façon agressive, et un raccourci déjà posé sur l'écran d'accueil ne change jamais tout seul. Pour tester une nouvelle version, supprimez le raccourci, videz les données de Safari, puis rajoutez le site.
Si l'icône reste absente, vérifiez trois points : le fichier répond bien en 200 et non en 404, il est servi avec le type image/png, et il n'est pas bloqué par une règle du robots.txt ou par une authentification.
Le vérificateur de favicon de LFFavicon teste exactement ces cas sur n'importe quelle URL publique, et affiche l'icône réellement récupérée.
Sources primaires
Questions fréquentes
Faut-il plusieurs tailles d'apple-touch-icon ?
Dans la plupart des projets, un fichier haute définition en 180×180 permet à iOS de produire les rendus plus petits. Testez les appareils inclus dans votre matrice de support.
Android utilise-t-il l'apple-touch-icon ?
Chrome sur Android peut s'en servir en dernier recours, mais il lit d'abord les icônes du manifeste web. Déclarez toujours vos icônes 192×192 et 512×512 dans le manifeste, c'est le chemin officiel.
Peut-on utiliser un SVG comme icône Apple Touch ?
Non, iOS attend un PNG matriciel pour cette balise. Gardez le SVG pour le favicon des navigateurs de bureau, où il apporte netteté et gestion du mode sombre.