Non fornisce un'icona mela-touch valida

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

Come non viene superato il controllo dell'icona touch Apple di Lighthouse

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

Non fornisce un valore apple-touch-icon valido

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

Come aggiungere un'icona touch Apple

  1. Aggiungi <link rel="apple-touch-icon" href="/example.png"> al <head> della tua 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 garantire una buona esperienza utente, assicurati che:

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

Risorse