Questo post è stato aggiornato il 7 aprile 2022.
Spesso, creando il proprio sito web, molte persone tendono a trascurare un piccolo particolare: la favicon. Anche se può sembrare solo un dettaglio del tuo sito, può fare davvero la differenza, quindi non sottovalutarne l'importanza.
Perchè, dunque, la favicon è un elemento essenziale del web design? In questo articolo vedremo cos'è una favicon, perchè è importante e cosa c'è da sapere per crearne una.
Cos'è un'immagine favicon
Una favicon è una piccola icona di 16x16 pixel usata sui browser per rappresentare un sito o una pagina web. Abbreviazione inglese di 'icona preferita' (favorite icon), le favicon sono comunemente visualizzate sulle schede nella parte superiore di un browser web, ma si trovano anche sulla barra dei segnalibri del tuo browser, nella cronologia e nei risultati di ricerca, accanto all'url della pagina.
In alcuni casi, come su Google Chrome, le favicon appaiono anche nella homepage del tuo browser. In altre parole, quando crei una favicon, questa servirà come icona del tuo sito web, o come simbolo visivo con cui identificare il tuo sito nel web.
Favicon su browser web
Favicon sulla barra dei segnalibri
Favicon nella cronologia del tuo browser
Favicon nei risultati di ricerca
Perché le immagini favicon sono importanti
Nonostante le piccole dimensioni, le favicon sono molto importanti per qualsiasi sito web, poiché migliorano l'esperienza utente, il branding e la professionalità di un sito.
Esperienza utente: le favicon agiscono come spunti visivi e aiutano chi naviga a trovare facilmente la scheda del tuo sito web sul browser e su diverse applicazioni come la barra dei segnalibri, rendendo più facile tornare al tuo sito più volte e migliorando l'esperienza utente. Inoltre, le favicon migliorano l'esperienza utente quando si tratta di navigazione su mobile, mettendo in evidenza il tuo sito anche su schermi più piccoli.
Branding: per creare un brand coerente, è importante non trascurare nemmeno il più piccolo dei dettagli. Nonostante le piccole dimensioni, una favicon contribuisce a rafforzare il branding e la visibilità del tuo sito web, estendendo il tuo design al borwser di navigazione. Inoltre, le favicon aggiungono credibilità al tuo sito web, facendolo apparire professionale e completo.
Credibilità: anche se le favicon non rendono il tuo sito più sicuro, gli utenti sembrano fidarsi di più dei siti web con una favicon. Questo è perchè le favicon fanno capire agli utenti che si trovano proprio sul tuo sito, indipendentemente dal fatto che abbiano trovato il tuo sito su un annuncio o tramite una ricerca organica.
Fidelizzazione utenti: le favicon aiutano a identificare il tuo brand, rendendo più semplice il riconoscimento del tuo sito nei risultati di ricerca o nella cronologia del tuo browser. Per questo, avere una favicon che sia riconoscibile aiuta gli utenti a tornare più di frequente sul tuo sito. Inoltre, quando gli utenti salvano il tuo sito nei segnalibri, una favicon renderà più semplice trovarlo nella lista dei siti preferiti.
Favicon e SEO
Le favicon non hanno un impatto diretto sulla SEO di un sito. Tuttavia, poichè rendono più semplice identificare un sito web e migliorano l'esperienza utente, le favicon possono aiutare a migliorare in modo organico il tuo posizionamento nei risultati dei motori di ricerca. Per migliorare la SEO del tuo sito in modo organico scopri gli strumenti SEO di Wix.
Come creare una favicon
In primo luogo, la tua favicon dovrebbe essere la versione semplificata del tuo logo.
Essendo un'estensione del tuo branding, dovrebbe contribuire a rafforzare l'identità che hai già creato per il tuo brand, senza distrarre o confondere gli utenti. Per creare il tuo logo potresti voler assumere un designer professionista, ma puoi anche decidere di creare il tuo logo in autonomia, usando un programma a tua scelta, o uno dei tanti strumenti online disponibili. Uno di questi è il Logo Maker di Wix che ti permette di creare una favicon professionale e personalizzata per riflettere al meglio il tuo stile e le tue esigenze.
Qui sotto vedremo alcuni suggerimenti per creare una favicon. In particolare, le linee guida da tenere a mente sono:
1. Tieni conto delle dimensioni della tua favicon
Le dimensioni ottimali sono di 16x16 pixel, ossia la dimensione in cui le favicon sono più comunemente visualizzate. Tuttavia, a volte, possono apparire anche in dimensioni più grandi, come 32x32 pixel.
Ecco alcune dimensioni favicon standard e dove usarle:
16x16: favicon su browser
32x32: favicon su barra delle applicazioni
96x96: favicon per collegamento su desktop
180x180: favicon Apple touch
2. Scegli il formato di file più adatto
Il formato originale per le favicon era l'ICO. Oggi, i formati di file o arte vettoriale preferiti per una favicon sono PNG o JPEG. Anche il formato SVG sta diventando sempre più popolare, perchè sempre più browser lo supportano. I browser sono in grado di mostrare anche favicon create come GIF. Tuttavia, la piccola dimensione delle favicon rende la GIF più difficile da vedere.
ICO: sviluppato da Microsoft, questo era il formato di file originale per le favicon. Supportato da tutti i browser, può comprendere immagini di diverse dimensioni in un unico file. Questo ti permette di ridimensionare la tua immagine, senza doverti affidare al browser. In molti casi, quando una favicon è salvata come ICO e un altro tipo di file, il browser sceglierà di mostrare la versione in formato ICO.
PNG: questo è un formato di file molto diffuso per le favicon perchè è uno dei più utilizzati dagli sviluppatori di siti web. È un formato facile da creare e, in genere, consente di avere immagini e favicon di alta qualità. I file PNG hanno anche il pregio di essere leggeri e quindi di caricarsi velocemente.
SVG: questo tipo di file è noto per essere leggero. Il vantaggio principale di questo tipo di formato per favicon è la capacità di fornire immagini di alta qualità senza rallentare la velocità e la performance di un sito. Nel passato, l'uso di file SVG per le favicon era limitato perchè non compatibile con i browser, ma questo sta cambiando.
Trasparenza: nel caso in cui il tuo design abbia uno sfondo trasparente, assicurati di salvare il tuo file in formato PNG, con l'impostazione di trasparenza attivata.
3. Suggerimenti per creare una immagine favicon
Progettare qualcosa di così piccolo può sembrare facile, ma il fatto che le favicon dei siti siano così piccole significa che si deve prestare ulteriore attenzione ai dettagli.
Ecco alcuni consigli su come creare una favicon che si adatti al meglio al tuo brand e al tuo sito web:
Semplicità
Le piccole dimensioni delle favicon rendono necessario un design preciso. Evita di aggiungere troppi dettagli come piccole linee, texture od ombreggiature. Punta invece su un'icona vivace, chiara e semplice che sia immediatamente riconoscibile.
La favicon della creatrice di gioielli Ilaria Bonardi è un ottimo esempio di immagine favicon semplice, composta da due elementi. Ci piace anche l'icona divertente di Ducknology: la papera è una versione adattata del loro logo, e rappresenta tutto quello che rende questo brand e sito così unici.
Identità del brand
Una favicon dovrebbe rappresentare lo spirito del tuo sito e del tuo brand, mantenendo lo stesso linguaggio visivo e la palette di colori usata per il tuo sito web.
Per il proprio sito Wix, la graphic designer Bhroovi Gupta ha creato una favicon arcobaleno che riprende i colori usati per il linguaggio visuale del sito. Allo stesso modo, la favicon di eBay fonde i colori del brand con l'icona di una piccola borsa della spesa, catturando perfettamente lo spirito del sito con una versione semplificata del loro logo.
Poco o nessun testo
Se vuoi inserire del testo nella tua favicon, limita il più possibile l'uso dei caratteri, al massimo tre. Iniziali o abbreviazioni sono spesso buone soluzioni per accorciare il testo da usare in una favicon, come il nome del tuo brand.
Il sito Wix dell'organizzazione no-profit Arte, usa l'iniziale A del loro logo come favicon, con uno sfondo verde fosforescente per attirare l'attenzione. In alternativa, la favicon del sito di Red Fern, un attività design del paesaggio con sede a Brooklyn, non ha alcun testo. Invece, utilizza solo l'icona di una foglia di felce, che è anche il logo dell'azienda, creando un forte impatto e rafforzandone il brand.
Uso del logo
Mentre alcuni loghi appaiono al meglio anche come favicon, nella maggior parte dei casi è necessaria qualche modifica per rendere un logo leggibile anche quando viene ridimensionato. Omettere la tag line, o usare solo le iniziali, sono solo alcuni dei modi utlizzati per ottimizzare i loghi per l'utilizzo come favicon.
Nota come la favicon di Google è leggermente diversa dal suo logo, pur incarnando gli stessi principi di design. La favicon mostra solo la familiare lettera G, incorporando tutti e quattro i colori del brand. Un approccio diverso è stato utilizzato dall'illustratrice e utente Wix Charlotte Mei, che usa le iniziali del suo logo disegnato a mano come favicon.
Colore
Tieni presente che la favicon sarà visualizzata su diversi sfondi colorati, a seconda del contesto e del browser utilizzati. Quindi, assicurati di testare la tua favicon su sfondi grigi, bianchi e neri prima di finalizzarne il design.
4. Aggiungi una favicon su HTML
Se hai creato il tuo sito con un costruttore di siti web, aggiungere la tua favicon in HTML non sarà necessario. Questo passaggio serve solo per i siti web costruiti da uno sviluppatore. Qui sotto vediamo come inserire la tua immagine favicon nel codice dell'intestazione, per fare in modo che che appaia sul tuo sito.
<link rel="icon" type="image/png" href="Favicon.png"/>
Se invece stai creando il tuo sito con Wix, nel prossimo paragrafo vedremo come personalizzare e aggiungere la tua favicon a un sito.
5. Aggiungi una favicon al tuo sito Wix
I siti Wix includono automaticamente una favicon standard, che puoi personalizzare passando a un pacchetto Premium e collegando il tuo sito a un dominio.
Ecco come puoi facilmente cambiare la tua favicon sul tuo sito Wix:
Nel pannello di controllo del tuo sito, vai su Impostazioni
Clicca su Impostazioni del sito
Clicca su Carica immagine e seleziona un'immagine esistente o clicca su + Carica Media per caricare un'immagine da computer
Clicca su Scegli file e vedrai un'anteprima di come sarà la tua favicon sulla scheda del browser
Clicca su Salva e il tuo sito web ha ora una favicon che apparirà sulla scheda del tuo sito web una volta che lo avrai pubblicato
6. Testa la tua favicon
Una volta inserita la favicon controllane l'aspetto in tutti i posti dove appare. Quando lo fai ti consigliamo di utilizzare la modalità in incognito, per evitare problemi con la cache.
Ora controlla la tua favicon in tutti i posti in cui un utente potrebbe vederla: il browser, la scheda segnalibri, la cronologia e, se possibile, anche nei risultati di ricerca su Google. Il tuo sito non compare ancora nei risultati di ricerca per le parole chiave che hai scelto? Se il tuo sito è stato indicizzato, dovresti trovarlo cercando il tuo nome o quello della tua azienda. Quando trovi la tua favicon, sai che è stata implementata correttamente.
Questo è anche un buon momento per pensare all'aspetto della tua favicon. L'aspetto definitivo coglie l'essenza del tuo brand? Se la risposta è sì, allora la tua favicon è pronta per essere condivisa con il mondo intero.