Il detto “nella botte piccola ci sta il vino buono" si applica perfettamente all'umile favicon. Questi piccoli badge del brand sono presenti sui browser web fin dai tempi di Internet Explorer negli anni '90, apparendo nelle schede del browser e nei preferiti. Le favicon sono promemoria visivi che aiutano i clienti ad associare il tuo sito web alla brand identity della tua attività.
È arrivato il momento di andare oltre l'icona generica del browser. In pochissimo tempo, puoi creare una favicon che lasci il segno (e aiuti i clienti a districarsi in una finestra del browser piena di schede).
Cos'è una favicon?
Una favicon è un piccolo elemento grafico visualizzato accanto ai titoli delle pagine nelle schede dei browser web, nelle barre dei preferiti, nei risultati della cronologia del browser e nelle pagine dei risultati dei motori di ricerca (SERP).
Parola composta da "favorite icon" (icona preferita), la favicon funge da segnalibro visivo per il tuo sito web e aiuta le persone a identificare una pagina web in presenza di più schede aperte. Le favicon potrebbero mostrarsi come icone di collegamento nella barra delle applicazioni quando un sito web è ridotto a icona. Quando gli utenti aggiungono il tuo sito ai preferiti, la favicon funziona anche come icona dei preferiti, rendendo più facile trovare il sito web tra le altre pagine web salvate.
In alcuni sistemi operativi, trascinare e rilasciare gli URL dalla finestra del browser al desktop crea icone di collegamento sul desktop. Le favicon del browser vengono spesso riutilizzate anche come icone di collegamento.
Vantaggi dell'utilizzo delle favicon
Una favicon non migliora il posizionamento SEO del tuo sito web, ma aggiungerne una, insieme ad altri miglioramenti del design UX, può dare vita a un sito web più user-friendly. Ecco altri modi in cui una favicon può migliorare le prestazioni del tuo sito web:
Aumentare il CTR
Google e altri motori di ricerca mostrano le favicon nei risultati di ricerca. Una favicon accattivante o facilmente riconoscibile può aumentare la brand awareness, aumentando le probabilità che le persone visitino il tuo sito web. In questo modo, potrai aumentare il tasso di clic (CTR), una metrica dell’ecommerce importante per la SEO.
Creare brand awareness
Quando una favicon rafforza il logo del tuo brand, agisce come una pubblicità gratuita nella barra dei preferiti dell'utente, nella scheda del tuo sito web e nella SERP, il che può aumentare la brand awareness.
Migliorare l'esperienza utente e il tempo di permanenza
Una favicon immediatamente riconoscibile può aumentare la possibilità che un utente aggiunga la tua pagina web ai preferiti, un comportamento che un motore di ricerca come Google riconosce come segnale positivo. Questo piccolo miglioramento nell'esperienza utente incoraggia le visite di ritorno, aumentando il traffico del tuo sito web e il tempo di permanenza (quanto tempo un utente trascorre su una pagina web prima di tornare alla SERP).
Linee guida per creare una favicon per il tuo sito web
- Scegli la dimensione giusta
- Scegli un formato file compatibile
- Prendi in considerazione una favicon animata
Una buona favicon prevede particolari requisiti in termini di dimensione e formato file:
Scegli la dimensione giusta
La dimensione ideale per una favicon è 16 pixel per 16 pixel, anche se alcune favicon sono progettate a 32 pixel per 32 pixel o 48 pixel per 48 pixel. La dimensione 16 per 16 è supportata in tutte le visualizzazioni del browser web: barra degli indirizzi, schede o visualizzazioni dei preferiti. Questo formato rappresenta la scelta più sicura per la tua favicon.
Scegli un formato file compatibile
Il formato file originale gioca un ruolo cruciale nel modo in cui un'immagine si traduce bene in una favicon. I formati file favicon più comuni per creare una favicon sono il formato PNG e ICO. I file PNG contengono compressione dati senza perdite e trasparenza, quindi la qualità dell'immagine non soffrirà quando vengono ridimensionati. I file ICO, utilizzati in Microsoft Windows Explorer, contengono una o più immagini a dimensioni multiple e profondità di colore, quindi possono essere ridimensionati bene. Il formato SVG non ha tanto supporto del browser, ma è veloce da caricare e infinitamente scalabile. Evita formati come JPEG che perdono alcuni dati dell'immagine quando vengono ridimensionati.
Prendi in considerazione una favicon animata
Le GIF animate o i file JavaScript aggiungono vivacità, ma hanno limitazioni, una delle quali è la compatibilità con il browser. Testa la tua favicon animata su più browser poiché quello che sembra fantastico su Google Chrome potrebbe non funzionare su un altro browser.
Generatori di favicon più popolari
Puoi utilizzare un generatore di favicon online per creare una favicon personalizzata che completi la tua brand identity. Ecco alcune opzioni popolari:
- Favicon.io permette di creare una favicon da un file immagine, link o testo e convertirla in diversi formati. Scarica i file convertiti, posizionali nella directory root del tuo sito web, copia i tag link e incollali nel tag head della tua pagina HTML.
- RealFaviconGenerator è un'API interattiva che permette di specificare come dovrebbe gestire l'immagine principale per generare la favicon.
- Favicon Generator può creare favicon su base piattaforma per piattaforma, così da vedere l’aspetto dei design su diverse piattaforme e browser.
- Favicon.ico & App Icon Generator di Dan's Tools permette di caricare un'immagine esistente e convertirla in formato ICO o sfogliare i design nella galleria delle icone.
Come aggiungere una favicon all'HTML
Una volta creata la favicon del tuo sito, dovrai caricarla sul tuo sito web e aggiungere il codice in modo che i browser e le app web possano visualizzarla.
Un puntatore alla favicon appare come una riga di codice nella sezione <head> del file HTML del sito web. I browser leggono le istruzioni nel tag head per trovare la favicon e visualizzarla. Supponiamo che il tuo file favicon sia un file PNG chiamato "brandXicon.png". Aggiungi questa riga all'interno del tag <head></head>:
<link rel="icon" type="image/png" rel="noopener" target="_blank" href="/brandXicon.png">
La favicon può apparire in qualsiasi directory del sito. Nell'esempio, è contenuta nella directory root del sito, una posizione comune. Verifica che il percorso del file sia corretto.
È anche possibile avere più di una dimensione di favicon e caricarle tutte. Avrai bisogno di una riga di codice per ogni dimensione, tutte all'interno del tag <head> </head>. Assegna a ogni dimensione un nome file univoco e aggiungi un attributo "sizes" al codice in questo modo:
<link rel="icon" type="image/png" sizes="16x16" rel="noopener" target="_blank" href="/brandXicon16x16.png">
<link rel="icon" type="image/png" sizes="32x32" rel="noopener" target="_blank" href="/brandXicon32x32.png">
Come aggiungere una favicon a un sito web Shopify
Se hai un sito web Shopify, puoi facilmente aggiungere una favicon, anche senza competenze in materia di programmazione:
1. In un browser web, apri il pannello di amministrazione del tuo negozio online.
2. Seleziona "Temi" > "Personalizza" per aprire l'editor del tema.
3. Clicca su "Impostazioni tema". Cerca l'icona dell'ingranaggio.
4. Seleziona Favicon (in alcuni temi, troverai "Logo").
5. Seleziona la tua immagine dalla Libreria del negozio o caricane una nuova.
6. Se disponibile, modifica l’alt text per l’accessibilità della favicon (il testo apparirà quando un utente passa il mouse sulla favicon).
7. Salva tutto e testa le prestazioni della favicon su diversi browser.
Per maggiori informazioni sull'aggiunta di favicon da un dispositivo iPhone o Android, consulta la guida Shopify sull'argomento.
Come aggiungere una favicon su WordPress
Se il tuo negozio online è un sito web WordPress, ecco una guida per aggiungere una favicon:
1. Apri la dashboard di WordPress e clicca su Aspetto.
2. Clicca su Personalizza per un elenco di opzioni.
3. Clicca su Identità del sito per aprire il titolo, il sottotitolo, il logo e così via.
4. Nella sezione Icona del sito, clicca su Seleziona icona del sito per caricare la nuova immagine favicon.
5. Clicca su Pubblica.
6. Testa l'aspetto della favicon in vari browser web.
Come aggiungere una favicon su Wix
I siti web Wix presentano una favicon predefinita, ma gli abbonati al piano Premium possono personalizzarla. Ecco come modificare la favicon su un sito Wix:
1. Apri Impostazioni nella dashboard del sito.
2. Accanto a Favicon, clicca su Gestisci.
3. Clicca su Carica immagine o su Carica elemento multimediale per caricare un'immagine dal tuo computer.
4. Clicca su Aggiungi alla pagina. Visualizza l'anteprima dell'aspetto della favicon nella scheda del tuo browser.
5. Clicca su Salva e poi su Pubblica.
Cos’è una favicon: domande frequenti
Cos’è una favicon e in cosa differisce da un logo?
Una favicon ("icona dei preferiti") è una piccola icona che appare accanto al nome della pagina o all'indirizzo del sito nei risultati di ricerca, nelle schede del browser e nelle barre dei preferiti per identificare le pagine agli utenti web. Al contrario, un logo rappresenta un brand in tutto il panorama del marketing. Le favicon della maggior parte dei brand condividono elementi di design con i loghi, e potrebbero anche essere uguali se il logo è abbastanza semplice.
Qual è un esempio di favicon?
Una favicon appare come icona URL di un sito web nelle barre degli indirizzi o come icona della scheda nel browser web. Aiuta gli utenti a identificare visivamente il sito web. Ad esempio, la favicon di Shopify utilizza la borsa della spesa con una "S" del logo.
Esistono strumenti per progettare favicon?
Sì, ci sono molti strumenti che possono aiutarti a creare una favicon per il tuo sito web. Alcuni di essi sono anche gratuiti. Esempi di generatori online includono Favicon.io e RealFavIconGenerator.
