Scegliere le dimensioni giuste per la favicon è essenziale per avere un'icona nitida e professionale su ogni dispositivo. Questa guida completa guida alle dimensioni delle favicon copre tutte le dimensioni necessarie nel 2026—dall'icona classica 16×16 per la scheda del browser all'icona PWA maskable 512×512—oltre ai formati e alle best practice che mantengono il tuo brand nitido su tutte le piattaforme.
Perché la dimensione della favicon è importante
Le favicon vengono visualizzate in molte dimensioni su browser, sistemi operativi e schermate home. Un singolo file sorgente non può soddisfare ogni contesto, perché ogni piattaforma richiede una dimensione specifica. Se fornisci una sola dimensione, i browser la ingrandiranno o la ridurranno—spesso producendo risultati sfocati o ritagliati che indeboliscono il tuo brand.
Fornire le dimensioni corrette della favicon per ogni piattaforma garantisce che l'immagine venga renderizzata alla risoluzione nativa, il che significa bordi nitidi, colori accurati e trasparenza affidabile. Questa guida elenca ogni dimensione che vale la pena generare e spiega dove viene utilizzata ciascuna, così puoi pubblicare un pacchetto completo con sicurezza.
Riferimento completo sulle dimensioni delle favicon
La tabella seguente elenca le dimensioni delle favicon che i siti web moderni dovrebbero includere nel 2026, il formato utilizzato da ciascuna e la piattaforma che la utilizza. Usala come unico riferimento quando prepari un pacchetto.
| Dimensione | Formato | Utilizzata per |
|---|---|---|
| 16×16 | ICO / PNG | Scheda classica del browser, supporto legacy |
| 32×32 | ICO / PNG | Scheda standard del browser su schermi retina |
| 48×48 | ICO | Barra delle applicazioni di Windows, alcune viste dei segnalibri |
| 64×64 | PNG | Barra degli indirizzi del browser su display ad alta densità |
| 96×96 | PNG | Segnalibri e scorciatoie desktop |
| 120×120 | PNG | Schermate home Android più datate |
| 152×152 | PNG | Icona touch iPad (legacy) |
| 167×167 | PNG | Icona touch iPad Pro |
| 180×180 | PNG | apple-touch-icon iPhone (attuale) |
| 192×192 | PNG | Schermata home Android Chrome, PWA |
| 512×512 | PNG | Schermata di avvio PWA, icona maskable |
Le dimensioni essenziali da generare
Sebbene l'elenco completo sopra sia esaustivo, un set essenziale copre la stragrande maggioranza degli utenti. Il nostro generatore di favicon produce questo pacchetto essenziale da un singolo caricamento:
- 16×16 e 32×32—le dimensioni principali per le schede del browser desktop su schermi standard e retina.
- 48×48—incluse nel file ICO per la visualizzazione nella barra delle applicazioni di Windows e nei segnalibri legacy.
- 180×180—l'apple-touch-icon richiesta da iOS per le scorciatoie della schermata home.
- 192×192 e 512×512—le dimensioni Android e PWA dichiarate nel tuo web manifest.
Insieme a una versione SVG per i browser moderni, questo set copre praticamente ogni dispositivo che un visitatore potrebbe usare nel 2026. Non devi monitorare manualmente ogni dimensione legacy—il generatore le raggruppa per te.
Confronto tra i formati delle favicon
La dimensione è solo metà dell'equazione; il formato determina compatibilità e peso del file. Il confronto seguente riassume i tre formati che dovresti includere insieme:
| Formato | Risoluzione | Dimensione del file | Ideale per |
|---|---|---|---|
| ICO | Fissa (contenitore multi-dimensione) | Da piccola a media | Browser legacy, fallback /favicon.ico |
| PNG | Fissa (una dimensione per file) | Piccolo | Browser moderni, apple-touch-icon, Android |
| SVG | Vettoriale (indipendente dalla risoluzione) | Minuscola | Safari, Chrome, icone sensibili alla modalità scura |
SVG è particolarmente prezioso nel 2026 perché si adatta perfettamente a qualsiasi densità di pixel e può includere media query che si adattano automaticamente alla modalità scura. Il nostro generatore produce automaticamente un SVG quando carichi una sorgente vettoriale, rendendolo il formato più a prova di futuro nel tuo pacchetto.
Requisiti di dimensione specifici per piattaforma
Browser desktop
I browser desktop come Chrome, Firefox, Safari ed Edge richiedono favicon da 16×16 e 32×32 pixel. Sui display retina, la variante 32×32 viene utilizzata per la scheda. Il formato ICO può raggruppare entrambe le dimensioni in un unico file, motivo per cui distribuire /favicon.ico rimane una buona pratica ancora oggi: funge da fallback automatico.
Apple iOS e iPadOS
I dispositivi Apple ignorano il link favicon standard quando si aggiunge un sito alla schermata Home. Invece cercano un PNG da 180×180 dichiarato con rel=”apple-touch-icon”. Senza questo file, iOS utilizzerà uno screenshot della pagina o un'icona generica, che appare poco professionale e compromette la coerenza del brand sulla piattaforma mobile più diffusa.
Android e Progressive Web App
Android Chrome e gli installer PWA leggono le icone da un manifest dell'app web. Le due dimensioni richieste sono 192×192 e 512×512. La variante 512×512 viene utilizzata anche per la schermata di avvio della PWA. Per le icone maskable—quelle che si adattano alle diverse forme delle icone Android—dovresti contrassegnare il PNG 512×512 come “purpose”:”maskable” nel manifest.
Best practice per le dimensioni delle favicon
Segui queste best practice per mantenere la tua favicon nitida su ogni dimensione e piattaforma:
- Parti da una dimensione grande. Genera da una sorgente da 512×512 o superiore, così ogni ridimensionamento rimane nitido.
- Distribuisci tutte le dimensioni. Fornisci 16, 32, 48, 180, 192 e 512 più SVG per una copertura completa.
- Mantieni /favicon.ico nella root. I browser usano questo URL come predefinito quando non è presente alcun tag link.
- Testa a 16×16. Se il tuo design regge alla dimensione più piccola, apparirà bene ovunque.
- Usa il vettoriale quando possibile. SVG si adatta a qualsiasi risoluzione e supporta la modalità scura.
Come generare tutte le dimensioni in una volta
Produrre manualmente tutte queste dimensioni sarebbe noioso. Il nostro gratuito generatore di favicon svolge il lavoro per te in quattro semplici passaggi:
- Carica un'immagine sorgente quadrata da 512×512 o superiore.
- Esamina le anteprime live a 16×16, 32×32 e 180×180.
- Clicca crea per scaricare un ZIP contenente ogni dimensione e formato sopra indicati.
- Copia i tag link HTML inclusi e il manifest nel tuo sito.
L'intero processo richiede meno di un minuto e produce un pacchetto che soddisfa ogni piattaforma trattata in questa guida. Non devi mai ricordare quale dimensione va dove: il generatore nomina correttamente ogni file e fornisce tag link corrispondenti.
Domande frequenti
Qual è la dimensione standard della favicon per un sito web?
La dimensione standard più comune della favicon è 32×32 pixel per la scheda del browser, con un fallback 16×16 all'interno di un file ICO. I siti moderni dovrebbero anche fornire 180×180 per iOS e 192×192 più 512×512 per Android e uso PWA.
Quali dimensioni dovrebbe avere la mia immagine sorgente?
Usa un'immagine sorgente quadrata di almeno 512×512 pixel. Una sorgente più grande consente al generatore di ridimensionare in modo pulito a ogni dimensione richiesta, mantenendo la tua favicon nitida su display retina e schermi mobili ad alta densità.
Qual è la dimensione dell'apple-touch-icon?
La dimensione attuale dell'apple-touch-icon è 180×180 pixel. iOS usa questo PNG per le scorciatoie della schermata Home e ignora il link favicon standard, quindi deve essere dichiarato con rel=”apple-touch-icon” nel tuo HTML.
Quali dimensioni richiede Android per le favicon?
Android Chrome e le progressive web app richiedono icone PNG 192×192 e 512×512 dichiarate in un manifest dell'app web. L'icona 512×512 dovrebbe essere contrassegnata come maskable, così Android può adattarla alle diverse forme della schermata Home.
Dovrei usare SVG o PNG per la mia favicon?
Usa entrambi. SVG scala perfettamente e supporta la modalità scura nei browser moderni, mentre PNG garantisce compatibilità con iOS, Android e browser più vecchi. Distribuire tutti e tre i formati—ICO, PNG e SVG—assicura che la tua favicon appaia nitida ovunque.
Come le dimensioni influenzano le prestazioni e il caricamento
Servire la dimensione corretta della favicon non è solo una questione visiva: influisce anche sulla velocità di caricamento del tuo sito. Quando un browser richiede un'icona della scheda da 32×32 e tu servi invece un PNG da 512×512, il visitatore scarica molti più byte del necessario per un piccolo elemento sullo schermo. Su molti caricamenti di pagina da parte di molti visitatori, quella larghezza di banda sprecata si accumula. Distribuendo ogni dimensione come file separato e dichiarandole con l'attributo sizes corretto nei tuoi tag link, permetti al browser di scegliere automaticamente il file più piccolo adatto. Il risultato è un first paint più veloce e un profilo di pagina più snello, cosa che conta sia per l'esperienza utente sia per i Core Web Vitals nel 2026. Il generatore gestisce questa ottimizzazione per te nominando e dimensionando ogni file con precisione.
Genera ora ogni dimensione di favicon
Non devi più ricordare quale dimensione richiede ogni piattaforma. Carica un'immagine quadrata nel nostro generatore e scarica un pacchetto completo che copre ogni dimensione e formato descritto in questa guida, insieme a HTML pronto da incollare e un manifest. È il modo più semplice per soddisfare ogni browser e dispositivo nel 2026. Che tu tenga alla nitidezza su una scheda retina, a una scorciatoia pulita per la schermata Home su iOS o a una perfetta schermata di avvio PWA, un singolo download le copre tutte.
