Favicon: quali dimensioni servono davvero nel 2026

Parti dai consumatori, non dall'elenco di file

Un'icona di sito finisce in esattamente cinque posti, e ognuno legge una cosa precisa. La scheda e la barra dei segnalibri leggono ciò che l'head dichiara come rel="icon", preferendo un vettoriale se ne offri uno. Tutto ciò che indovina — browser vecchi, lettori di feed, generatori di anteprime dei link, una quantità sorprendente di utensili interni — chiede /favicon.ico nella radice del sito, senza alcun markup. La schermata home di iOS e iPadOS legge apple-touch-icon.png. La schermata home Android e il prompt di installazione di Chrome leggono l'array icons del manifest dell'applicazione web. È l'elenco completo dei consumatori, e non cresce da anni.

Rileggi quell'elenco e nota che cosa manca. Non c'è alcun consumatore che voglia 57 pixel, né 70, né 114, né 144, né 310. Quei numeri vengono da una matrice storica precisa: i riquadri dei siti fissati di Internet Explorer, un decennio di dispositivi iOS precedenti al momento in cui il sistema ha imparato a ridurre un solo file, e una generazione di launcher Android anteriore al manifest. Quei tre consumatori sono spariti. Di loro resta output di generatore — una ventina di PNG e un browserconfig.xml — posato nella radice di siti i cui proprietari non hanno idea di quale di quei file venga ancora letto da qualcosa.

L'insieme minimo, e quanto costa quello massimo

Abbiamo costruito entrambi, da un solo marchio 512 × 512, e li abbiamo pesati. L'insieme minimo è favicon.ico a 1 664 byte, icon.svg a 254 byte, apple-touch-icon.png a 180 × 180 e 13 573 byte, icon-192.png a 14 510 byte e icon-512.png a 27 390 byte: cinque file, 57 391 byte. La matrice ereditata — lo stesso marchio esportato a 16, 24, 32, 36, 48, 57, 60, 70, 72, 76, 96, 114, 120, 128, 144, 150, 152, 167, 180, 192, 196, 228, 256, 310, 384 e 512 — sono 26 file e 272 192 byte, prima dell'ICO e dei due file di configurazione. Sono 4,7 volte i byte e cinque volte i file per esattamente zero copertura in più.

Il totale in byte è la parte meno interessante, perché un visitatore non scarica mai tutto. In una visita ordinaria il browser preleva l'icona della scheda e nient'altro: il nostro ICO più il nostro SVG fanno 1 918 byte, e un browser che prende l'SVG ne preleva 254. L'apple-touch-icon e le icone del manifest vengono richiesti solo quando qualcuno installa davvero il sito o lo aggiunge a una schermata home. Ciò che il numero di file costa davvero è manutenzione: 26 file raster da rigenerare, in modo coerente, ogni volta che il marchio cambia, e che nessuno controllerà mai.

SVG nella scheda: quasi ovunque adesso, ancora non ovunque

Un'icona di scheda vettoriale è il singolo cambiamento migliore che puoi fare, perché elimina l'intera questione di quali dimensioni raster pubblicare: il browser chiede ciò che gli serve e il renderer lo produce. Chrome ed Edge leggono SVG in rel="icon" dalla versione 80, Firefox dalla 41. Safari è stato il ritardatario — per anni ha supportato solo il proprio formato monocromatico per le schede fissate — e Safari 26 è la prima versione a disegnare un normale favicon SVG in schede e segnalibri. Le tabelle di supporto collocano il dato complessivo attorno all'89 % del traffico mondiale, e sale man mano che le installazioni di Safari si aggiornano.

Quell'ultimo 11 % è la ragione per cui l'ICO resta. Non c'è per la scheda: c'è perché /favicon.ico è un percorso che viene richiesto senza alcun markup, da browser troppo vecchi per l'SVG e da ogni strumento non-browser che vuole un'icona di sito e non analizza l'HTML. Una voce da 32 × 32 basta. Tienilo nella radice, non in una cartella di risorse, perché i client che lo chiedono per convenzione non leggeranno il tuo elemento link per scoprire dove l'hai spostato.

