Ne fournit pas d'icône Apple Touch valide

Lorsque les utilisateurs de Safari sous iOS ajoutent des progressive web apps (PWA) à leurs écrans d'accueil, l'icône qui apparaît est appelée icône Apple Touch. 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 effectuant une capture d'écran du contenu de la page. En d'autres termes, demander à iOS de télécharger une icône se traduit par une expérience utilisateur plus soignée.

Échec de l'audit des icônes Apple Touch dans Lighthouse

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

Ne fournit pas de apple-touch-icon valide

Lighthouse ne vérifie pas si l'icône existe réellement ni si sa taille est correcte.

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é, vérifiez les points suivants:

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

Ressources