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>
:

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
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>
…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