Apple touch icon : taille, balise et comportement iOS
Un apple touch icon est l'image qu'iOS utilise lorsqu'un utilisateur ajoute votre site à l'écran d'accueil depuis Safari. Vous le livrez sous forme d'un seul PNG de 180x180 à /apple-touch-icon.png et le désignez avec une balise link utilisant rel="apple-touch-icon". iOS ignore la transparence dans cette image et la compose sur du noir, alors donnez-lui un fond opaque, et laissez iOS appliquer les coins arrondis plutôt que de les intégrer.
Ce qu'iOS en fait
Lorsqu'un utilisateur appuie sur Partager puis sur Ajouter à l'écran d'accueil dans Safari, iOS a besoin d'une icône de lanceur. Il recherche une balise link avec rel="apple-touch-icon", et s'il n'y en a pas, il demande /apple-touch-icon.png et /apple-touch-icon-precomposed.png directement à la racine du site. S'il ne trouve rien, il se rabat sur une capture d'écran de la page, ce qui n'a jamais l'air intentionnel.
L'image que vous fournissez est carrée et à fond perdu. iOS applique son propre masque à coins arrondis lorsqu'il dessine l'icône, donc une image source dont les coins sont déjà arrondis finit doublement arrondie, avec des artefacts visibles sur les bords.
La balise
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Une balise et un fichier constituent toute la configuration moderne. Servez le même fichier à /apple-touch-icon.png pour que le chemin de repli sans balise se résolve aussi.
Ce qu'il faut livrer
| Élément | Valeur |
|---|---|
| Dimensions | 180x180 pixels |
| Format | PNG, sans alpha nécessaire |
| Chemin | /apple-touch-icon.png |
| Fond | Opaque : la transparence est composée sur du noir |
| Coins | Source carrée ; iOS masque lui-même les coins |
| Marge de sécurité | Gardez la marque à l'écart des quelques pour cent extérieurs pour que le masque ne la coupe pas |
FAQ sur l'apple touch icon
Ai-je besoin des neuf tailles historiques d'apple-touch-icon ?
Non. iOS actuel utilise le 180x180 et le réduit pour les contextes plus petits. Les variantes 57, 60, 72, 76, 114, 120, 144 et 152 ne comptent que pour de très vieux iPhone et iPad.
Qu'est-ce qu'apple-touch-icon-precomposed ?
Une désactivation historique. Les anciens iOS ajoutaient un reflet brillant aux icônes de l'écran d'accueil, et la variante precomposed lui disait de ne pas le faire. iOS a cessé d'ajouter ce reflet depuis des années, donc le simple rel="apple-touch-icon" est tout ce dont vous avez besoin.
Android utilise-t-il l'apple-touch-icon ?
Chrome sur Android l'utilisera comme solution de repli si votre site n'a pas d'icônes dans son manifeste d'application web, mais ce n'est pas quelque chose sur quoi compter. Déclarez des PNG de 192x192 et 512x512 dans le manifeste pour Android et laissez l'apple-touch-icon servir iOS.