UX della favicon: cosa rende ottima una favicon

Una favicon ottima è un segno semplice e ad alto contrasto, di solito il tuo logotipo o una o due lettere, che resta leggibile a 16x16 pixel sia sulle schede del browser chiare sia su quelle scure, è coerente con il tuo brand e cambia raramente. Tutto il resto di questa guida (allineamento ai pixel, colore, padding, trasparenza, peso del file) serve a questi obiettivi: rendere il tuo sito immediatamente riconoscibile tra decine di schede aperte.

Una favicon è minuscola, ma compare in molti punti: schede del browser, barre dei preferiti, cronologia, menu di ricerca delle schede, risultati di ricerca Google su mobile e desktop e schermate home dei telefoni. Per chi ha molte schede aperte, il titolo spesso viene troncato fino a sparire e l'icona è l'unico indizio rimasto. Questo ne fa un vero elemento di navigazione, non una decorazione.

1. Leggibilità a 16x16

La dimensione classica della favicon è 16x16 pixel CSS. Su uno schermo standard sono letteralmente 256 pixel; su uno schermo retina 2x il browser di solito sceglie un'immagine 32x32 per lo stesso spazio. Qualunque cosa tu disegni deve sopravvivere a questa riduzione.

Mantieni la semplicità

• Una forma o una-due lettere. Funzionano una singola lettera in grassetto, un cerchio con un simbolo o un semplice segno geometrico. Tre lettere o una parola diventeranno rumore.
• Un solo punto focale. Se non riesci a descrivere l'icona in cinque parole, è troppo complicata.
• Niente sfumature, ombre o texture sottili. A dimensioni ridotte diventano macchie sfocate.

Allinea alla griglia di pixel

A 16x16, una linea posizionata a mezzo pixel dalla griglia viene sfumata (anti-aliasing) su due righe di pixel e appare grigia e morbida. Posiziona i bordi su limiti di pixel interi e usa larghezze pari quando la forma è simmetrica. Se esporti da uno strumento vettoriale, attiva l'aggancio ai pixel, oppure controlla il risultato ridotto e correggilo a mano.

Evita le linee sottili