Che cosa fa sizes="any" e perché quel consiglio è cambiato

Nello standard HTML l'attributo sizes è un suggerimento: un elenco separato da spazi di valori larghezza per altezza che dice al browser che cosa contiene la risorsa, più la singola parola chiave any, che dichiara la risorsa scalabile — un vettoriale. Il browser è libero di usarlo o ignorarlo. Non è un'istruzione di resa, e mettere sizes su un'immagine non ridimensiona niente.

Il consiglio che troverai ovunque — mettere sizes="any" sull'ICO — non ha mai riguardato quella definizione. Era un aggiramento di un comportamento di Chrome: davanti a un ICO e a un SVG, Chrome scaricava entrambi e usava l'ICO, così si dichiarava l'ICO come «any» per spingere Chrome verso l'SVG. Funzionava, ma dice una cosa falsa sul file. La raccomandazione attuale delle stesse persone che hanno diffuso il trucco è dichiarare l'ICO onestamente come sizes="32x32": risolve lo stesso doppio scaricamento e non mente su che cosa c'è nel file. Se hai copiato uno snippet di favicon prima del 2023 circa, è questa la riga da aggiornare.

Un'icona da 16 pixel non è un'icona da 512 rimpicciolita

È qui che l'elenco di file non può aiutare. Una tela 512 × 512 contiene 262 144 pixel. Una 16 × 16 ne contiene 256 — un millesimo ventiquattresimo. Ogni tratto del tuo marchio deve sopravvivere alla media che lo comprime in quel budget, e fare la media è esattamente ciò che fa l'antialiasing: un filetto più sottile di un pixel di uscita non diventa una linea sottile, diventa una tinta tenue spalmata sui pixel che copre in parte.

L'abbiamo misurato su un marchio: una lettera in grassetto, un logotipo composto a 52 pixel, una didascalia a 24 e un anello bianco da 8 pixel, il tutto su una tela da 512. Il marchio contiene 407 colori distinti a 512 e 85 a 16. Misurando il contrasto di luminanza che resta a ogni tratto — la differenza fra il pixel più chiaro e il più scuro — la lettera in grassetto passa da 199,4 livelli a 512 a 188,0 a 16: sopravvive, al 94 % del suo contrasto. Il logotipo passa da 199,4 a 86,4 — perso il 57 %. La didascalia passa da 199,4 a 29,1 — perso l'85 %. A quel punto non è testo piccolo, è una barra grigia.

L'anello è il caso singolo più chiaro, perché possiamo seguire una sola riga di scansione al suo interno. Sul master a 512 il tratto dell'anello legge bianco puro, luminanza 255 su uno sfondo di 56 — un contrasto di 199. A 192 è ancora 255. A 48, dove il tratto da 8 pixel scende a 0,75 di un pixel di uscita, il suo punto più chiaro arriva solo a 159. A 32 arriva a 121. A 16, dove il tratto è largo un quarto di pixel, il punto più chiaro di tutto l'anello è 99 su uno sfondo di 52: un contrasto di 47 contro 199. Tre quarti della presenza dell'anello sono spariti, e nessuna nitidezza nella finestra di esportazione li riporta — l'informazione sta sotto la griglia di campionamento.

La conseguenza pratica è una regola di progetto, non di file: a 16 pixel un marchio regge una forma spessa e nient'altro. Se il tuo logo è un logotipo, il favicon è la sua prima lettera o il suo simbolo, non il logotipo. Se ha un filo sottile, ingrossalo o toglilo. Disegna una versione semplificata a parte per le dimensioni piccole se ti importa della scheda — e in tal caso quello è l'unico punto in cui disegnare a mano un raster da 16 e da 32 pixel batte la decisione di un riduttore.

