L’icona Apple Touch definisce esplicitamente l’immagine usata quando un visitatore aggiunge il sito alla schermata Home di un iPhone. È distinta dalla favicon delle schede del browser e dalle icone dichiarate nel manifest dell’app web.
Una sola dimensione: 180×180
180×180 pixel è una dimensione comunemente usata come sorgente ad alta risoluzione. iOS può ridurla per gli spazi più piccoli, permettendo alla maggior parte dei progetti di mantenere una sola dichiarazione.
Le vecchie raccomandazioni elencavano otto file, da 57×57 a 152×152, ciascuno con un attributo sizes. Queste varianti non servono più: appesantiscono l’HTML e generano richieste aggiuntive per un risultato identico.
Il file deve essere PNG. Per questa icona iOS non legge né SVG né WebP e un JPEG rovina i bordi nitidi della grafica a tinte piatte.
Preferisci uno sfondo opaco
Uno sfondo trasparente può produrre risultati inattesi a seconda della versione e del contesto di visualizzazione. Per controllare l’aspetto nella schermata Home, fornisci un’immagine su uno sfondo opaco scelto da te.
La soluzione è appiattire l’icona su uno sfondo opaco prima dell’esportazione. Scegli un colore del marchio o il bianco se il simbolo è colorato e lascia circa il 10% di margine attorno al disegno per dargli respiro.
Non arrotondare però gli angoli: iOS applica la propria maschera arrotondata. Un file già arrotondato produce un doppio raggio, con angoli poco gradevoli.
Il tag da incollare
Basta una riga nel head delle pagine: link rel="apple-touch-icon" href="/apple-touch-icon.png". L’attributo sizes è facoltativo quando fornisci un solo file.
Puoi aggiungere meta name="apple-mobile-web-app-title" content="Il tuo marchio" per controllare l’etichetta sotto l’icona. Senza questo tag iOS usa il titolo della pagina, spesso troppo lungo e quindi troncato.
Inserisci anche una copia del file nella radice con il nome apple-touch-icon.png: come per favicon.ico, iOS lo cerca a quell’indirizzo quando non trova un tag.
Perché l’icona non si aggiorna
iOS conserva l’icona nella cache in modo aggressivo e un collegamento già presente nella schermata Home non cambia da solo. Per provare una nuova versione, elimina il collegamento, cancella i dati di Safari e aggiungi nuovamente il sito.
Se l’icona continua a mancare, verifica tre cose: che il file risponda con 200 e non 404, che venga servito con il tipo di contenuto image/png e che non sia bloccato da una regola robots.txt o dall’autenticazione.
Lo strumento di verifica LFFavicon controlla esattamente questi casi per qualsiasi URL pubblico e mostra l’icona effettivamente recuperata.
Fonti primarie
Domande frequenti
Servono più dimensioni di apple-touch-icon?
Per la maggior parte dei progetti, un unico file ad alta risoluzione da 180×180 permette a iOS di produrre versioni più piccole. Prova i dispositivi inclusi nel tuo elenco di compatibilità.
Android usa apple-touch-icon?
Chrome su Android può usarla come alternativa, ma legge prima le icone del manifest web. Dichiara sempre le icone 192×192 e 512×512 nel manifest: è il metodo ufficiale.
Si può usare un SVG come icona Apple Touch?
No, iOS richiede un PNG raster per questo tag. Conserva l’SVG per la favicon del browser desktop, dove offre nitidezza e supporto alla modalità scura.