Ne fournit pas d'icône Apple Touch valide

Lorsque les utilisateurs d'iOS Safari ajoutent des progressive web apps (PWA) à leur écran d'accueil, l'icône qui s'affiche est appelée Apple touch icon. Vous pouvez spécifier l'icône que votre application doit utiliser en incluant une balise <link rel="apple-touch-icon" href="/example.png"> dans le <head> de votre page. Si votre page ne comporte pas cette balise de lien, iOS génère une icône en prenant une capture d'écran du contenu de la page. En d'autres termes, demander à iOS de télécharger une icône permet d'offrir une expérience utilisateur plus soignée.

Échec de l'audit Lighthouse "Icône Apple Touch"

Lighthouse signale les pages sans balise <link rel="apple-touch-icon" href="/example.png"> dans <head> :

Ne fournit pas d&#39;icône apple-touch-icon valide

Lighthouse ne vérifie pas si l'icône existe réellement ni si elle a la bonne taille.

Ajouter une icône Apple Touch

  1. Ajoutez <link rel="apple-touch-icon" href="/example.png"> au <head> de votre page :

    <!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="apple-touch-icon" href="/example.png">
    …
  </head>
  …

  2. Remplacez /example.png par le chemin d'accès réel à votre icône.

Pour offrir une expérience utilisateur de qualité, assurez-vous que :

  • L'icône mesure 180 x 180 pixels ou 192 x 192 pixels.
  • Le chemin d'accès à l'icône spécifié est valide.
  • L'arrière-plan de l'icône n'est pas transparent

Ressources