Dimensioni favicon spiegate

La favicon da 16×16 pixel è lo standard web originale. Viene utilizzato nelle schede del browser sui display standard (96 dpi), nella barra degli strumenti dei segnalibri su tutti i browser desktop e in alcuni elenchi della cronologia del browser. Poiché 16×16 è una tela estremamente compatta, il design della tua favicon deve essere ridotto alla sua forma più semplice: una singola forma, lettera o segno astratto. Qualunque cosa più complessa sarà illeggibile.

La dimensione di 32×32 pixel raddoppia la dimensione di 16×16 e offre schede del browser Retina/HiDPI con densità 2x, icone dei segnalibri ad alto DPI e icone di suggerimento della barra degli indirizzi in Chrome. I browser moderni richiedono 32×32 molto più spesso di 16×16 poiché i display ad alta densità sono diventati la maggior parte dei dispositivi. Se potessi spedire solo una taglia, 32×32 sarebbe la scelta di maggior impatto.

La dimensione 48×48 pixel corrisponde alla dimensione di visualizzazione delle "icone medie" di Windows Explorer ed è il minimo richiesto da Ricerca Google per l'idoneità delle favicon negli snippet dei risultati di ricerca. I siti la cui favicon non soddisfa il minimo 48×48 vengono visualizzati con un'icona generica a forma di globo accanto al loro URL nei risultati di Google invece del marchio. Includi sempre 48×48 nel tuo pacchetto .ico.

La dimensione 64×64 pixel viene utilizzata nella visualizzazione a icone grandi di Windows Explorer e in alcuni ambienti desktop Linux. Includerlo nel file .ico multi-dimensione aggiunge un sovraccarico trascurabile ma garantisce un rendering pulito nei file manager e negli ambienti shell. Molti strumenti per la generazione di favicon ne includono 64 per impostazione predefinita come parte del pacchetto .ico standard.

La dimensione di 128×128 pixel serve i riquadri delle app Windows Store e le miniature della barra delle applicazioni ad alta densità. È meno comunemente necessario per le favicon web pure, ma è importante se il tuo sito è confezionato come PWA o se gli utenti lo segnalano come app Windows. Raggruppandolo all'interno di .ico con la compressione PNG mantiene la dimensione del file ragionevole.

La dimensione di 256×256 pixel è la cornice .ico standard più grande. Viene utilizzato per i collegamenti sul desktop Windows, i risultati della ricerca del menu Start Windows e alcuni contesti installati dalle app. A questa risoluzione, è necessario utilizzare la compressione PNG all'interno del contenitore .ico anziché BMP: un'immagine BMP 256×256 non compressa aggiunge inutilmente 256 KB al file .ico.

La dimensione 180×180 pixel è esclusivamente per iOS apple-touch-icon. Quando un utente iPhone o iPad tocca "Aggiungi alla schermata iniziale", Safari recupera l'immagine dichiarata in "<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>". Questa dimensione copre tutti gli attuali modelli di iPhone (iPhone 6 Plus e versioni successive utilizzano 180×180 con densità 3x; i modelli più vecchi utilizzano 120×120 e 152×152: un singolo file 180 li copre tutti con grazia).

La dimensione 192×192 pixel è l'icona minima richiesta nel manifest di un'app Web (site.webmanifest) per la richiesta di installazione PWA di Android Chrome. Quando gli utenti aggiungono un PWA alla schermata iniziale Android, Chrome esegue il rendering dell'icona 192×192 nel programma di avvio e dell'icona dell'app nel commutatore delle app recenti. Senza questa dimensione nel manifest, il prompt di installazione di PWA mostra un'icona generica o non si attiva affatto.

La dimensione 512×512 pixel è la seconda icona manifest richiesta. Chrome lo utilizza per la schermata iniziale PWA visualizzata durante il caricamento dell'app dopo l'avvio dalla schermata iniziale e per l'anteprima della finestra di dialogo di installazione sul sistema operativo desktop Chrome. È anche la dimensione sorgente ideale per generare tutte le varianti più piccole: a partire da 512×512 garantisce che ogni output sottoposto a downsampling mantenga bordi netti e colori accurati.

Le dimensioni comprese tra 512×512 e le molto grandi 1024×1024 vengono utilizzate principalmente per le icone delle app native su macOS e per gli invii iOS all'App Store, non per le favicon web. Tuttavia, se prevedi di convertire la tua presenza sul web in un'app nativa utilizzando un wrapper (Electron, Capacitor, Tauri), avrai bisogno di 1024×1024 per il processo di revisione dell'App Store. Conserva questo file principale insieme al pacchetto favicon.

Le favicon SVG sono indipendenti dalla risoluzione e coprono ogni densità con un singolo file. Un browser che supporta le favicon SVG (Chrome 80+, Edge 80+, Firefox 41+, Safari 15+) preferirà SVG rispetto a qualsiasi dimensione raster perché esegue il rendering perfettamente a 1x, 2x, 3x o qualsiasi DPI personalizzato. Il compromesso è che non tutti i contesti supportano SVG: le scorciatoie Windows, i lettori RSS e gli strumenti meno recenti necessitano ancora del fallback .ico.

È importante comprendere la relazione tra le dimensioni e il contenitore .ico. Un file .ico non è una singola immagine: è un archivio multi-immagine. Ogni fotogramma al suo interno è un'immagine raster separata di dimensioni diverse. Il browser legge la directory ICO, identifica quale frame corrisponde meglio alla dimensione necessaria e decodifica solo quel frame. Questo è il motivo per cui un file .ico può servire ugualmente bene schede da 16, 32, 48 e 64 px.

Il set minimo consigliato per un sito Web di produzione nel 2026 è: favicon.ico raggruppare frame da 16, 32, 48 e 64 px; apple-touch-icon.png a 180×180; android-chrome-192x192.png; android-chrome-512x512.png; favicon.svg per browser moderni; e un site.webmanifest che fa riferimento ai 192 e 512 PNG. favicon generator produce questo set completo da un'unica fonte caricata in un clic.

Controllare se tutte le dimensioni delle tue favicon sono pubblicate correttamente è semplice con favicon tester. Inserisci l'URL del tuo sito e il tester tenterà di recuperare il tuo favicon.ico, controllerà i tag di collegamento nella tua testa HTML e mostrerà un'anteprima di ciascuna dimensione. Le taglie mancanti vengono contrassegnate con consigli attuabili.