Non fornisce un'icona mela-touch valida

.

Quando gli utenti di Safari per iOS aggiungono app web progressive (PWA) alle proprie schermate Home, viene visualizzata l'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 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 chiedi a iOS di scaricare un'icona, l'esperienza utente sarà più raffinata.

Come viene eseguito il controllo dell'icona tocco Apple di Lighthouse

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

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

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

Come aggiungere un'icona tocco 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 offrire un'esperienza utente ottimale, assicurati che:

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

Risorse