Favicon

Il favicon è la piccola icona che identifica un sito web nelle schede del browser, nei segnalibri, nella cronologia e in alcuni risultati di ricerca. Il nome deriva da "favorites icon", il termine che Internet Explorer usava per i segnalibri.

In origine i browser richiedevano un file chiamato favicon.ico dalla radice del sito. Il formato ICO può contenere più dimensioni in un solo file, ad esempio 16×16, 32×32 e 48×48 pixel. L'HTML attuale dichiara le icone con un elemento link il cui attributo rel è icon, e il file può essere PNG o SVG oltre che ICO.

I dispositivi Apple usano un'icona touch separata per le scorciatoie nella schermata Home, di solito un PNG di 180×180. Le web app installabili elencano icone più grandi, spesso 192×192 e 512×512, in un web app manifest.

Formati e dimensioni dei favicon

File	Formato	Dimensioni comuni
favicon.ico	ICO	16, 32, 48 px in un solo file
Link dell'icona	PNG o SVG	PNG 32×32, oppure un SVG scalabile
Apple touch icon	PNG	180×180
Icone del manifest	PNG	192×192, 512×512

Dove appaiono i favicon

• Schede del browser e barra degli indirizzi.
• Segnalibri, elenchi di lettura e cronologia.
• Scorciatoie nella schermata Home di telefoni e tablet.
• Risultati di ricerca e anteprime dei link in alcuni servizi.

Come creare un favicon

1. Parti da un marchio quadrato, non dal logotipo completo con il testo.
2. Semplificalo in modo che resti leggibile a 16×16 pixel.
3. Esporta le dimensioni PNG, un SVG facoltativo e un file ICO.
4. Aggiungi gli elementi link all'head della pagina e verifica in più browser.

In un flusso di pubblicazione reale

Un favicon mancante appare come un'icona generica negli screenshot delle schede e nella documentazione. Prima di catturare finestre del browser per una guida o per un post di lancio, verifica che il favicon venga caricato. I browser memorizzano i favicon in cache in modo aggressivo, quindi un'icona vecchia può restare visibile dopo un aggiornamento.

Errori comuni

• Usare un logo dettagliato che diventa illeggibile a 16 pixel.
• Dimenticare l'Apple touch icon, così sui telefoni compare uno screenshot della pagina.
• Usare un'icona trasparente che scompare con i temi scuri del browser.
• Verificare solo in un browser.

Hai un'immagine da correggere adesso?

Converti un logo tra PNG, JPG e WebP con Image Converter, e controlla la sua dimensione in pixel con Screenshot Resolution Checker.

Domande frequenti

Serve ancora favicon.ico?

Molti siti lo includono ancora, perché alcuni strumenti lo richiedono dalla radice del sito. Un link a un'icona PNG o SVG copre i browser attuali.

Un favicon può essere animato?

Alcuni browser mostrano favicon GIF animati, ma il supporto varia. Un'icona statica è la scelta affidabile.

Fonti

• Favicon (Wikipedia)
• HTML Living Standard: links

Risorse correlate

• Open Graph image: l'immagine di anteprima più grande per i link condivisi.
• Image Compressor: riduce la dimensione del file dell'icona.