Migliori dimensioni favicon per siti web

Un favicon è ridimensionato a molti pixel fisici: 16×16 in una scheda, 32×32 su una barra dei segnalibri Retina, 180×180 sulla schermata iniziale di un iPhone, 512×512 su una schermata iniziale PWA. Una sola immagine non può servire bene a tutti. Utilizza il nostro [generatore di favicon](strumento:favicon-generator), [convertitore da PNG a ICO](strumento:png-to-ico), [convertitore da SVG a ICO](strumento:svg-to-ico) e tester live favicon per creare e verificare il tuo set di icone e leggere il [companion guide](guida:favicon-dimensioni-spiegata) per una guida dettagliata.

L'upscaling di una sorgente piccola produce sfocatura. Il downscaling di un dettagliato 1024×1024 senza test fa perdere le linee sottili. La soluzione è un piccolo set di esportazioni appositamente create o un .ico multi-dimensione che incorpora i frame desktop comuni.

Spedire tutte le taglie elencate nei vecchi post del blog è uno spreco. Spedirne troppo poche lascia un divario visibile su una piattaforma. La matrice seguente riflette le richieste reali misurate nei browser 2026.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

Le schede del desktop in genere eseguono il rendering di un'icona di pixel 16×16 CSS, che viene mappata su pixel del dispositivo 16×16 o 32×32 a seconda della densità dello schermo.

Le barre dei segnalibri e le schede aggiunte spesso utilizzano 32×32 o 48×48. Chromium può scegliere automaticamente il fotogramma incorporato più vicino da favicon.ico.

Tutte e tre le dimensioni comuni delle linguette (16, 32, 48) si adattano comodamente a un unico .ico multidimensione. Ecco perché il contenitore .ico rimane il formato di consegna desktop più efficiente.

Windows Il menu Start, i pin della barra delle applicazioni e i collegamenti di Esplora file possono richiedere 24×24, 32×32, 48×48, 64×64, 128×128 o 256×256 a seconda del contesto e del ridimensionamento della visualizzazione.

Microsoft documenta 16, 24, 32, 48, 64, 128 e 256 come set pratico per le app Windows. I Web favicon traggono vantaggio dal raggruppamento di almeno 16-256 in favicon.ico.

macOS preferisce .icns per le app native, ma utilizza volentieri .ico e PNG per le scorciatoie web. iOS ignora .ico per le icone della schermata iniziale e desidera un PNG 180×180 dedicato tramite l'icona touch Apple.

I manifesti delle app Web richiedono icone con scopo qualsiasi e facoltativamente mascherabili. Le dimensioni comuni sono 192×192 e 512×512 PNG.

Android Chrome utilizza le icone manifest per l'interfaccia utente di installazione e le schermate iniziali. Una sorgente 512×512 esegue il downscaling in modo pulito; un manifest di soli 192×192 sembra morbido sui telefoni di fascia alta.

iOS non legge le icone manifest per il posizionamento nella schermata iniziale. Devi dichiarare <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.

16×16: schede del browser (densità 1×). 32×32: schede e segnalibri sui display Retina. 48×48: alcuni contesti dell'interfaccia utente Windows e utilizzi di segnalibri legacy.

64×64 e 128×128: ​​scorciatoie Windows con ridimensionamento maggiore. 256×256: riquadri fissati Windows e anteprime ad alto DPI.

180×180 — icona touch Apple (iOS / iPadOS). 192×192 e 512×512: icone manifest PWA per Android e istruzioni di installazione.

Blog personale: favicon.ico solo con 16/32/48. Accettabile se non ti interessa la lucidatura della schermata iniziale di iOS.

Sito di marketing aziendale: pacchetto .ico più icona touch Apple 180×180 più PNG <link> 32×32 per schede Retina esplicite.

PWA installabile: .ico completo, icona touch Apple, manifest 192 + 512, SVG opzionale per Chrome UI scalabile.

App desktop Electron: Windows .ico con 16–256; macOS .icns separatamente se distribuito al di fuori del browser.

Multiformato favicon.ico (16, 32, 48, 64, 128, 256) a /favicon.ico.

