La icona Apple Touch proporciona expressament la imatge que es fa servir quan un visitant afegeix el teu lloc a la pantalla d'inici d'un iPhone. És independent del favicon de les pestanyes i de les icones declarades al manifest d'aplicació web.
Una sola mida: 180×180
180×180 píxels és una mida habitual com a origen d'alta resolució. iOS pot reduir la imatge per a ubicacions més petites, cosa que permet mantenir una única declaració a la majoria de projectes.
Les recomanacions antigues enumeraven vuit fitxers, de 57×57 a 152×152, cadascun amb el seu atribut sizes. Aquestes variants ja no aporten res: allarguen l'HTML i provoquen peticions addicionals per al mateix resultat.
El fitxer ha de ser un PNG. iOS no llegeix SVG ni WebP per a aquesta icona, i un JPEG espatlla les vores nítides dels dibuixos plans.
És preferible un fons opac
Un fons transparent pot produir un resultat inesperat segons la versió i el context de visualització. Per controlar l'aspecte a la pantalla d'inici, ofereix el dibuix sobre un fons opac que hagis triat.
La solució és aplanar la icona sobre un fons opac abans d'exportar-la. Tria un color de marca o simplement blanc si el símbol té molts colors, i deixa aproximadament un 10% de marge al voltant del dibuix perquè respiri.
No arrodoneixis les cantonades tu mateix: iOS hi aplica la seva pròpia màscara arrodonida. Un fitxer ja arrodonit produeix un radi doble i cantonades poc polides.
L'etiqueta que has d'enganxar
N'hi ha prou amb una línia al head de les pàgines: link rel="apple-touch-icon" href="/apple-touch-icon.png". L'atribut sizes és opcional si només publiques un fitxer.
Opcionalment, afegeix meta name="apple-mobile-web-app-title" content="Your brand" per controlar l'etiqueta que es mostra sota la icona. Sense aquesta etiqueta, iOS fa servir el títol de la pàgina, que normalment és massa llarg i queda truncat.
Col·loca també una còpia del fitxer a l'arrel amb el nom apple-touch-icon.png: igual que amb favicon.ico, iOS la cerca en aquesta adreça si no troba cap etiqueta.
Per què la icona no s'actualitza
iOS desa la icona a la memòria cau de manera agressiva, i una drecera que ja és a la pantalla d'inici no canvia sola. Per provar una versió nova, elimina la drecera, esborra les dades de Safari i torna a afegir el lloc.
Si la icona continua sense aparèixer, comprova tres coses: que el fitxer respongui amb 200 i no amb 404, que se serveixi amb el tipus de contingut image/png i que no estigui bloquejat per una regla de robots.txt o per autenticació.
El comprovador de LFFavicon prova exactament aquests casos amb qualsevol URL públic i mostra la icona que realment ha obtingut.
Fonts primàries
Preguntes freqüents
Calen diverses mides d'apple-touch-icon?
En la majoria de projectes, un únic fitxer d'alta resolució de 180×180 permet a iOS produir representacions més petites. Prova els dispositius inclosos a la teva matriu de compatibilitat.
Android fa servir l'apple-touch-icon?
Chrome a Android la pot fer servir com a alternativa, però primer llegeix les icones del manifest web. Declara sempre les icones de 192×192 i 512×512 al manifest: és la via oficial.
Es pot fer servir un SVG com a icona Apple Touch?
No, iOS espera un PNG de mapa de bits per a aquesta etiqueta. Reserva l'SVG per al favicon del navegador d'escriptori, on aporta nitidesa i compatibilitat amb el mode fosc.