L'icône Apple Touch est celle qui apparaît quand un visiteur ajoute votre site à l'écran d'accueil de son iPhone. iOS ignore le manifeste web pour ce cas précis, et applique ses propres règles. Elles tiennent en trois points.
Une seule taille : 180×180
180×180 pixels est la dimension attendue par les iPhone récents, et c'est aussi la plus grande jamais demandée. Comme iOS sait réduire une image, une icône de 180×180 couvre tous les appareils, iPad compris.
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.
Pas de transparence, jamais
C'est l'erreur la plus courante et la plus visible. iOS ne conserve pas le canal alpha d'une icône d'écran d'accueil : il remplit toutes les zones transparentes en noir. Un logo sombre sur fond transparent devient donc un carré noir sur du noir.
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.