I due file che non sono affatto favicon

L'apple-touch-icon e le icone del manifest finiscono negli elenchi dei favicon, ma sono icone di applicazione e si comportano come tali. L'apple-touch-icon è 180 × 180, cioè l'icona iOS da 60 punti a densità 3×, e iOS riduce quell'unico file per ogni altro dispositivo — la vecchia scala di 57, 72, 76, 114, 120, 144 e 152 è inutile. Contano due cose: iOS applica la propria maschera a rettangolo arrotondato, quindi un marchio al vivo perde gli angoli; e iOS qui non conserva la trasparenza, perciò uno sfondo trasparente viene appiattito al posto tuo, e non necessariamente nel colore che avresti scelto.

Le icone del manifest sono ciò che Chrome controlla prima di proporre l'installazione: vuole una voce da 192 e una da 512 pixel, e senza entrambe il prompt di installazione semplicemente non compare mai, senza errori da nessuna parte. Aggiungi una terza voce da 512 × 512 con purpose impostato a maskable se vuoi che i launcher Android rimodellino l'icona in cerchio o squircle senza tagliare il tuo disegno: la zona sicura è allora un cerchio centrale di 409 pixel sulla tela da 512, circa l'80 % della larghezza, e tutto ciò che esce può essere mascherato.

Domande frequenti

Serve ancora un favicon.ico se pubblico un SVG?

Sì, e costa quasi nulla — 1 664 byte per una sola voce 32 × 32 nel nostro test. Il suo compito non è la scheda. Il suo compito sono le richieste che arrivano senza markup: browser precedenti a Chrome 80 o Safari 26, lettori di feed, generatori di anteprime e strumenti interni che prelevano /favicon.ico per convenzione. Mettilo nella radice del sito, perché quei client non leggeranno il tuo elemento link per trovarlo altrove.

Il mio ICO deve contenere versioni da 16, 32 e 48 pixel?

Non in modo utile. Li abbiamo costruiti entrambi: una sola voce da 32 × 32 fa 1 664 byte, e infilare 16, 32 e 48 in un unico file fa 5 188 — più del triplo. I client che leggono ancora l'ICO sono i meno propensi a essere esigenti su quale voce ricevono, e la riduzione moderna da 32 a 16 è buona. Investi lo sforzo nel disegno a 16 pixel, che è ciò che si vede davvero.

Un favicon SVG può cambiare colore in modalità scura?

Può, ed è uno dei veri vantaggi del file vettoriale. Un favicon SVG può contenere un blocco di stile, e una media query prefers-color-scheme al suo interno sarà rispettata dai browser che disegnano l'SVG, così una scheda in modalità scura può ricevere un marchio più chiaro senza un secondo file. Non costruirci sopra nulla di essenziale, però: il ripiego ICO non può farlo, e nemmeno l'apple-touch-icon o le icone del manifest.

Perché Chrome non propone mai di installare il mio sito?

La causa più frequente è un manifest senza un'icona da 192 e una da 512 pixel. Chrome controlla quelle due dimensioni fra i suoi criteri di installabilità, e quando ne manca una non ti avvisa — il pulsante di installazione semplicemente non compare. Guarda il pannello applicazione degli strumenti per sviluppatori: elenca il manifest come è stato analizzato e dice quale requisito è fallito.

Posso semplicemente esportare il file da 512 in tutte le dimensioni minori e finirla lì?

Puoi, e per i file da 180, 192 e 512 pixel è esattamente giusto: sono abbastanza grandi da contenere tutto. È all'estremo dei 16 e 32 pixel che la riduzione automatica smette di bastare. Sul nostro marchio di prova la piccola didascalia ha perso l'85 % del contrasto a 16 pixel e l'anello sottile il 76 %, quindi l'icona che arriva nella scheda è una sfocatura delle forme previste. O semplifichi il disegno per quelle dimensioni, o accetti che la scheda mostri una sola forma spessa.