Ne fournit pas d'icône Apple Touch valide

.

Lorsque les utilisateurs Safari sur iOS ajoutent des progressive web apps (PWA) à leurs écrans d'accueil, l'icône qui s'affiche est appelée icône Apple pour écran tactile. 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 améliore l'expérience utilisateur.

Échec de l'audit de l'icône tactile Apple dans Lighthouse

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

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

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

Ajouter une icône tactile Apple

  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