Apple touch icon - Docs de MetricSpot

Què comprova aquesta auditoria

Cerca dins del <head> un element <link rel="apple-touch-icon"> i verifica que el fitxer referenciat existeix i es carrega. iOS Safari utilitza aquesta icona quan un visitant toca Compartir → Afegir a la pantalla d’inici.

Per què importa

Quan els usuaris d’iOS desen el teu lloc a la pantalla d’inici, obtens una instal·lació gratuïta amb format d’app store, però només si has proporcionat la icona. Sense ella, iOS renderitza una captura borrosa de la pàgina a mida d’icona, que sembla trencada i abandonada. La presentació tipus app augmenta de manera significativa la taxa de visites de retorn.

Apple va deixar de requerir un touch icon per a la indexació fa anys, així que la comprovació és sobre presentació i confiança de marca, no sobre rastrejabilitat. Però el cost és un fitxer PNG i tres línies d’HTML, així que no hi ha cap raó per saltar-s’ho.

Com solucionar-ho

Afegeix un PNG de 180×180 a l’arrel del teu lloc i enllaça’l:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

iOS busca primer /apple-touch-icon.png a l’arrel del domini fins i tot sense una etiqueta <link>, així que només col·locar el fitxer allà sovint funciona. Però enviar l’<link> explícit és més fiable en versions antigues d’iOS i en clients moderns de tercers (Slack, Discord, lectors RSS) que l’utilitzen per a les previsualitzacions.

Enfocament d’una sola mida (recomanat per a la majoria de llocs):

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

180×180 és la mida més gran que iOS demana. iOS redimensiona cap avall per a destinacions més petites: una sola imatge és suficient.

Enfocament multi-mida (només si tens motius de marca per optimitzar cadascuna):

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120.png">

Guia de disseny:

Només PNG. JPEG genera artefactes en fons sòlids; SVG no està suportat.
Sense transparència. iOS aplica una màscara de cantonades arrodonides i afegeix una lluentor subtil en versions antigues d’iOS. Dissenya per a un llenç quadrat, a sang.
Fes que sigui llegible a la mida més petita (76×76 en iPads antics). Un logotip funciona; un eslògan de 20 caràcters no.
Combina’l amb una meta theme-color i un web manifest per a l’experiència completa de pantalla d’inici tant a iOS com a Android.

Genera-ho tot des d’una sola font:

RealFaviconGenerator agafa una imatge d’origen i en treu el touch icon, el conjunt de favicons, el manifest i l’HTML per enganxar. Cobreix iOS, Android, mosaics de Windows i instal·labilitat PWA en una sola passada.

Astro: col·loca les icones a public/ i afegeix l’enllaç al <head> del teu BaseLayout.astro.

Next.js: posa apple-icon.png (180×180) directament a app/. L’App Router genera l’etiqueta <link> automàticament.

app/
  apple-icon.png   # 180×180
  favicon.ico
  layout.tsx

WordPress: la majoria de temes moderns accepten un touch icon a Aparença → Personalitza → Identitat del lloc. Si no, col·loca el PNG a l’arrel del tema i afegeix el <link> a header.php.

Preguntes freqüents

I què passa amb les pantalles d’inici d’Android?

Android utilitza el web manifest per trobar icones: el camp icons amb PNGs de 192x192 i 512x512. L’apple touch icon és només per a iOS; envia tots dos.

Necessito `apple-touch-icon-precomposed`?

No. Aquesta variant indicava a les versions antigues d’iOS que no apliquessin l’efecte de lluentor. iOS va eliminar la lluentor a iOS 7 (2013); els dispositius moderns ignoren completament la variant precomposed. Queda’t amb apple-touch-icon.

Els navegadors recarregaran la icona quan l’actualitzi?

iOS la guarda a la memòria cau de manera agressiva. Afegeix una query string quan la substitueixis (href="/apple-touch-icon.png?v=2") perquè les còpies en cau s’actualitzin. El mateix truc funciona per al favicon.