Favicon per la dark mode: Come configurarle

letture

Perché serve una favicon diversa in dark mode

Quando un utente attiva il tema scuro (dark mode), molti browser e sistemi operativi adattano l’interfaccia e i colori dei tab. Se la tua favicon è pensata solo per sfondi chiari (ad esempio un’icona nera su trasparente), su un tab scuro può diventare poco visibile.

Con una favicon per dark mode puoi:

  • migliorare la leggibilità del tab e dei preferiti
  • aumentare la riconoscibilità del brand
  • offrire un’esperienza più curata su macOS, Windows e mobile

Come funzionano le favicon in base al tema (prefers-color-scheme)

I browser moderni supportano le media query CSS anche nei tag link delle favicon. In pratica puoi dichiarare due icone diverse:

  • una per tema chiaro ((prefers-color-scheme: light))
  • una per tema scuro ((prefers-color-scheme: dark))

Il browser sceglierà automaticamente quella più adatta.

Requisiti (prima di iniziare)

  • due file favicon: uno per il tema chiaro e uno per il tema scuro
  • preferibilmente formati moderni: svg (ottimo), png (ok), ico (compatibilità)
  • una favicon “dark” con colori chiari (es. bianco) e una “light” con colori scuri

Codice HTML: esempio completo (consigliato)

Inserisci questi tag dentro <head>:

<link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">

Note:

  • usa percorsi assoluti (es. /favicon-dark.svg) per evitare problemi con route e sottocartelle
  • se usi png, sostituisci semplicemente l’estensione

Fallback per browser meno recenti

Alcuni browser potrebbero ignorare la media query. Per sicurezza, aggiungi anche una favicon di default (senza media), che fungerà da fallback:

<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">

Suggerimento: metti la favicon “più neutra” come default (spesso quella per light mode, oppure un’icona che regge su entrambi i temi).

Come verificare che funzioni

  1. Apri il sito in Chrome/Edge/Safari.
  2. Cambia tema del sistema (chiaro/scuro).
  3. Ricarica la pagina (talvolta serve un hard refresh).
  4. Se non cambia, prova a:
    • svuotare la cache (le favicon vengono cache-ate aggressivamente)
    • cambiare nome file (es. favicon-dark-v2.svg) e aggiornare l’href

FAQ

  • Funziona su tutti i browser?
    • Funziona su molti browser moderni, ma non su tutti al 100%. Per questo è utile il fallback.
  • Meglio SVG o PNG?
    • SVG è spesso la scelta migliore perché è leggero e nitido su qualsiasi dimensione, ma verifica la compatibilità del tuo target.
  • Posso usare più dimensioni?
    • Sì, puoi aggiungere sizes (es. 16x16, 32x32) e dichiarare più icone per ciascun tema se necessario.

Conclusione

Configurare una favicon per la dark mode è una piccola modifica che migliora subito l’aspetto del sito. Usando prefers-color-scheme puoi servire automaticamente l’icona giusta in base al tema dell’utente, mantenendo sempre un fallback per la compatibilità.