Apple touch icon - Docs di MetricSpot

Q: E le home screen Android?

Android usa il web manifest per trovare le icone — l'array icons con PNG 192x192 e 512x512. La apple touch icon è solo per iOS; spediscili entrambi.

Cosa verifica questo controllo

Cerca in <head> un elemento <link rel="apple-touch-icon"> e verifica che il file referenziato esista e si carichi. iOS Safari usa questa icona quando un visitatore tocca Condividi → Aggiungi a Home.

Perché è importante

Quando un utente iOS salva il tuo sito sulla home, ottieni un “install” gratuito a forma di app store — ma solo se hai fornito l’icona. Senza, iOS renderizza uno screenshot sfocato della pagina a dimensione icona, che sembra rotto e trascurato. Una presentazione app-like spinge tassi di ritorno significativamente più alti.

Apple ha smesso di richiedere una touch icon per l’indicizzazione anni fa, quindi il controllo è su presentazione e fiducia di brand, non sulla crawlability. Ma il costo è un PNG e tre righe di HTML, quindi non c’è motivo di saltarlo.

Come sistemarlo

Aggiungi un PNG 180×180 alla root del sito e linkalo:

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

iOS cerca per prima cosa /apple-touch-icon.png alla radice del dominio anche senza tag <link> — quindi spesso basta mettere il file lì. Ma spedire il <link> esplicito è più affidabile su versioni iOS più vecchie e su client di terze parti moderni (Slack, Discord, lettori RSS) che lo usano per le anteprime.

Approccio a misura singola (consigliato per la maggior parte dei siti):

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

180×180 è la dimensione più grande che iOS chiede. iOS riduce per target più piccoli — un’immagine basta.

Approccio multi-misura (solo se hai ragioni di brand per ottimizzare ciascuna):

<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">

Linee guida di design:

Solo PNG. JPEG crea artefatti su sfondi pieni; SVG non è supportato.
Niente trasparenza. iOS applica una maschera con angoli arrotondati e aggiunge un sottile gloss sulle versioni iOS più vecchie — progetta su tela quadrata, full bleed.
Rendila leggibile alla dimensione più piccola (76×76 su iPad vecchi). Un wordmark funziona; una tagline di 20 caratteri no.
Abbinala a un meta theme color e a un web manifest per l’esperienza completa di home screen su iOS e Android.

Genera da una sola sorgente:

RealFaviconGenerator prende un’immagine sorgente e produce la touch icon, il set di favicon, il manifest e l’HTML da incollare — copre iOS, Android, tile Windows e installabilità PWA in un solo passaggio.

Astro: metti le icone in public/ e aggiungi il link nell’<head> di BaseLayout.astro.

Next.js: metti apple-icon.png (180×180) direttamente in app/ — l’App Router genera automaticamente il tag <link>.

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

WordPress: la maggior parte dei temi moderni accetta una touch icon in Aspetto → Personalizza → Identità del sito. Altrimenti, metti il PNG nella root del tema e aggiungi il <link> a header.php.

Domande frequenti

E le home screen Android?

Android usa il web manifest per trovare le icone — l’array icons con PNG 192x192 e 512x512. La apple touch icon è solo per iOS; spediscili entrambi.

Mi serve `apple-touch-icon-precomposed`?

No. Quella variante diceva alle versioni iOS più vecchie di non applicare l’effetto gloss. iOS ha rimosso il gloss in iOS 7 (2013); i dispositivi moderni ignorano del tutto la variante precomposed. Resta su apple-touch-icon.

I browser ricaricano l’icona quando la aggiorno?

iOS mette in cache l’icona in modo aggressivo. Aggiungi una query string quando la sostituisci (href="/apple-touch-icon.png?v=2") così le copie in cache si aggiornano. Stesso trucco funziona per la favicon.