Dimensioni delle favicon spiegate (16–256): cosa includere in favicon.ico
Scopri esattamente quali dimensioni di icone inserire nella tua favicon.ico e perché ognuna è importante
Converti oraDove compaiono realmente le favicon
La maggior parte delle persone pensa alle favicon come le piccole icone nelle schede del browser, ma compaiono in molti più posti. Capire ogni contesto ti aiuta a scegliere quali dimensioni includere per avere un'icona sempre nitida.
Le schede del browser sono la posizione più visibile. Ogni scheda aperta mostra la tua favicon a circa 16 pixel, rendendola il modo principale con cui gli utenti identificano il tuo sito quando hanno molte schede aperte. Anche le barre dei segnalibri e i menu visualizzano la tua icona a 16 pixel nella maggior parte dei browser, quindi una versione nitida a questa dimensione è irrinunciabile.
Le barre degli indirizzi e i suggerimenti di ricerca in alcuni browser mostrano la favicon accanto all'URL, tipicamente a 16 o 32 pixel a seconda della densità del display. I pannelli della cronologia si comportano in modo simile, utilizzando la favicon per aiutare gli utenti a scorrere i siti visitati in precedenza.
Oltre al browser, le favicon compaiono anche nei contesti del sistema operativo. Quando un utente aggiunge il tuo sito alla barra delle applicazioni di Windows o crea un collegamento desktop, il sistema operativo attinge dal file ICO e può visualizzare l'icona a 48, 64 o persino 256 pixel. Sui display ad alta risoluzione (classe Retina), un'icona da 32 pixel potrebbe essere allungata per riempire uno spazio che richiede più dettaglio, producendo un risultato sfocato a meno che non esista una variante più grande all'interno del file ICO.
Le Progressive Web App (PWA) usano le proprie icone dal manifest anziché favicon.ico, ma la favicon rimane importante come fallback per l'interfaccia standard del browser e per gli utenti che aggiungono il sito ai segnalibri senza installare la PWA.
A cosa serve ogni dimensione di favicon
Ogni dimensione in pixel ha uno scopo preciso. La tabella seguente associa ogni dimensione standard di favicon al suo utilizzo comune e indica se dovresti includerla.
| Dimensione (px) | Uso comune | Includere? |
|---|---|---|
| 16 × 16 | Schede del browser, barra dei segnalibri, barra degli indirizzi, cronologia | Sì — obbligatoria |
| 32 × 32 | Schede browser ad alta risoluzione, barra delle applicazioni Windows, Safari macOS | Sì — obbligatoria |
| 48 × 48 | Collegamenti sito di Windows, Esplora risorse | Sì — consigliata |
| 64 × 64 | Alcune superfici UI di Windows, lettori RSS | Opzionale |
| 128 × 128 | Vista icone grandi di Windows, Chrome Web Store | Opzionale |
| 256 × 256 | Vista extra-large di Windows, collegamenti desktop ad alta risoluzione | Consigliata per completezza |
16 e 32 pixel sono le dimensioni assolutamente essenziali. Senza di esse, i browser ricorrono a un'icona generica a forma di globo o a un'icona vuota, il che danneggia il riconoscimento del brand. Queste due dimensioni coprono praticamente ogni scenario di scheda del browser a risoluzione standard e ad alta risoluzione.
48 pixel entra in gioco quando gli utenti creano collegamenti Windows al tuo sito. Il sistema operativo visualizza i collegamenti desktop a 48 pixel nella vista predefinita delle icone, quindi includere questa dimensione evita che il sistema ingrandisca in modo approssimativo la variante da 32 pixel.
64 e 128 pixel compaiono in contesti di nicchia. Alcune superfici UI di Windows e applicazioni di terze parti richiedono un'icona da 64 pixel, mentre 128 pixel è usata dal Chrome Web Store e da alcune viste a icone grandi. Includerle aggiunge solo pochi kilobyte al file ICO, quindi il compromesso è minimo.
256 pixel conta soprattutto sui monitor ad alta risoluzione. Quando Windows visualizza una vista a icone extra-large o un utente aggiunge il tuo sito alla barra delle applicazioni su un display 4K, il sistema operativo può utilizzare la variante da 256 pixel per la resa più nitida possibile.
Il set sicuro consigliato
Se vuoi un singolo favicon.ico che copra la più ampia gamma di contesti senza gonfiature inutili, usa questo set sicuro:
- 16 px — schede del browser e segnalibri
- 32 px — schede ad alta risoluzione e barra delle applicazioni Windows
- 48 px — collegamenti desktop Windows
- 256 px — alta risoluzione e viste a icone extra-large
Questo set a quattro dimensioni mantiene il file ICO compatto (tipicamente sotto i 30 KB) garantendo al contempo una resa nitida in ogni contesto principale. Puoi aggiungere 64 e 128 pixel se il tuo caso d'uso lo richiede, ma la maggior parte dei siti web non noterà mai una differenza.
Se stai creando una favicon esclusivamente per il web e non prevedi che gli utenti creino collegamenti desktop, puoi ridurre il set a soli 16 e 32 pixel. Questo produce un file ICO ben sotto i 10 KB. Tuttavia, il costo di includere 48 e 256 è così basso che consigliamo il set sicuro completo come impostazione predefinita per quasi ogni progetto.
Per una panoramica più ampia su come funziona il formato ICO e quando è la scelta giusta rispetto a PNG, consulta il nostro articolo su cos'è un file ICO.
Come generare le dimensioni corrette per la favicon
Creare una favicon.ico multi-dimensione richiede solo pochi passaggi con Any2ICO. Lo strumento accetta immagini sorgente PNG, JPG, WebP, GIF, BMP, AVIF e SVG fino a 10 MB, e produce un file ICO correttamente strutturato contenente tutte le dimensioni che selezioni.
- Parti da un'immagine sorgente ad alta risoluzione. Carica il tuo logo o icona a 512 pixel o più. Un'immagine sorgente grande fornisce al convertitore abbastanza dettaglio per produrre versioni ridimensionate pulite a ogni dimensione target. Le immagini sorgente SVG funzionano particolarmente bene perché si ridimensionano senza alcuna perdita di dettaglio.
- Seleziona le dimensioni. Spunta le caselle per 16, 32, 48 e 256 (il set sicuro), oppure aggiungi 64 e 128 se ne hai bisogno.
- Scegli il comportamento di ridimensionamento. Contain adatta l'immagine all'interno di ogni quadrato mantenendo le proporzioni, aggiungendo padding nello spazio rimanente. Cover riempie l'intero quadrato, ritagliando i bordi se necessario. Per la maggior parte dei loghi, contain con sfondo trasparente è la scelta migliore.
- Scarica la tua favicon.ico. Posiziona il file risultante nella root del tuo sito web (
https://tuosito.com/favicon.ico). I browser cercano questo percorso automaticamente, quindi in molti casi non hai nemmeno bisogno di un tag<link>.
Any2ICO esegue la conversione direttamente nel tuo browser utilizzando la Canvas API. I file importati dal tuo dispositivo vengono trasmessi attraverso il server per l'elaborazione ma non vengono memorizzati. Le immagini incollate dagli appunti rimangono interamente sul tuo computer. Se stai convertendo diverse icone contemporaneamente, la modalità batch ti permette di scaricare tutto in un singolo file ZIP.
Per una guida completa passo passo con screenshot e frammenti di codice HTML, consulta la nostra guida su come creare una favicon.ico. E se hai bisogno di convertire specificamente un PNG, la nostra guida da PNG a ICO illustra nel dettaglio quel flusso di lavoro.
Conclusioni
Scegliere le dimensioni giuste per la favicon non deve essere complicato. La regola fondamentale è semplice: includi sempre 16 e 32 pixel, aggiungi 48 e 256 per la copertura Windows e alta risoluzione, e usa un'immagine sorgente ad alta risoluzione per mantenere ogni dimensione nitida. Quel set sicuro a quattro dimensioni gestisce la stragrande maggioranza degli scenari reali.
Quando sei pronto a creare la tua favicon, Any2ICO rende tutto facile. Carica la tua immagine, scegli le dimensioni e scarica un singolo file ICO che funziona ovunque. È gratuito, veloce e rispetta la tua privacy.