Nel 2026 sarà ancora necessario utilizzare il file favicon.ico?

Sì. I browser, i motori di ricerca e i lettori di feed richiedono il file `/favicon.ico` dalla directory principale del sito, seguendo una convenzione, senza analizzare il codice HTML. Pertanto, se il file non è presente, si verificheranno errori 404 e le icone risulteranno vuote in tali contesti. Create un file ICO con diverse dimensioni (16, 32 e 48 pixel) anziché una singola dimensione, in modo che non sia necessario ridimensionarlo.

Perché la mia icona appare come un quadrato nero sugli iPhone?

iOS riempie le aree trasparenti di un’icona «apple-touch» con un colore nero pieno, anziché con uno sfondo neutro. Prima di esportare l’icona, appiattiscila su uno sfondo colorato specifico. Lo strumento di generazione di favicon di FileTinker esegue questa operazione automaticamente, utilizzando il colore di sfondo che hai scelto. Inoltre, evita di utilizzare angoli già arrotondati: iOS applica la propria maschera per gli angoli.

Posso usare un singolo file SVG come favicon e omettere i file PNG?

Non ancora, non deve essere l’unica icona. Le favicon in formato SVG sono ottime quando supportate: offrono immagini nitide, sono di dimensioni ridotte e possono adattarsi alla modalità scura grazie a una query multimediale incorporata, ma il supporto è variabile e Safari è l’unico browser che non le supporta. Inoltre, qualsiasi richiesta di `/favicon.ico` non troverà un file SVG. Fornite quindi il file SVG come miglioramento rispetto al set di file ICO e PNG, e non in sostituzione di essi.

Perché Android ha bisogno di un’icona da 512 pixel quando le schede hanno una dimensione di soli 16 pixel?

Le icone del file manifest svolgono una funzione diversa. La versione da 192 pixel diventa l’icona visualizzata nella schermata iniziale quando un utente aggiunge il tuo sito, mentre la versione da 512 pixel viene utilizzata per visualizzare l’invito all’installazione e la schermata di avvio che appare quando viene avviata un’app web installata, e viene visualizzata in formato grande su uno schermo ad alta densità di pixel. Viene scaricata solo quando è effettivamente necessario.

Ho sostituito la mia favicon, ma continua a visualizzarsi quella vecchia. Come mai?

Le favicon vengono memorizzate nella cache in modo molto efficace: i browser le conservano per un periodo di tempo molto più lungo rispetto alle immagini normali, a volte anche per settimane. Per verificare che i nuovi file siano stati caricati correttamente, è consigliabile utilizzare una finestra di navigazione privata. Per i visitatori abituali, potrebbe essere necessario un po' di tempo, ma l'aggiunta di una stringa di query alla versione degli URL delle icone nei tag di collegamento forzerà un nuovo caricamento.

Dimensioni e formati delle favicon nel 2026: di cosa ha realmente bisogno il tuo sito.

5 luglio 20267 min di lettura

Cerca consigli sulle favicon e troverai checklist che richiedono oltre venti file di icone: un PNG per ogni generazione di iPad, immagini per le tile di Windows, browserconfig.xml e maschere per le schede fissate. Gran parte di questo è un culto del cargo residuo del 2014, per piattaforme morte o tornate alle icone standard. Nel 2026 ti servono sei file immagine, un manifest e circa cinque righe di HTML. Questo copre le schede del browser, i segnalibri, i risultati di ricerca di Google, la schermata home di iOS e Android, incluse le app web installate. Questa guida ti spiega quali file contano, perché esistono, cosa puoi cancellare in sicurezza e come generare l'intero set da un singolo logo senza installare nulla o caricare il tuo artwork da nessuna parte.

Dove viene effettivamente visualizzata l’icona.

Già da tempo, un favicon non è più semplicemente un elemento decorativo per le schede del browser. La stessa piccola serie di immagini viene ora utilizzata in contesti molto più importanti, ognuno dei quali richiede dimensioni e formati specifici.