I tratti più sottili di 2 pixel a 16x16 (circa il 12 percento della larghezza dell'icona) tendono a sparire o a sfarfallare tra una dimensione e l'altra. Ispessisci i tratti, elimina i dettagli interni e unisci i piccoli spazi. Un glifo audace, leggermente pesante, di solito si legge meglio di una miniatura fedele di un logo dettagliato.

Rifinisci a mano

I file ICO e PNG non hanno l'hinting tipico dei font, quindi l'equivalente è la modifica manuale dei pixel: regoli i singoli pixel in modo che curve, diagonali e contro-forme (i fori di lettere come "a" o "e") restino nitide. Il ridimensionamento automatico è una buona prima bozza, ma pochi pixel posizionati a mano spesso fanno la differenza tra una macchia e una lettera riconoscibile. L'editor di pixel di MakeFav è pensato per questo: apri la tela 16x16, correggi i pixel problematici ed esporta.

2. Contrasto su schede chiare e scure

Oggi i browser vengono spesso usati in modalità scura e molti utenti hanno una barra delle schede diversa dal tema della pagina. Un'icona blu navy scuro con sfondo trasparente può essere perfetta su una scheda bianca e quasi invisibile su una grigio scuro. Testa sempre entrambe.

Soluzioni pratiche

• Aggiungi una forma di sfondo. Un quadrato arrotondato o un cerchio pieno in un colore del brand garantisce al segno un contrasto proprio, indipendentemente dalla scheda.
• Usa un contorno sottile o un alone. Un bordo più chiaro di 1px attorno a un glifo scuro (o il contrario) mantiene visibile la sagoma su entrambi i temi, ma a 16x16 deve restare nitido, quindi testalo.
• Scegli colori del brand a tono medio. Colori come blu intenso, arancione, verde o magenta di solito funzionano sia su superfici bianche sia quasi nere. Il giallo molto chiaro o il navy molto scuro sono i più rischiosi.
• Usa una favicon SVG adattiva. Un SVG può includere una media query prefers-color-scheme in modo che l'icona cambi con il tema di sistema.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

Tieni presente che la media query riflette il tema del sistema operativo o del browser, che di solito è quello seguito dalla barra delle schede, ma non sempre. Anche il supporto alle favicon SVG varia: Chrome e Firefox le gestiscono, mentre Safari storicamente è rimasto indietro, quindi mantieni sempre dei fallback PNG o ICO. Un design con sfondo pieno è l'opzione più robusta perché non richiede alcuna logica legata al tema.

3. Riconoscibilità e coerenza del brand

Usa il logotipo (il simbolo o monogramma), non il lockup completo con il wordmark. Il testo dentro un'icona 16x16 è illeggibile, e un logo orizzontale largo rimpicciolito in un quadrato lascia solo una piccola striscia al centro.

• Se il tuo brand ha un simbolo, semplificalo per le dimensioni ridotte invece di limitarti a rimpicciolirlo. Una "versione favicon" con meno dettagli è una pratica standard.
• Se il tuo brand è solo un wordmark, prendi la prima lettera o una coppia di lettere distintiva e componila nel carattere tipografico del brand in un peso marcato.
• Mantieni i colori coerenti con il tuo logo, l'icona dell'app e gli avatar social, così l'utente riconosce lo stesso brand ovunque.

La distintività conta quanto la fedeltà. Guarda una fila di schede: se altri tre siti usano anch'essi un cerchio blu, il tuo non si farà notare. Una forma o un colore diversi sono più utili di una riduzione perfettamente fedele.

4. Colore: una palette limitata e satura

Con così pochi pixel, ogni colore in più aggiunge confusione. Punta a uno o due colori più, al massimo, bianco o nero. I colori saturi funzionano meglio a dimensioni ridotte rispetto ai pastello, che tendono a fondersi con lo sfondo della scheda.

Prendi spunto dal pensiero sull'accessibilità. Le WCAG richiedono almeno 3:1 di contrasto per gli oggetti grafici significativi (criterio di successo 1.4.11, Contrasto del contenuto non testuale). Una favicon non è formalmente coperta, poiché fa parte dell'interfaccia del browser e non del contenuto della pagina, ma un 3:1 tra il glifo e il suo sfondo, e tra l'icona e la scheda, è un obiettivo sensato. Evita inoltre di comunicare qualcosa soltanto attraverso la tonalità: le varianti rossa e verde della stessa icona sono indistinguibili per molti utenti daltonici, quindi varia la forma o aggiungi un simbolo.

5. Forma, padding e zone di sicurezza

Riempi il quadrato

Le schede del browser mostrano la favicon a una dimensione ridotta fissa, quindi un margine extra rende solo più piccolo il tuo segno. Per le icone standard delle schede, usa gran parte della tela, con solo un pixel o due di respiro, in modo che il segno sia il più grande possibile.

Arrotondata o quadrata?

In genere i browser non ritagliano le favicon delle schede, quindi la forma che disegni è quella che gli utenti vedono. Un quadrato con angoli leggermente arrotondati appare ordinato e offre uno sfondo coerente; un glifo libero o un cerchio su trasparenza può sembrare più leggero e distintivo. Vanno bene entrambi. Scegline uno e mantieni coerente l'intero set di icone.

Apple touch icon

iOS aggiunge i propri angoli arrotondati all'apple-touch-icon (180x180 è la dimensione abituale). Fornisci un quadrato a pieno bordo senza angoli già arrotondati, altrimenti potresti ritrovarti con sottili strisce scure o bianche visibili negli angoli.

Icone maskable per Android e PWA

Le icone maskable vengono ritagliate dal sistema operativo in cerchi, squircle o altre forme. Mantieni tutto il contenuto importante dentro la zona di sicurezza: un cerchio centrato nell'icona con un raggio pari al 40 percento della larghezza dell'icona. Estendi il colore di sfondo fino ai bordi in modo che qualsiasi maschera funzioni bene. Non riutilizzare come icona maskable una favicon da scheda stretta, da bordo a bordo, perché la maschera la taglierebbe.

6. Trasparenza

La trasparenza va bene per le favicon delle schede, ed è ciò che permette a un'icona fatta solo di glifo di stare pulita su qualsiasi colore di scheda. È un problema per le Apple touch icon: iOS riempie le aree trasparenti con un colore pieno (di solito nero), che può rovinare il design. Dai sempre all'apple-touch-icon uno sfondo opaco nel colore del brand. Lo stesso vale per le icone maskable e per la maggior parte degli usi sulla schermata home di Android, dove uno sfondo opaco dà risultati prevedibili.

7. Stabilità: non cambiarla troppo spesso

Una favicon costruisce riconoscibilità attraverso la ripetizione. Cambiarla di frequente costringe gli utenti a reimparare quale sia la tua scheda e causa anche grattacapi tecnici. I browser mettono in cache le favicon in modo aggressivo e Google le scarica e le conserva separatamente dalle tue pagine, quindi una nuova icona può impiegare giorni o settimane per comparire nei risultati di ricerca. Google richiede inoltre un URL della favicon stabile, un'icona la cui dimensione sia un multiplo di 48 pixel (48x48, 96x96 e così via) e un file che possa scansionare (non bloccato da robots.txt). Considera un cambio di favicon come una decisione da rebranding, non come una decorazione stagionale.

8. Stati di notifica e favicon dinamiche

Alcune web app cambiano la favicon per indicare messaggi non letti, stato di registrazione o un errore. Se fatto bene è utile; se esagerato è irritante.

• Usa un piccolo badge (un punto o un breve conteggio) in un angolo, non un redesign completo. L'icona di base deve restare riconoscibile.
• Sii parsimonioso. Riserva i badge agli eventi che richiedono un'azione dell'utente. Non animare l'icona di continuo.
• Limita i numeri. A 16x16 sono leggibili solo una o due cifre; mostra "9+" o un semplice punto invece di "137".
• Ripristina subito quando l'utente ha gestito l'elemento, e riporta l'icona predefinita.
• Non affidarti al solo colore. Un punto rosso dovrebbe essere sostenuto anche dal titolo della pagina, ad esempio "(3) Posta in arrivo", così l'informazione è disponibile per tutti.

Le favicon dinamiche di solito vengono disegnate su un canvas e sostituite aggiornando l'href dell'elemento link dell'icona. Limita la frequenza degli aggiornamenti, perché cambiare continuamente la favicon può consumare CPU e distrarre gli utenti.

9. Prestazioni

Le favicon sono piccole, ma restano richieste che possono essere gestite male.

• Mantieni i file leggeri. Una favicon PNG pesa tipicamente da poche centinaia di byte a qualche kilobyte. Un SVG semplice può stare sotto 1 KB.
• Evita file ICO gonfi. Un ICO multi-dimensione con immagini da 16, 32 e 48 pixel è sufficiente. Incorporare un'immagine 256x256 moltiplica il peso del file senza alcun beneficio visibile nelle schede del browser.
• Imposta gli header di cache. Servi le icone con una lunga durata di Cache-Control, ad esempio public, max-age=31536000, immutable, e usa un nome file versionato o con hash quando le modifichi.
• Dichiara le icone in modo esplicito. I browser richiedono /favicon.ico per impostazione predefinita, quindi forniscine una anche se dichiari altre icone, per evitare rumore di 404 nei tuoi log.
• Comprimi. Passa i PNG attraverso un ottimizzatore lossless e minifica gli SVG.

<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='/manifest.webmanifest'>

Se vuoi generare tutti questi file da una sola immagine sorgente, il generatore di favicon MakeFav produce il set standard, e la pagina per sviluppatori illustra le opzioni di integrazione.

10. Accessibilità

Una favicon non ha testo alternativo e gli screen reader non la annunciano, quindi gli strumenti tradizionali di accessibilità come gli attributi alt non si applicano. Ciò che conta davvero:

• Il titolo della pagina porta il significato. Scrivi elementi <title> unici e descrittivi. Non affidarti mai all'icona per comunicare uno stato; riporta ogni badge anche nel titolo.
• Visibilità per chi ha problemi di vista. Alto contrasto, una forma decisa e un segno grande aiutano gli utenti che scorrono visivamente le schede.
• Indipendenza dal colore. Assicurati che siano le forme o le lettere a distinguere gli stati, non solo la tonalità.
• Meno distrazioni. Evita favicon lampeggianti o animate, che possono essere un problema per gli utenti sensibili al movimento.

Checklist di UX della favicon

Checklist di test

Non fidarti della grande anteprima nel tuo strumento di design. Testa l'icona reale in condizioni reali:

1. Più browser. Controlla Chrome, Firefox, Safari ed Edge, perché ciascuno sceglie icone e dimensioni in modo leggermente diverso.
2. Modalità chiara e scura. Cambia il tema del sistema operativo e del browser e guarda ogni volta la barra delle schede.
3. Schermi retina e standard. Controlla su un monitor 1x e su uno schermo 2x o 3x, e usa lo zoom del browser.
4. Barra dei preferiti. Aggiungi la pagina ai preferiti e verifica se l'icona è ancora leggibile accanto ad altri siti.
5. Molte schede. Apri 20 schede e verifica se riesci a trovare la tua a colpo d'occhio.
6. Anteprima SERP di Google. Controlla un risultato di ricerca da mobile dopo che l'icona è stata ricontrollata dal crawler. Ricorda che l'aggiornamento può richiedere tempo.
7. Schermata home. Aggiungi il sito alle schermate home di iOS e Android e verifica che l'icona non sia tagliata, non abbia angoli neri e non sia troppo piccola all'interno della maschera.
8. Controllo tecnico. Passa il tuo dominio nel verificatore di favicon MakeFav per confermare che i file esistano, restituiscano uno stato 200, abbiano le dimensioni giuste e siano dichiarati correttamente nel tuo HTML.

Un flusso di lavoro pratico

1. Parti dal tuo logotipo e semplificalo fino a una forma o a una lettera.
2. Crea una tela quadrata con uno sfondo pieno o sagomato che funzioni in entrambi i temi.
3. Esporta le dimensioni 32x32 e 16x16 e rifinisci a mano la versione piccola nell'editor di pixel.
4. Genera il set completo (ICO, PNG, apple-touch-icon, icone del manifest) con il generatore.
5. Aggiungi i tag link, imposta gli header di cache, pubblica e verifica con il verificatore.

Una favicon è una delle risorse più piccole del tuo sito e una delle più viste. Poche scelte accurate su contrasto, semplicità e coerenza la fanno funzionare in ogni scheda, tema e dispositivo.

Domande frequenti

Che dimensione dovrebbe avere una favicon?

Progetta per 16x16 e 32x32 per le schede del browser (il browser usa 32x32 sugli schermi ad alta densità), fornisci un'apple-touch-icon 180x180 per iOS e PNG 192x192 e 512x512 per Android e PWA. Per i risultati di ricerca di Google, usa un'icona quadrata la cui dimensione sia un multiplo di 48 pixel, come 48x48 o 96x96. Una sorgente SVG si adatta a tutte.

Devo usare il mio logo completo come favicon?

Di solito no. I loghi completi con wordmark sono troppo dettagliati e troppo larghi per un'icona quadrata 16x16. Usa il logotipo o un monogramma di una o due lettere e semplificalo in modo che resti riconoscibile anche in piccolo.

Come faccio funzionare una favicon in modalità scura?

L'approccio più sicuro è dare all'icona una propria forma di sfondo piena o un contorno a contrasto, in modo che non dipenda dal colore della scheda. In alternativa, usa una favicon SVG con una media query prefers-color-scheme per cambiare i colori, e mantieni fallback PNG o ICO per i browser che non supportano le icone SVG. Testa sempre sia il tema chiaro sia quello scuro.

Perché la mia nuova favicon non compare?

I browser mettono in cache le favicon per molto tempo e Google conserva una propria copia, che aggiorna secondo i propri tempi, spesso impiegando giorni o settimane. Esegui un aggiornamento forzato della pagina, svuota la cache del browser, usa un nuovo nome file versionato e assicurati che i tag link e un /favicon.ico nella root puntino al file giusto. Puoi verificare la configurazione con il verificatore MakeFav.

È una buona idea mostrare badge di notifica su una favicon?

Sì, se usati con parsimonia. Un piccolo punto o un conteggio di una o due cifre aiuta gli utenti ad accorgersi di qualcosa che richiede un'azione, ma animazioni costanti o numeri grandi danneggiano leggibilità e attenzione. Riporta sempre lo stato nel titolo della pagina, ripristina l'icona predefinita quando l'elemento è stato gestito e non affidarti al solo colore.