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>
:
Lighthouse non controlla se l'icona esiste effettivamente o se ha le dimensioni corrette.
Come aggiungere un'icona Apple touch
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> …
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