Un logo nero su sfondo trasparente è perfetto in una scheda chiara e scompare in una scura. Il formato ICO non può adattarsi, ma la favicon SVG sì: contiene una regola CSS che cambia i colori in base al tema del browser.
Il problema: un file, due sfondi
Ora che i browser seguono il tema del sistema, la barra delle schede può essere quasi bianca per un visitatore e quasi nera per un altro sulla stessa pagina. Una favicon monocromatica pensata per l’uno diventa illeggibile per l’altro.
Molti siti aggirano il problema dando all’icona uno sfondo colorato opaco. Funziona, ma l’icona diventa una macchia pesante, mentre i grandi marchi preferiscono un simbolo scontornato.
La soluzione giusta è lasciare scegliere al browser: è possibile senza JavaScript e senza rilevamento lato server.
Come funziona l’SVG adattivo
Un file SVG è un documento, non un’immagine piatta: può contenere un tag style e quindi media query. Una regola prefers-color-scheme: dark ridefinisce il colore di riempimento dei tracciati quando il browser usa un tema scuro.
In pratica, l’SVG dichiara un colore predefinito per il tema chiaro e una regola che lo sostituisce in modalità scura. Il browser applica quello corretto durante la visualizzazione e aggiorna subito la scheda se il visitatore cambia tema.
Lo stesso meccanismo va oltre una semplice inversione: puoi mostrare un disegno completamente diverso, per esempio un simbolo scontornato nel tema chiaro e un distintivo pieno in quello scuro.
Dichiarare l’SVG accanto al .ico
Dichiara l’SVG con link rel="icon" type="image/svg+xml" href="/favicon.svg". I browser che lo comprendono lo preferiscono agli altri formati, mentre gli altri usano favicon.ico nella radice.
Non c’è quindi nulla da eliminare: i due file convivono e ognuno copre i client dell’altro. È il miglioramento progressivo applicato a un’icona di 32 pixel.
Una precisazione: una favicon SVG deve essere autonoma. In questo contesto non vengono caricati caratteri esterni, immagini remote o script. Il testo deve essere convertito in tracciati.
Cosa non copre la modalità scura
La variante scura riguarda la favicon del browser desktop. Non influisce sull’icona Apple Touch, che è un PNG opaco fisso, né sulle icone del manifest web, che Android mostra sul proprio sfondo.
Il supporto non è universale: i browser basati su Chromium e Firefox leggono l’SVG adattivo, mentre Safari può essere meno aggiornato a seconda della versione. Non è un problema: il ripiego sul .ico è automatico.
Progetta quindi l’icona chiara come versione predefinita, visibile a ogni visitatore, e considera la variante scura un perfezionamento per i browser in grado di leggerla.
Fonti primarie
Domande frequenti
favicon.ico può gestire la modalità scura?
No. Il formato ICO memorizza immagini raster fisse senza alcuna nozione di tema. Solo l’SVG può contenere una media query: per questo il set moderno include entrambi.
Servono due file SVG, uno chiaro e uno scuro?
No, basta un file. Le due varianti convivono nello stesso SVG, separate dalla media query prefers-color-scheme, evitando una richiesta aggiuntiva e codice di rilevamento.
Come si verifica la resa del tema scuro?
Cambia il tema del sistema operativo, poi ricarica la scheda. Nel generatore le anteprime delle schede chiare e scure sono affiancate, evitando di dover passare da un tema all’altro.