La favicon, il biglietto da visita del nostro sito web

---

Che cos’è una favicon? Perché è importante? Come posso aggiungerne una?

Definizione

La favicon è una piccola icona di 16×16 pixel che svolge le funzioni di marchio per il sito web. Il suo scopo principale è quello di aiutare i visitatori a individuare più facilmente la nostra pagina web specialmente quando si hanno più schede aperte oppure negli elenchi dei preferiti. In generale, viste le loro ridotte dimensioni, le favicon funzionano meglio quando sono immagini semplici o quando sono costituite da uno a tre caratteri di testo.

Le favicon non debbono essere confuse con i loghi aziendali, anche se a volte capita che logo e favicon siano simili. Il più delle volte, proprio a causa delle ridotte dimensioni e risoluzioni delle favicon, una sensibile riduzione del logo per rientrare nei parametri standard, potrebbe portare ad una favicon molto differente dal logo originale dell’azienda, al punto che potrebbe persino essere irriconoscibile.

Dove si possono individuare le favicon?

Le favicon si trovano accanto a tutto ciò che identifica il nostro sito web. Ciò include segnalibri, schede, app della barra degli strumenti, risultati della cronologia e barre di ricerca.
Un’occhiata alle immagini che seguono chiarirà tutto meglio di mille parole:

• Menu a discesa dei segnalibri

• Schede del browser

• App della barra degli strumenti

• Menu a discesa Cronologia

• Cronologia del browser

• Barra di ricerca

• Suggerimenti sulla barra di ricerca

Perché le favicon sono importanti?

La creazione di una favicon è un piccolo ma importante tassello nella creazione di un sito web aziendale. Aggiunge legittimità al nostro sito web e aiuta a rafforzare sia il nostro marchio online che la fiducia dei potenziali consumatori. La favicon è un indicatore visivo immediato del sito e consente un’identificazione facile e rapida da parte dei navigatori, unificando tutti i vari componenti del browser in un’esperienza di navigazione ben marcata e riconoscibile.

Le favicon sono importanti per la SEO?

Un cliente qualche settimana fa, mi ha chiesto se ritenessi la favicon direttamente partecipe dell’ottimizzazione per i motori di ricerca?
Io francamente ho risposto di no!
Tuttavia ritengo che essa sia corresponsabile di una migliore User Experience e quindi sia un segnale importante per i MdR.

I siti web intuitivi portano a un maggiore utilizzo da parte degli utenti

Avere un sito web facile da usare, migliora indirettamente il posizionamento nei motori di ricerca. Avere una favicon visibile nelle schede del browser, nei segnalibri, negli archivi della cronologia e così via aiuta i nostri utenti a risparmiare tempo nel riconoscimento del sito, consentendo loro di identificare e navigare il nostro sito web senza ulteriori difficoltà, aumentando le probabilità di interazione da parte degli utenti.
Se poi abbiamo scritto anche buoni contenuti, ecco che potremmo beneficiare di un maggior tempo di permanenza degli utenti sul nostro sito web; attività questa, che segnala ai MdR, che abbiamo abbiamo lavorato bene e che forniamo ai navigatori le giuste risposte alle loro domande.
Un buon segnale che i motori di ricerca non mancheranno di cogliere, migliorando quindi il nostro posizionamento SEO.

Segnalibri e favicon

Una favicon ci dà un vantaggio in più rispetto ai siti web che non ne fanno uso. Bassi pensare ad un elenco di preferiti nel quale identificare un link in particolare, in questo caso la presenza della favicon è fondamentale. L’utente che ha archiviato il link nei suoi preferiti ritrova più facilmente il nostro sito riconoscendolo dal marchio, piuttosto che dalla lettura del nostro tag Title confuso tra tutti gli altri tag Title memorizzati sul suo browser e questo può aumentare le visite al nostro sito web.

Marchio e visibilità

La favicon è una bandiera, la rappresentazione visiva del nostro sito web e della nostra attività, pertanto gli utenti, nel tempo, potrebbero identificare il nostro marchio in base alla favicon che utilizziamo. Parte della SEO è incentrata sul branding e quanto più il nostro sito web è riconoscibile, tanto più è possibile che gli utenti facciano clic su di esso, ricordandosi di noi.

Come creare una buona favicon

Sono molte le cose che devono essere prese in considerazione quando si progetta e si crea una favicon. Nonostante si tratti di un’icona piccola e semplice, può avere un grande impatto. È importante assicurarsi di realizzare la migliore favicon possibile, poiché si tratta di uno dei segnali con cui gli utenti identificheranno il nostro sito web ed il nostro marchio. Quello che segue è un breve elenco delle cose da tenere a mente quando si progetta prima e si realizza poi una favicon.

Saggezza nell’uso dello spazio

A volte una favicon non può essere semplicemente una versione più piccola del logo della nostra azienda o del nostro progetto. È necessario ricordare che la forma dell’icona e quella di un quadrato di 16 px per lato, poiché questo è il formato accettato da tutti i browser (le eccezioni saranno trattate in seguito).

Semplicità obbligata

Sebbene la favicon sia l’aspetto visivo del nostro marchio, viste le dimensioni di base è necessario realizzare un design il più semplice possibile. Le migliori favicon sono le più semplici. Grazie alle dimensioni ridotte della favicon e alla semplicità delle forme utilizzate, i colori sono fondamentali per attirare l’attenzione di potenziali consumatori e distinguersi. Troppi dettagli renderanno la favicon soltanto un segno ingombrante, disordinato e confuso.

Identità aziendale (brand identity)

