Formati favicon spiegati: ICO, PNG, SVG e ciò di cui hanno bisogno i browser

Perché le favicon sono ancora stranamente complicate

Una favicon sembra una piccola immagine, ma si trova all’incrocio tra interfaccia del browser, segnalibri, schede, scorciatoie fissate, risultati di ricerca, schermate Home mobile e installazioni di progressive web app. Ogni contesto ha aspettative leggermente diverse.

Per questo i consigli sulle favicon spesso sembrano confusi. Alcuni team distribuiscono solo un singolo favicon.ico perché un tempo bastava. Altri generano una dozzina di file senza sapere quali vengano davvero usati. La via di mezzo sensata è più contenuta: capire cosa fanno bene ICO, PNG e SVG, poi distribuire un set compatto che copra i browser attuali e i contesti comuni dei dispositivi.

Le favicon non sono il posto giusto per mettere in mostra una pipeline di immagini. Sono il posto in cui essere prevedibili, espliciti e compatibili.

ICO: il vecchio formato che si rifiuta di morire

ICO è il classico contenitore di icone di Windows. Può contenere più immagini bitmap a dimensioni diverse, comunemente 16×16, 32×32 e 48×48 pixel. Questo conta perché una favicon può essere resa molto piccola in una scheda del browser, più grande in un elenco di segnalibri e in modo ancora diverso nelle scorciatoie di Windows.

Il dettaglio importante è che ICO è un contenitore, non semplicemente una singola immagine. Un buon favicon.ico di solito contiene più dimensioni raster, così il browser o il sistema operativo può scegliere la corrispondenza più vicina invece di scalare una singola bitmap minuscola.

ICO è ancora utile per tre motivi:

• I browser possono richiedere automaticamente /favicon.ico, anche se non lo colleghi nel tuo HTML.
• Alcuni browser e integrazioni meno recenti se lo aspettano.
• È un fallback sicuro quando le dichiarazioni di icone più recenti vengono ignorate.

Questo non significa che ICO debba essere la tua unica icona. È scomodo da modificare, non è particolarmente adatto ai workflow moderni ed è poco indicato come fonte di verità per un marchio. Trattalo come il fallback di compatibilità.

In pratica, inserisci un vero /favicon.ico nella root del sito. Non servire un 404 lì, a meno che tu non apprezzi log rumorosi e tentativi inutili del browser.

PNG: il cavallo di battaglia affidabile

PNG è ancora il formato raster più prevedibile per favicon e touch icon. Supporta la trasparenza, è ampiamente supportato e si comporta in modo coerente tra browser e piattaforme.

Per le favicon, PNG è utile quando vuoi icone con dimensioni in pixel esplicite, come 32×32 o 48×48. Per le icone della schermata Home mobile, PNG è di fatto obbligatorio in alcuni ambienti. Le Apple touch icon, per esempio, sono basate su PNG nell’uso normale in produzione.

Alcune regole pratiche aiutano:

• Esporta da una sorgente vettoriale, non da una bitmap già piccola.
• Rendi l’icona leggibile a 16×16 prima di preoccuparti delle dimensioni maggiori.
• Aggiungi abbastanza padding perché il segno non sembri tagliato in contesti arrotondati o mascherati.
• Evita testo fine, linee sottili e illustrazioni dettagliate.

Di solito non vale la pena ossessionarsi sulla compressione PNG per le favicon, perché i file sono minuscoli. Detto questo, non distribuire una touch icon da 500 KB solo perché è uscita direttamente da un export di design. Se stai già valutando scelte più ampie sulle immagini, lo stesso approccio disciplinato di decisioni sui formati immagine nel web moderno vale anche qui: scegli il formato adatto al compito, non perché è di moda.

SVG: l’opzione moderna e flessibile

Le favicon SVG sono interessanti perché sono indipendenti dalla risoluzione. Un singolo file piccolo può essere renderizzato in modo nitido a molte dimensioni e può essere modificato direttamente nel codice o esportato da software di design.

Le versioni moderne di Chromium, Firefox e Safari supportano le favicon SVG. Questo rende SVG un buon formato favicon principale per molti siti, soprattutto quando l’icona è un logo semplice, un glifo o un segno geometrico.

Ma le favicon SVG hanno alcune cautele.

Prima di tutto, l’SVG dovrebbe essere autonomo. Non fare affidamento su font esterni, immagini remote o script. I browser applicano restrizioni agli SVG usati come immagine, e anche quando qualcosa funziona in un browser può fallire in un altro.

Secondo, mantienilo visivamente semplice. SVG non risolve magicamente il problema dei 16 pixel. Un’illustrazione vettoriale dettagliata resta comunque una macchia sfocata quando viene compressa dentro una scheda.

