Ne fournit pas d'icône Apple Touch valide

Lorsque les utilisateurs d'iOS Safari ajoutent des progressive web apps (PWA) dans l'écran d'accueil, l'icône qui s'affiche est appelée 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 la section <head> de votre . Si votre page ne comporte pas cette balise de lien, iOS génère une icône en faisant une capture d'écran de le contenu de la page. Autrement dit, demander à iOS de télécharger une icône permet d'obtenir l'expérience utilisateur.

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

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

<ph type="x-smartling-placeholder">
</ph> 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 est à 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é, 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é vers l'icône est valide
  • L'arrière-plan de l'icône n'est pas transparent.

Ressources