Le schede, i segnalibri e la cronologia del browser visualizzano l’icona con una dimensione di 16x16 pixel CSS, che viene raddoppiata a 32x32 sui dispositivi con schermi ad alta densità di pixel. Google mostra le icone (favicon) accanto ai risultati di ricerca, quindi un’icona mancante o di scarsa qualità può far sembrare la tua inserzione meno affidabile rispetto a quella del concorrente che si trova sopra. Quando un utente aggiunge il tuo sito alla schermata iniziale del suo iPhone, iOS utilizza l’icona «apple-touch-icon» come icona completa dell’app. Su Android, Chrome utilizza le icone specificate nel file manifest per lo stesso scopo e, se il tuo sito può essere installato come app web, l’icona da 512 pixel diventa l’immagine di sfondo visualizzata durante il caricamento.

Questa è la lista completa degli elementi per cui vale la pena creare un design. Le icone della schermata iniziale di Windows, le icone delle schede preferite di Safari e una dozzina di risoluzioni obsolete per iPad non sono incluse: maggiori dettagli in seguito.

Il pacchetto 2026: sette file, cinque righe di codice HTML.

Ecco tutto ciò di cui ha bisogno un sito web standard. Se una lista di controllo indica di aggiungere elementi non necessari, si tratta solo di riempitivo.

I file vanno inseriti nella directory principale del sito (in particolare, il file favicon.ico deve essere collocato lì). Il codice HTML consiste in una serie di tag di collegamento all’interno della sezione `<head>`: un tag per il file ICO, un tag per ciascuno dei due file PNG, un tag `rel="apple-touch-icon"` e un tag `rel="manifest"` che punta al file `webmanifest`.

favicon.ico: un singolo file ICO che contiene le versioni dell’icona a 16, 32 e 48 pixel. È un elemento fondamentale per la compatibilità; di seguito spiegheremo perché è ancora utilizzato.
favicon-16x16.png e favicon-32x32.png: immagini PNG nitide, adatte per la scheda e la barra dei segnalibri, utilizzabili sia su schermi standard che ad alta densità di pixel.
apple-touch-icon.png, dimensioni 180x180: icona per la schermata iniziale dei dispositivi iOS. Questa dimensione è ora adatta a tutti gli iPhone e iPad attualmente in commercio; iOS la ridimensiona automaticamente quando necessario.
android-chrome-192x192.png e android-chrome-512x512.png: questi file immagine vengono richiamati nel file manifest e utilizzati per la schermata iniziale di Android, per il selettore delle app e per la schermata di avvio durante l’installazione.
site.webmanifest: un piccolo file JSON che contiene l’elenco delle due icone per Android, oltre al nome dell’app e al colore del tema. È necessario per consentire al sistema di riconoscere le icone di Android e per rendere possibile l’installazione del sito.
Facoltativo: è possibile utilizzare un file SVG come favicon tramite un tag di collegamento con tipo «image/svg+xml». Si adatta perfettamente alle dimensioni e può modificare automaticamente il proprio aspetto per le schede in modalità scura, grazie a una query multimediale incorporata, ma è consigliabile mantenere anche i file PNG e ICO come opzioni di riserva.

Perché il file favicon.ico sembra non voler scomparire?

Il formato ICO è stato introdotto negli anni Novanta per Windows, eppure eliminarlo sarebbe ancora un errore nel 2026. Il motivo è che i browser, i motori di ricerca, i lettori RSS e innumerevoli programmi di scraping richiedono, per convenzione, il file /favicon.ico dalla directory principale del sito, senza nemmeno analizzare il codice HTML. Qualsiasi registro di un server web mostra un flusso costante di queste richieste. Se il file non è presente, viene restituito un errore 404 e l’icona non viene visualizzata correttamente in tali contesti.

