Non fornisce un'icona mela-touch valida

Quando gli utenti di Safari per iOS aggiungono app web progressive (PWA) alle schermate Home, l'icona che viene visualizzata si chiama icona touch Apple. Puoi specificare quale icona deve essere utilizzata dalla tua app includendo un tag <link rel="apple-touch-icon" href="/example.png"> nella sezione <head> della pagina. Se la tua pagina non ha questo tag link, iOS genera un'icona acquisendo uno screenshot dei contenuti della pagina. In altre parole, se indichi a iOS di scaricare un'icona, l'esperienza utente sarà più curata.

In che modo il controllo dell'icona al tocco di Apple in Lighthouse non va a buon fine

Lighthouse segnala le pagine senza un tag <link rel="apple-touch-icon" href="/example.png"> in <head>:

Non fornisce un&#39;icona-apple-touch-icon valida

Lighthouse non controlla se l'icona esiste effettivamente o se ha le dimensioni corrette.

Come aggiungere un'icona Apple touch

  1. Aggiungi <link rel="apple-touch-icon" href="/example.png"> in <head> della pagina:

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

  2. Sostituisci /example.png con il percorso effettivo dell'icona.

Per offrire una buona esperienza utente, assicurati che:

  • L'icona è di 180 x 180 pixel o 192 x 192 pixel
  • Il percorso dell'icona specificato è valido
  • Lo sfondo dell'icona non è trasparente

Risorse