L'apple-touch-icon : un guide complet
Quand quelqu'un ajoute votre site à l'écran d'accueil de son iPhone, iOS s'appuie sur une balise. Trompez-vous et il attrape une capture floue de votre page à la place.
Ce qu'est l'apple-touch-icon
L'apple-touch-icon est l'icône qu'iOS utilise quand un utilisateur touche « Ajouter à l'écran d'accueil ». Elle est distincte de votre favicon et distincte du web app manifest. Elle existe parce qu'iOS veut une icône façon app en pleine qualité, pas le minuscule favicon d'onglet agrandi.
Un seul PNG 180x180 suffit. L'iOS actuel réduit ce fichier unique pour chaque contexte dont il a besoin, donc vous ne publiez pas l'ancienne échelle de tailles 57, 72, 114 et 152.
La balise link
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- You can pin the size, but iOS defaults to the 180 file fine: -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">iOS cherche aussi /apple-touch-icon.png à la racine du site même sans balise, mais le déclarer est plus fiable selon les configurations.
La spécification en un coup d'œil
| Propriété | Valeur |
|---|---|
| Dimensions | 180x180 |
| Format | PNG |
| Transparence | Ignorée, composée sur du noir |
| Coins | Source carrée, iOS les arrondit pour vous |
| Nom du fichier | apple-touch-icon.png à la racine du site |
Pièges courants
N'avoir aucun apple-touch-icon est le pire cas. Quand iOS n'en trouve pas, il se rabat sur une capture réduite de la page, qui est floue et hors identité. Une seule balise règle cela.
Arrondir les coins vous-même est une erreur. iOS applique son propre masque de carré arrondi, donc une source pré-arrondie est arrondie deux fois et affiche une fine bordure de fond autour de l'icône. Donnez-lui une image carrée, pleine page.
La mise à jour n'est pas instantanée. Une fois que quelqu'un a ajouté votre site à son écran d'accueil, changer l'icône sur votre serveur ne met pas à jour son raccourci existant. Il doit le supprimer et l'ajouter à nouveau pour récupérer la nouvelle icône.
Questions fréquentes
Quelle est la taille d'un apple-touch-icon ?
180x180 pixels, en PNG. L'iOS actuel met à l'échelle ce fichier unique pour chaque contexte, donc vous n'avez pas besoin des anciennes tailles 57, 72, 114 ou 152.
Pourquoi mon apple-touch-icon affiche-t-il un fond noir ?
iOS ignore la transparence sur l'apple-touch-icon et le compose sur du noir. Exportez le PNG avec une couleur de fond pleine plutôt que transparente.
Pourquoi iOS affiche-t-il une icône floue pour mon site ?
Vous n'avez probablement pas d'apple-touch-icon. Sans lui, iOS utilise une capture réduite de la page. Ajoutez un PNG 180x180 et la bonne balise link.
Pourquoi mon icône d'écran d'accueil ne s'est-elle pas mise à jour après que je l'ai changée ?
Les raccourcis existants sur l'écran d'accueil mettent en cache l'icône avec laquelle ils ont été créés. L'utilisateur doit supprimer le raccourci et ajouter à nouveau le site pour récupérer un nouvel apple-touch-icon.