Questo formato presenta anche un elemento interessante: un singolo file .ico funge da contenitore in cui è possibile memorizzare contemporaneamente diverse dimensioni. Un file favicon.ico ben strutturato contiene immagini di 16, 32 e 48 pixel e, quando viene letto, seleziona l’immagine più adatta invece di ridimensionare un’immagine di dimensioni errate, ottenendo un risultato scadente. Per questo motivo, convertire un singolo file PNG in un file favicon.ico, mantenendo una sola dimensione, comporta una perdita di qualità: le immagini più piccole vengono ridimensionate al momento e perdono nitidezza.

Quindi, la regola pratica è questa: mettete a disposizione un file favicon.ico con diverse dimensioni nella directory principale, in modo che sia accessibile a tutti i dispositivi che lo richiedono secondo le convenzioni standard, e fornite le immagini PNG da 16 e 32 pixel tramite tag di collegamento, in modo che siano utilizzate dai browser moderni, che le preferiscono.

La trappola di iOS: la trasparenza si trasforma in opacità.

L'icona «apple-touch-icon» ha un bordo netto che causa un difetto visivo a quasi tutti. iOS non sovrappone le icone trasparenti a uno sfondo gradevole, ma riempie le aree trasparenti di nero solido. Un logo esportato con sfondo trasparente appare bene ovunque, ma su uno schermo iniziale di iPhone si trasforma in un quadrato nero con un segno fluttuante.

La soluzione consiste nell’appiattire l’icona su uno sfondo di colore specifico prima dell’esportazione: bianco, il colore del vostro marchio o qualsiasi altro colore scelto intenzionalmente. iOS arrotonderà quindi gli angoli automaticamente, quindi non è necessario arrotondarli in anticipo: un’icona già arrotondata subirà un secondo ritaglio e mostrerà delle piccole aree scure agli angoli.

Lasciate anche un po’ di spazio intorno al logo: poiché iOS applica una propria maschera agli angoli, gli elementi grafici che toccano il bordo dell’area di 180x180 pixel vengono tagliati. È consigliabile mantenere il logo all’interno di circa l’80% dell’area centrale, in modo che sia più visibile e leggibile come icona dell’app.

Cosa è diventato obsoleto (elimina queste cose dalla tua mente).

Il vecchio codice HTML per le favicon raramente causa problemi, ma rallenta il caricamento di ogni pagina e costringe gli sviluppatori a cercare file di immagini che nessuno utilizza. Tutto quanto segue può essere eliminato:

I file «browserconfig.xml» e i metadati «msapplication-TileColor»/«TileImage» non sono più utilizzati. In precedenza, questi elementi servivano a personalizzare le icone della schermata iniziale di Windows 8 e l’aspetto di Internet Explorer 11. Ora, entrambi sono obsoleti.
apple-touch-icon-precomposed. Questo attributo eliminava l’effetto lucido che iOS 6 aggiungeva alle icone. Con iOS 7, nel 2013, l’effetto lucido è stato rimosso; ora è sufficiente utilizzare l’attributo semplice apple-touch-icon.
Ecco le dimensioni delle icone utilizzate per i dispositivi Apple: 57, 72, 76, 114, 120, 144, 152. Queste dimensioni corrispondevano alle specifiche risoluzioni dei vecchi modelli di iPhone e iPad. Un’unica icona di dimensioni 180x180 è sufficiente per tutti i dispositivi attualmente in uso.
«rel shortcut icon» era un termine utilizzato in Internet Explorer, ma non è mai stato uno standard. L’attributo «rel icon» semplice funziona correttamente su tutti i browser da oltre un decennio.
Icone per Safari in formato SVG, utilizzate per le schede fissate. Le versioni moderne di Safari utilizzano l’icona predefinita per le schede fissate, quindi il file dell’icona monocromatica è inutile.
I tag PNG vengono utilizzati con dimensioni di 96, 128, 196 e 228 pixel per garantire la compatibilità con le versioni precedenti di Chrome e Opera. Su Android, queste immagini sono state sostituite dalle icone del file manifest; sulle versioni desktop non sono mai state necessarie.

