Apple touch icon - Docs MetricSpot

Ce que vérifie ce contrôle

Cherche dans <head> un élément <link rel="apple-touch-icon"> et vérifie que le fichier référencé existe et se charge. iOS Safari utilise cette icône quand un visiteur fait Partager → Sur l’écran d’accueil.

Pourquoi c’est important

Quand les utilisateurs iOS sauvegardent votre site sur leur écran d’accueil, vous obtenez une installation gratuite façon App Store — mais seulement si vous avez fourni l’icône. Sans elle, iOS affiche une capture d’écran floue de la page à la taille d’une icône, ce qui paraît cassé et négligé. Une présentation façon app augmente significativement les retours de visite.

Apple a cessé d’exiger une touch icon pour l’indexation il y a des années, donc le contrôle porte sur la présentation et la confiance dans la marque, pas sur l’explorabilité. Mais le coût est d’un fichier PNG et de trois lignes de HTML, donc rien ne justifie de s’en passer.

Comment corriger

Ajoutez un PNG 180×180 à la racine de votre site et liez-le :

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

iOS cherche d’abord /apple-touch-icon.png à la racine du domaine, même sans balise <link> — placer le fichier là suffit donc souvent. Mais livrer explicitement le <link> est plus fiable sur les anciennes versions d’iOS et les clients tiers modernes (Slack, Discord, lecteurs RSS) qui s’en servent pour les aperçus.

Approche taille unique (recommandée pour la plupart des sites) :

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

180×180 est la plus grande taille demandée par iOS. iOS réduit pour les plus petites cibles — une seule image suffit.

Approche multi-tailles (uniquement si vous avez des raisons de marque pour optimiser chacune) :

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120.png">

Conseils de design :

PNG uniquement. Le JPEG crée des artefacts sur les fonds unis ; le SVG n’est pas pris en charge.
Pas de transparence. iOS applique un masque à coins arrondis et ajoute un léger reflet sur les anciennes versions — concevez pour un canevas carré, pleine page.
Lisible à la plus petite taille (76×76 sur les anciens iPad). Un logotype fonctionne ; une accroche de 20 caractères non.
Associez à une meta theme-color et un manifest d’application web pour l’expérience écran d’accueil complète sur iOS et Android.

Générer depuis une seule source :

RealFaviconGenerator prend une image source et produit la touch icon, le jeu de favicons, le manifest et le HTML à coller — couvre iOS, Android, les tuiles Windows et l’installabilité PWA en une passe.

Astro : déposez les icônes dans public/ et ajoutez le lien dans le <head> de BaseLayout.astro.

Next.js : placez apple-icon.png (180×180) directement dans app/ — l’App Router génère automatiquement la balise <link>.

app/
  apple-icon.png   # 180×180
  favicon.ico
  layout.tsx

WordPress : la plupart des thèmes modernes acceptent une touch icon sous Apparence → Personnaliser → Identité du site. Sinon, placez le PNG à la racine de votre thème et ajoutez le <link> dans header.php.

Questions fréquentes

Et les écrans d’accueil Android ?

Android utilise le manifest web pour trouver les icônes — le tableau icons avec des PNG 192x192 et 512x512. L’apple touch icon est exclusive à iOS ; livrez les deux.

Faut-il `apple-touch-icon-precomposed` ?

Non. Cette variante disait aux anciennes versions d’iOS de ne pas appliquer l’effet de reflet. iOS a retiré le reflet dans iOS 7 (2013) ; les appareils modernes ignorent complètement la variante precomposed. Restez sur apple-touch-icon.

Les navigateurs rechargent-ils l’icône quand je la mets à jour ?

iOS met l’icône en cache de manière agressive. Ajoutez une chaîne de requête quand vous la remplacez (href="/apple-touch-icon.png?v=2") pour que les copies en cache se mettent à jour. Même astuce pour la favicon.