apple-touch-icon.png a 180×180 per le schermate Home iOS.

Una superficie di installazione 512×512 PNG in site.webmanifest per Android.

Quel trio copre circa il 95% delle richieste di icone del mondo reale. Aggiungi SVG quando desideri un ridimensionamento infinito e uno stile in modalità oscura nelle schede moderne.

Ho bisogno di un PNG 16×16 se è all'interno di .ico? No, a meno che tu non voglia un <link rel="icon" sizes="16x16"> esplicito per il debug.

È ancora necessario il formato 120×120? Quella era una vecchia taglia iOS. Il moderno Safari prevede 180×180.

Che ne dici di 64×64 favicon? Utile all'interno di .ico per Windows; raramente necessario come PNG autonomo.

Posso saltare 256×256? Solo se non ti interessano mai le anteprime delle scorciatoie ad alta DPI Windows. La maggior parte delle squadre lo include.

L'icona iOS ha gli angoli arrotondati e sembra ritagliata: questo è il mascheramento iOS: design con riempimento sicuro, non un bug nel tuo file.

L'installazione di PWA mostra un'icona generica: icone manifest mancanti o inferiori a 192×192 minimo. Convalida JSON con Chrome DevTools → Applicazione.

Icona scheda morbida su Retina Mac: assicurati che favicon.ico contenga un fotogramma 32×32, non solo 16×16.

Enorme download di .ico: hai incorporato 256×256 BMP non compresso. Ricostruire con compressione PNG all'interno del contenitore.

I pixel CSS non sono pixel fisici. Uno slot per schede 16×16 su un display 2× spesso carica una bitmap 32×32 per la nitidezza.

Ecco perché un favicon.ico contenente sia 16 che 32 fotogrammi supera un singolo PNG 16×16 sui MacBook Retina e sui laptop Windows ad alto DPI.

Android PWA visualizzano le icone manifest sulle schermate iniziali alla massima risoluzione del dispositivo: una sorgente 192×192 estesa a un telefono 1440p sembra morbida; 512×512 esegue il downscale in modo pulito.

iOS applica la propria maschera e il proprio raggio d'angolo alle risorse con l'icona del tocco della mela. Design con imbottitura sicura in modo che i bordi importanti non vengano tagliati dallo scoiattolo.

Durante il test, eseguire uno screenshot della scheda con lo zoom del browser al 100% e con il ridimensionamento del sistema operativo al 200%. Se entrambi sembrano nitidi, probabilmente la matrice delle dimensioni è corretta.

Scarica favicon.ico e aprilo in uno strumento che elenca i frame incorporati. Conferma che esistano 16, 32, 48 e almeno un frame di grandi dimensioni.

Recupera apple-touch-icon.png e controlla le dimensioni in qualsiasi strumento di controllo immagini: aspettati 180×180, non 120×120 da modelli obsoleti.

Apri site.webmanifest e verifica che le icone[] includano 192×192 e 512×512 con percorsi e tipi di immagine/png corretti.

Carica il tuo sito in Chrome DevTools → Applicazione → Manifest. Le voci mancanti o non valide mostrano avvisi prima che gli utenti vedano una finestra di dialogo di installazione interrotta.

Mantieni un foglio di calcolo che associa ciascun file al relativo consumatore (scheda, iOS, PWA, Windows). In futuro non dovrai più effettuare il reverse engineering della cartella delle risorse durante un rebranding.

Nuove classi di dispositivi appaiono lentamente nel paese favicon. Le icone manifest 512×512 oggi coprono le UI di installazione pieghevoli e tablet migliori delle sole 192.

Evita dimensioni esotiche (96×96, 120×120) a meno che un documento di piattaforma specifica non le imponga ancora: aggiungono oneri di creazione senza ampi vantaggi.

Archivia il vettore principale o il raster 1024×1024 nel repository di progettazione anche se non lo spedisci mai. Le piattaforme future potrebbero richiedere icone manifest più grandi.

Automatizza la rigenerazione dal master in modo che quando viene visualizzata una nuova dimensione consigliata, riesegui uno script invece di esportare manualmente in Photoshop.