La favicon è la rappresentazione visiva del sito web, quindi dovrebbe dire visivamente agli utenti cosa rappresenta la nostra attività, cosa tratta il nostro marchio e in generale cosa facciamo. Anche se tutto questo è molto difficile da ottenere con un design così piccolo e semplice, bisogna cercare di essere creativi. Gli esempi che seguono dimostrano quale sia il potere di alcune di queste piccole ma creative icone; una sola occhiata ed a prima vista è possibile identificare ciò di cui parla il marchio e ciò che rappresenta:

Abbreviare per trovare la giusta sintesi

Trovare la grafica perfetta, per quello che fa la nostra attività, potrebbe non essere praticabile. Una soluzione comune alla risoluzione di questo problema è usare le prime lettere della “Ragione Sociale” per realizzare un acronimo della nostra azienda. Se l’azienda è già conosciuta tramite un’abbreviazione del nome allora conviene utilizzare questa, o ancora, giocando con varianti diverse è possibile scegliere l’abbreviazione che meglio funziona per noi.

Coordinamento dei colori della favicon

Anche la scelta dei colori dovrebbe entrare in gioco. I colori contrastanti consentono all’occhio di riconoscere facilmente le forme e il punto focale della favicon. A causa della sua natura ridotta e della necessità di rappresentare chiaramente la propria azienda, l’uso del colore può diventare vitale. Infine bisogna tener presente che i browser sono progettati diversi tra loro: ad esempio alcuni di essi posizionano la favicon, su di uno sfondo grigio, nero o bianco e non è possibile modificare questa impostazione.

Favicon: le dimensioni necessarie per ciascun browser?

Come già precedentemente accennato, in genere si consiglia di realizzare favicon di dimensioni standard perché sono rappresentate da tutti i browser, ma se invece si volesse creare una favicon per ogni tipo possibile di utilizzo, allora potrebbe far comodo seguire le indicazioni che seguono:
• 16 px – per uso generale in tutti i browser, visualizzata senza problemi nella barra degli indirizzi, nelle schede o nelle elencazioni dei segnalibri ecc. ecc.;
• 24 px – sito appuntato in Internet Explorer 9;
• 32 px – nuova scheda in Internet Explorer, pulsante della barra delle applicazioni in Windows 7 e barra laterale “Leggi più tardi” di Safari;
• 57 px – schermata iniziale di iOS standard (iPod Touch, iPhone di prima generazione a 3G);
• 72 px – icona della schermata iniziale iPad;
• 96 px – favicon utilizzata dalla piattaforma TV di Google;
• 114 px – icona della schermata iniziale iPhone 4+ (il doppio della dimensione standard per il display retina);
• 128 px – Chrome Web Store;
• 195 px – composizione veloce del browser Opera.

Quali formati grafici utilizzare per la favicon?

Contrariamente al passato, quando una favicon doveva essere obbligatoriamente nel formato ICO di Windows, ora ci sono alcune diverse opzioni di formattazione. Di seguito uno sguardo a ciascuno di essi in modo più approfondito:

• Windows ICO: è di gran lunga il file più ampiamente supportato. I vantaggi dell’ICO sono che può contenere più risoluzioni e profondità di bit, il che funziona molto bene ed è particolarmente utile per Windows. ICO offre anche un’icona di 32 pixel che è utile per la barra delle applicazioni di Windows 7 di Internet Explorer. È anche l’unico formato che non utilizza l’elemento <link>.
• PNG: il formato PNG è utile per diversi motivi. Non c’è bisogno di speciali software per creare un file PNG, e questo già lo rende molto più facile da usare. Consente la dimensione del file più piccola possibile e supporta la trasparenza alfa. Tuttavia, un grosso svantaggio di questo stile è che Internet Explorer non supporta un file PNG ma solo file ICO.
• SVG: anche questo formato può essere utilizzato ed è particolarmente supportato dai browser Opera.
• GIF: questo formato grafico non offre alcun vantaggio al di fuori dell’uso sui vecchi browser. Se da un lato attirano maggiormente l’attenzione degli utenti, dall’altra hanno anche la tendenza a irritare i navigatori. Il parere generale è che non sono in alcun modo un vantaggio.
• JPG: anche se questo formato può essere utilizzato, non è di uso comune e non offre una qualità di risoluzione pari a quella di PNG. Inoltre, a causa delle dimensioni ridotte della favicon, il JPEG perde tutti i suoi vantaggi.
• APNG: si tratta della versione animata di PNG e, sebbene possa essere supportata dai browser Firefox e Opera, ha gli stessi problemi della GIF animata, distraendo gli utenti mentre guardano la loro interfaccia.

Come aggiungere una favicon al nostro WordPress

Per poter aggiungere una favicon al nostro sito realizzato in WordPress, bisogna accedere al Pannello di Amministrazione e selezionare nella barra laterale sinistra Aspetto> Personalizza> Denominazione del sito.
Nella sezione Icona del sito sarà possibile selezionare la favicon che si desidera visualizzare.

Se il tema non consente il caricamento della favicon come precedentemente descritto, si potrà installare un plug-in quale: WPFavicon.
Da questo momento in poi tutto è molto semplice: dalla barra laterale sinistra si deve selezionare Media> Aggiungi nuovo, caricare la favicon e copiare il link assegnato al file. Infine non resta che cliccare su Impostazioni> Favicon e incollare il link precedentemente copiato.

Per quanto detto la presenza della favicon renderà il nostro sito web più professionale; proprio per questo è necessario adottare un approccio altrettanto  professionale nella creazione di questo componente che seppur piccolo rappresenta un vero e proprio biglietto da visita per il nostro sito, che lo renderà unico e maggiormente riconoscibile dai navigatori del web.