La “favicon”
Che cosa è la favicon (contrazione dell’inglese “favorites icon”)? Aggiungere una icona accanto alla URL del proprio sito web è importante ai fini SEO? Come la costruiamo e che caratteristiche deve avere? Da quali browser è supportata?
Nel vasto mondo del web design, anche i più piccoli dettagli possono fare la differenza.
Uno di questi è la favicon, un elemento spesso trascurato ma che può avere un impatto significativo sull’esperienza complessiva degli utenti sul tuo sito web.
In questo articolo, esploreremo l’importanza della favicon e il ruolo che essa gioca nel branding e nel riconoscimento del tuo sito.
Che cos’è la favicon?
Una favicon è una piccola icona che appare nella scheda del browser accanto al titolo della pagina web. È anche visibile nei segnalibri, nelle schede aperte e in altre aree del browser.
Solitamente, le favicon sono dimensionate 16×16 pixel o 32×32 pixel e vengono salvate in formato .ico, anche se possono essere utilizzati altri formati come .png o .gif.
Viene visualizzato anche nell’elenco dei link “Preferiti” degli utenti.
Il primo browser ad utilizzare la favicon è stato Microsoft Internet Explorer 5 e poi a seguire tutti gli altri (tra cui Mozilla Firefox, Opera, Safari, Google Chrome e Konqueror), diventando uno standard.
Perchè è importante utilizzare la favicon?
Anche se a prima vista risulta difficile individuarne l’importanza, il suo utilizzo rappresenta un potente strumento di marketing.
- Riconoscibilità del Brand: la favicon può diventare un elemento distintivo del tuo marchio. Scegliendo un’immagine o un logo riconoscibile, puoi rendere il tuo sito web immediatamente identificabile tra le altre schede aperte nel browser. Questo contribuisce alla memorabilità e alla coerenza del brand, specialmente se la favicon è coerente con il tuo logo aziendale o l’immagine che desideri trasmettere.
- Credibilità e professionalità: l’uso di una favicon personalizzata dà al tuo sito web un aspetto più professionale e curato. Al contrario, l’assenza di una favicon o l’utilizzo di quella predefinita fornita dal sistema operativo o dal CMS può far sembrare il tuo sito meno affidabile o incompleto. Investire tempo e attenzione nella creazione di una favicon unica e ben progettata comunica un senso di professionalità e cura dei dettagli.
- Facilità di navigazione: La favicon non svolge solo un ruolo estetico, ma può anche migliorare l’usabilità del tuo sito web. Quando gli utenti hanno aperto numerose schede nel browser, la favicon permette loro di identificare più facilmente e rapidamente la tua pagina tra le altre. Questo può aiutare a mantenere gli utenti impegnati e a ridurre la probabilità che si disorientino o abbandonino il sito.
Esiste una correlazione con la SEO?
E dal punto di vista SEO? Negli ultimi anni molti “tools” che effettuano analisi SEO hanno inserito anche il controllo sulla presenza o meno della favicon.
Dire però che migliora il posizionamento del vostro sito non è corretto.
Potrebbe invece aumentare il numero di click sulla vostra pagina dal momento che vi rende più facilmente riconoscibili dagli utenti, sempre che venga utilizzata una immagine coerente con il contenuto del vostro sito.
Compatibilità con i principali browsers
Questo file grafico ha normalmente l’estensione .ico, di dimensione 16×16 o 32×32 ma anche 48×48 pixel. Possono essere utilizzati anche altri formati, .gif e .png di diverse dimensioni.
Il problema nell’utilizzo di formati grafici differenti dal .ico, è la compatibilità con i diversi browser, che riporto nella tabella a seguire:
| Browser | Supporto nativo | ||||||
|---|---|---|---|---|---|---|---|
| ICO | PNG | GIF | GIF animato | JPEG | APNG | SVG | |
| Google Chrome | Sì | Sì | Da 4.0 | Da 4.0 | Da 4.0 | Si | Da 80 |
| Internet Explorer | Da 5.0 | Da 11.0 | Da 11.0 | No | No | No | No |
| Mozilla Firefox | Da 1.0 | Da 1.0 | Da 1.0 | Sì | Sì | Da 3.0 | Da 41 |
| Opera | Da 7.0 | Da 7.0 | Da 7.0 | Da 7.0 | Da 7.0 | Da 9.5 | Da 67 |
| Safari | Sì | Da 4.0 | Da 4.0 | No | Da 4.0 | Si | No |
Creare un file .ico
La creazione di un file .ico è molto semplice. Dopo aver individuato un file da utilizzare come favicon (anche il logo della vostra attività), potete utilizzare un qualsiasi tool grafico (vi consiglio il programma gratuito Irfanview) o un servizio online (toolset) per creare il file grafico.
Partite sempre da una immagine con dimensioni da 40×40 a 240×240 pixel. Per generare questa icona con WordPress personalmente utilizzo il plugin Favicon by RealFaviconGenerator.
Pubblicare la favicon sul sito o blog
Aggiungere una favicon al tuo sito web è un processo relativamente semplice. In genere, è necessario creare un’icona nel formato desiderato (16×16 pixel o 32×32 pixel), salvarla come file .ico o in un altro formato accettato, quindi caricarla nella radice del tuo sito web.
Successivamente, è sufficiente aggiungere il seguente codice HTML nella sezione <head> di ogni pagina:
<link rel="icon" href="favicon.ico" type="image/x-icon">
Assicurati di sostituire “favicon.ico” con il percorso e il nome del tuo file favicon.
Se avete creato il vostro sito/blog con WordPress è sufficiente utilizzare il plugin indicato sopra o un altro che potete trovare tramite una semplice ricerca su Google.
