Non fornisce un'icona mela-touch valida

Quando gli utenti di Safari per iOS aggiungono app web progressive (PWA) a nelle schermate Home, l'icona che viene visualizzata è l'icona del tocco Apple. Puoi specificare l'icona che deve essere utilizzata dalla tua app includendo un Tag <link rel="apple-touch-icon" href="/example.png"> in <head> di . Se la tua pagina non ha questo tag link, iOS genera un'icona acquisendo uno screenshot di dei contenuti della pagina. In altre parole, chiedere a iOS di scaricare un'icona ha come risultato una un'esperienza utente positiva.

In che modo il controllo dell'icona al tocco di Apple Lighthouse ha esito negativo

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

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

Lighthouse non controlla se l'icona esiste effettivamente o se è della dimensione corretta.

Come aggiungere un'icona Apple Touch

  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.

di Gemini Advanced.

Per offrire 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