Terzo, fai attenzione allo styling dinamico. Alcuni team usano prefers-color-scheme dentro una favicon SVG affinché l’icona si adatti ai temi chiari e scuri del browser. Può funzionare, ma il comportamento dei browser e della cache può essere irregolare. Se il riconoscimento del brand conta, una singola icona robusta spesso batte una soluzione adattiva ingegnosa.

SVG è una buona sorgente e un buon formato moderno di distribuzione. Non è un motivo per saltare i file di fallback.

Cosa cercano davvero i browser

I browser scoprono le favicon in due modi principali: link HTML espliciti e richieste implicite alla root.

Il comportamento implicito è quello vecchio: se il browser vuole un’icona e non ne ha trovata una, può richiedere /favicon.ico. Per questo il file ICO nella root resta utile anche sui siti moderni.

Il comportamento esplicito usa elementi <link> nella head del documento. Una configurazione moderna e compatta appare così:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Il manifest può poi puntare a icone PNG più grandi usate per web app installabili:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Questa non è l’unica configurazione valida, ma è una buona base. Offre ai browser moderni un SVG, fornisce un fallback ICO convenzionale, copre i salvataggi sulla schermata Home di iOS e supporta i contesti di installazione delle app.

Il set di favicon che la maggior parte dei siti dovrebbe distribuire

Per un normale sito marketing, sito di documentazione, app SaaS o pubblicazione, questo set è sufficiente:

• /favicon.ico contenente 16×16 e 32×32, opzionalmente 48×48.
• /icon.svg come favicon moderna scalabile.
• /apple-touch-icon.png a 180×180.
• /icon-192.png e /icon-512.png se hai un web app manifest.

Puoi aggiungere altre dimensioni se una piattaforma ha un requisito specifico, ma non generare dieci file per abitudine. Ogni file in più è un’altra cosa da mettere in cache, dimenticare, nominare male o lasciare obsoleta dopo un rebrand.

Se il tuo sito non è installabile e non ha un manifest, potresti non aver bisogno delle icone da 192 e 512 pixel. Se il tuo sito si comporta come un’app, probabilmente sì.

Errori comuni

I bug più comuni delle favicon non sono artistici. Sono problemi di distribuzione.

Uno è la cache aggressiva. I browser conservano le favicon con ostinazione. Durante i test, un’icona modificata potrebbe non comparire finché non fai un hard refresh, cancelli i dati del sito, usi un nuovo nome file o testi in un profilo pulito. Per i rebrand in produzione, cambiare /icon.svg?v=2 può aiutare nell’HTML, ma la root /favicon.ico è più difficile perché i browser la richiedono direttamente. Sostituire il file e attendere la scadenza delle cache spesso fa parte del lavoro.

Un altro problema comune è il MIME type sbagliato. SVG dovrebbe essere servito come image/svg+xml, PNG come image/png e ICO comunemente come image/x-icon o image/vnd.microsoft.icon. Molti browser sono permissivi, ma non tutti i contesti lo sono. Se qualcosa fallisce solo in un browser, ispeziona la risposta di rete prima di ridisegnare l’icona. Le stesse abitudini usate quando si fa debug di redirect e header HTTP in produzione valgono qui: guarda la risposta reale, non ciò che il CMS dichiara di servire.

Un terzo problema è la densità del design. I loghi che funzionano magnificamente nell’header di un sito spesso falliscono come favicon. L’icona della scheda è un test brutale. Rimuovi le parole, semplifica le forme, aumenta il contrasto e testa alle dimensioni reali. Se l’icona è contenuto significativo dentro la pagina, allora contano considerazioni di accessibilità come l’alt text; per la favicon in sé, è decorazione dell’interfaccia del browser, non contenuto della pagina. Per la distinzione, vedi la nostra guida pragmatica all’alt text delle immagini.

<!-- tool-cta:start -->

💡 Prova questo: Genera in un solo passaggio le varianti ICO, PNG e SVG attese dai browser moderni con Ultimate Favicon Generator.

<!-- tool-cta:end -->

Una semplice checklist di implementazione

Usa questa checklist prima della pubblicazione:

1. Parti da un master vettoriale pulito.
2. Testa il segno a 16×16 e 32×32.
3. Esporta una favicon SVG autonoma.
4. Genera un fallback ICO multi-dimensione.
5. Esporta una Apple touch icon da 180×180.
6. Aggiungi PNG da 192×192 e 512×512 se usi un manifest.
7. Metti /favicon.ico nella root del sito.
8. Verifica status code, MIME type e header di cache.
9. Testa almeno in un browser Chromium, in Firefox e in Safari se il tuo pubblico include dispositivi Apple.

Le favicon sono piccole, ma sono anche molto visibili. Una favicon rotta fa sembrare un sito incompleto. Una ben realizzata scompare nell’interfaccia, ed è esattamente questo il punto.