Progettare un logo che sia riconoscibile anche quando ridotto a 16 pixel.

Le domande sul formato sono la parte facile. La parte difficile è che la tua icona deve funzionare a 16x16, dove un logo da 256 pixel diventa una macchia. Alcune regole ti aiutano.

Semplificate in modo deciso. Utilizzate il simbolo del vostro logo, non la scritta – il testo diventa illeggibile quando la dimensione è inferiore a circa 32 pixel, a meno che non si tratti di una o due lettere. Se il vostro marchio è basato sulla tipografia, un monogramma composto da una sola lettera su uno sfondo uniforme risulterà sempre più efficace di un logo completo ridotto di dimensioni.

È preferibile utilizzare forme decise e un forte contrasto piuttosto che dettagli elaborati. Le linee sottili diventano invisibili quando l’icona è ridotta, e le sfumature delicate si appiattiscono, trasformandosi in un effetto di disturbo visivo. Verificare l’aspetto dell’icona sia su una barra delle schede chiara che su una scura; un’icona di colore blu scuro rischia di scomparire in un tema scuro, a meno che non abbia un contorno più chiaro, un elemento di sfondo o una variante SVG che inverta i colori tramite una regola «prefers-color-scheme».

Infine, esaminate il risultato con uno zoom del 100%, senza applicare alcuna scala nel vostro programma di progettazione. Un rendering delle dimensioni di una scheda è l’unico modo per ottenere un’anteprima realistica.

Creare l’intero pacchetto a partire da un singolo logo, direttamente nel browser.

Non è necessario utilizzare Photoshop o ricorrere a comandi complessi di ImageMagick per ottenere questi risultati. Il generatore di favicon di FileTinker prende una singola immagine e crea, in un unico passaggio, l’intero pacchetto descritto in precedenza: il file favicon.ico con diverse dimensioni (16, 32 e 48 pixel), i file favicon-16x16.png e favicon-32x32.png, un file apple-touch-icon.png di 180x180 pixel, che viene sovrapposto a un colore di sfondo per evitare che diventi nero sui dispositivi iOS, i file android-chrome-192x192.png e android-chrome-512x512.png, un file site.webmanifest che configura le icone per Android e un frammento di codice da copiare e incollare nell’intestazione della pagina, contenente i relativi tag di collegamento. Tutto viene fornito in un unico file zip e l’elaborazione avviene interamente nel browser: il logo non lascia mai il tuo dispositivo.

Parti dalla versione più grande e più nitida del tuo logo; idealmente, dovrebbe avere una risoluzione di 512 pixel o superiore, poiché la dimensione massima di output è 512x512 e l’ingrandimento di un’immagine di piccole dimensioni può renderla sfocata. Se l’immagine di origine non è quadrata, il generatore offre due opzioni di adattamento: «copri» e «contieni». L’opzione «copri» riempie l’intero spazio e ritaglia le parti in eccesso, mentre l’opzione «contieni» inserisce l’intera immagine all’interno dello spazio disponibile e riempie il resto con il colore di sfondo scelto. Per controllare con precisione quale parte di un logo largo deve essere mantenuta, prima ritaglia manualmente l’immagine per renderla quadrata, quindi carica l’immagine quadrata nel generatore.

Scegli con cura il colore di sfondo anche se il tuo logo non ha trasparenza: è ciò che gli utenti iOS vedranno dietro il tuo marchio e ciò che riempirà il letterboxing. Poi estrai il pacchetto nella root del tuo sito, incolla il snippet nell'head e deploya. Se ti serve solo un .ico veloce per un progetto secondario, la conversione da PNG a ICO del convertitore di immagini produce un'icona in pochi secondi, ma per qualsiasi cosa pubblica l'intero pacchetto vale il minuto extra.