Dimensioni e formati favicon che funzionano davvero

Perché crea ancora confusione

La favicon ha una delle storie più lunghe e disordinate del web. Nacque nel 1999 come .ico 16×16 cercato da Internet Explorer in /favicon.ico, senza bisogno di tag HTML. Ogni piattaforma successiva, dalle icone della schermata iniziale iOS alle icone adattive Android, dai riquadri fissati di Windows ai manifest PWA, ha aggiunto la propria convenzione senza sostituire quella vecchia: interrompere il comportamento originale avrebbe compromesso tutti i siti esistenti. Il risultato è una specifica mai ripulita, solo ampliata, e la maggior parte degli elenchi di dimensioni che circolano sul web è copiata da un’epoca in cui molte di quelle estensioni erano davvero importanti.

I browser moderni sono anche molto migliorati nel lavorare con ciò che fornisci. Chrome, Firefox e Safari possono prendere una sola icona scalabile e generarne la versione piccola per la scheda. La lunga lista è una precauzione per i casi meno recenti, non un requisito attuale, e gran parte può essere saltata senza rischi per un sito normale.

L’insieme che copre davvero l’uso reale

In pratica, tre file coprono la stragrande maggioranza dei browser e dei dispositivi:

• favicon.ico, contenente un’immagine 32×32 — resta l’alternativa che ogni browser controlla per default nella radice del sito, anche senza <link> tag presente. Il contenitore .ico può tecnicamente contenere più risoluzioni, ma una sola immagine da 32 px al suo interno è sufficiente per l’uso che ne fanno oggi i browser.
• Un PNG di 180×180 come apple-touch-icon — ciò che iOS usa quando un utente aggiunge il sito alla schermata Home. iOS non legge affatto favicon.ico a questo scopo; senza questo file acquisisce invece uno screenshot della pagina, con un aspetto nettamente peggiore come icona della schermata Home.
• Una favicon SVG — si adatta in modo pulito a qualsiasi dimensione di scheda e densità di pixel e supporta la media query per la modalità scura descritta sotto. I browser moderni lo preferiscono quando sono dichiarati sia un SVG sia un .ico.

Nell’head del documento, è:

Tutto ciò che va oltre questi tre, come l’icona PWA di 512px, le varianti adattive Android e i meta tag dei riquadri Windows, conta solo se crei una PWA installabile o punti specificamente ai riquadri fissati di Windows. Aggiungili quando il requisito è reale, non preventivamente.

Creare manualmente la metà raster di quel set richiede di esportare la stessa grafica a diverse dimensioni e creare un .ico. Il nostro Generatore di favicon lo fa da una sola immagine sorgente: favicon.ico, apple-touch-icon da 180 px e i PNG da 192 e 512 per quando vuoi il manifest. L’SVG deve comunque provenire dal tuo strumento vettoriale.

Cosa richiede realmente ogni piattaforma

• Schede dei browser desktop mostrano l’icona a circa 16×16 pixel CSS, ingrandita per gli schermi ad alta densità. Ecco perché qui un SVG o un piccolo PNG ben disegnato conta più di un’immagine sorgente grande: la scheda è la visualizzazione più piccola e più vista dell’icona.
• schermata Home di iOS richiede apple-touch-icon a 180×180: copre gli iPhone attuali con la densità più alta; iOS riduce per i dispositivi meno recenti. iOS applica automaticamente anche angoli arrotondati e, in alcune versioni, una leggera lucentezza: non arrotondare prima gli angoli nell’immagine sorgente, altrimenti otterrai un doppio arrotondamento.
• Schermata iniziale Android / PWA legge le dimensioni da site.webmanifest anziché un tag link, solitamente 192×192 e 512×512, e supporta una variante «maskable» con spaziatura dell’area sicura, così le forme adattive delle icone — cerchio, quadrato arrotondato, goccia — non ritagliano il design.
• Risultati di ricerca (in particolare Google) mostrerà una piccola favicon accanto al tuo risultato, ricavata nello stesso modo dell’icona della scheda del browser e visualizzata con dimensioni altrettanto ridotte.

