La favicon è una piccola icona che viene visualizzata nella barra delle schede dei browser, direttamente accanto al titolo della pagina.
Che cos’è la favicon?
La favorite icon (abbreviata in favicon) è una piccola immagine che viene visualizzata nella barra degli indirizzi del browser a sinistra del titolo della pagina.
Può servire come caratteristica di riconoscimento di un sito e quindi influire sulla sua facilità d’uso.
Come faccio ad aggiungere la favicon?
La favicon viene inserita tramite un elemento di collegamento (link) nell’area <head> del documento HTML. A tal proposito si specifica:
- che si tratta di un’icona (
rel=icon), - dove si trova l’icona (
href=favicon.png), - le dimensioni dell’icona (
size="16x16"), - e di che tipo di contenuto si tratta (
type="image/png").
Nel codice sorgente può apparire così:
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#007c8">Per quanto riguarda il rel="manifest, si tratta di una voce che Chrome utilizza su Android. La voce rel="mask-icon" è specifica per il browser Safari di Apple e determina quale icona deve essere visualizzata per le schede appuntate.
Tutte le altre opzioni, come l’utilizzo del tipo di link “icon”, le puoi trovare sul sito dell’ente responsabile, il W3C.
Quali formati e dimensioni dell’immagine posso utilizzare per la favicon?
Nel nostro esempio sopracitato abbiamo tre voci per diverse favicon con diverse dimensioni e se ne possono definire ancora molte altre.
Su Stack Overflow è disponibile una risposta dettagliata alla domanda su quali dimensioni e formati di file utilizzare: Favicon Standard – 2018 – svg, ico, png and dimensions?
Cosa succede se la favicon non risulta disponibile?
Nel caso non riuscisse a trovare la favicon di un sito, Chrome mostrerà un’icona con un documento vuoto, mentre Firefox e Safari non riporteranno nulla.
Il fatto che la tua favicon non venga mostrata potrebbe derivare dai motivi seguenti:
- il codice d’implementazione è difettoso
- il tuo browser ha salvato la tua pagina come una pagina senza favicon
- il percorso specificato non è corretto
- il browser in uso carica le favicon solo da determinate località
- il link per la favicon non è nell’intestazione (area head)
Puoi aggiungere una favicon nell’area dell’intestazione della pagina attraverso il seguente link:
<link rel="shortcut icon" href="posizione della favicon.ico">
Per far sì che Google trovi e visualizzi la tua favicon, non dimenticare di seguire le apposite linee guida. Se cambi un URL, chiedi a Google d’indicizzare nuovamente la tua pagina: ciò può richiedere alcuni giorni o persino settimane. Inoltre, assicurati di utilizzare il giusto formato per la tua favicon (un multiplo di 48 pixel).
Cosa succede se una favicon non è collegata?
Google mostrerà correttamente le favicon nelle pagine dei risultati solo nel caso esistano dei collegamenti coerenti da tutte le pagine del sito. John Mueller di Google ha sottolineato in un Webmaster Hangout che la favicon deve essere linkata in ogni sottopagina. Il fattore decisivo è la coerenza, non il tipo di collegamento, altrimenti c’è il rischio che la favicon non venga visualizzata.
Conclusione sulle favorite icon
La favorite icon è un buon modo per rendere visibile il proprio logo anche nel browser, ed è quindi consigliabile usarla.
Esistono anche fornitori gratuiti su Internet, come il Real Favicon Generator, utili per creare favicon di varie dimensioni e con uno sforzo relativamente ridotto.