site.webmanifest: a cosa serve

A site.webmanifest file è un piccolo documento JSON che descrive il sito come applicazione installabile: nome, colore del tema, colore di sfondo ed elenco di icone con dimensioni dichiarate. Trasforma «Aggiungi alla schermata Home» da un collegamento a un segnalibro in qualcosa che appare e si avvia come una vera icona di app su Android. Se non stai costruendo una PWA e non ti interessa l’installabilità, puoi ometterlo del tutto; un normale sito con i soli tre file sopra funziona bene senza. Se lo aggiungi, collegalo con <link rel="manifest" href="/site.webmanifest"> e fai riferimento alle icone tramite percorso assoluto nel JSON.

Progettare per la leggibilità a 16px

L’icona di una scheda del browser è minuscola e la maggior parte delle favicon fallisce non per il formato del file, ma perché la grafica originale non è mai stata controllata alle dimensioni reali di visualizzazione. Dettagli chiari a 512px, come un logotipo, linee sottili o una sfumatura con diverse bande visibili, diventano una macchia grigia a 16px.

• Riduci a una forma o lettera dominante. Un solo glifo deciso o sagoma di icona resiste alla riduzione; un logo dettagliato con più elementi no.
• Aumenta il contrasto e semplifica i colori. Due o tre colori uniformi si leggono meglio a dimensioni minuscole rispetto a una sfumatura, che tende a confondersi in una sola tonalità media.
• Ispessisci i tratti sottili. Una linea finissima che sembra corretta a dimensioni originali può scomparire del tutto dopo il ridimensionamento con antialias su una griglia da 16 px.
• Prova riducendo davvero l’esportazione a 16px e guardandola, non giudicando l’intera grafica e presumendo che regga. È il passaggio più saltato nel design delle favicon.

Modalità scura

Le barre delle schede del browser e gli elementi del sistema operativo possono essere scuri o chiari in base al tema del sistema, e una favicon progettata solo per uno sfondo chiaro può sparire su una barra scura, o viceversa. Una favicon SVG può reagire direttamente tramite una prefers-color-scheme media query nel blocco di stile incorporato nell’SVG stesso, che cambia i colori di riempimento in base al tema dell’utente. Le favicon PNG e ICO non possono farlo: sono immagini statiche. Se il supporto della modalità scura è importante, quindi, la favicon SVG non è facoltativa: è l’unico formato capace di offrirlo.

Altrimenti, una favicon con contrasto sufficiente sia su bianco sia su quasi nero, solitamente con contorno sottile o tono medio anziché riempimenti solo bianchi o neri, copre abbastanza bene molti casi senza ulteriore complessità.

Perché la favicon non si aggiorna e come risolvere

Le favicon vengono memorizzate in cache con un’aggressività insolita: i browser le considerano sostanzialmente statiche e continuano a mostrare un’icona obsoleta per giorni o settimane anche dopo una ricarica forzata della pagina, perché la richiesta della favicon non è legata all’invalidazione della normale cache della pagina come uno script o un foglio di stile. Tre accorgimenti risolvono il problema in modo affidabile:

1. Cambia il nome del file o aggiungi una stringa di query con una versione — /favicon.ico?v=2 oppure rinominando in /favicon-v2.ico impone una nuova richiesta perché è cambiato l’URL stesso.
2. Svuota la cache specifica delle favicon del browser, che in Chrome è separata dalla cancellazione della cache generale (chrome://favicon-internals oppure cancellazione dei dati di navigazione con “immagini e file memorizzati nella cache” selezionato).
3. Dagli tempo. Anche con un URL modificato, alcuni browser e motori di ricerca rileggono e memorizzano le favicon secondo i propri tempi; in particolare, la favicon di un risultato di ricerca può arrivare giorni dopo rispetto al sito attivo.

Domande frequenti