Favicon: come aggiungere il tuo logo ai risultati di ricerca e perché

**Articolo aggiornato il 07/04/2021**

Google può mostrare il logo di un sito web direttamente nei risultati di ricerca di Google. Questo logo si chiama favicon. Vuoi far visualizzare la tua favicon nei risultati di ricerca per dare più visibilità al tuo marchio? Oggi ti mostreremo come procedere!

due mani con in mezzo un cuore

In questo articolo scoprirai:

  • cosa è una favicon

  • perché dovresti mostrare una favicon

  • che aspetto hanno le favicon in Google e come mostrarle nei risultati di ricerca

  • quali sono i requisiti da soddisfare per poter mostrare le favicon

  • come cambiare il colore della barra del browser

Con l'aiuto di questo articolo potrai utilizzare le favicon per distinguerti dalla concorrenza ed essere ricordato dai tuoi potenziali clienti.

1. Cos'è una favicon?

Una favicon, conosciuta anche come logo della finestra o dell'URL,  è una icona di 16×16 pixel che identifica il marchio di un sito online.

Il suo scopo principale è quello di aiutare i visitatori a localizzare più facilmente una pagina quando hanno più schede aperte.

Ecco un esempio di una favicon:

favicon-ts-it-esempio

2. Che aspetto ha una favicon su Google?

Nel 2019 Google ha aggiunto le favicon ai risultati della ricerca mobile. Quando si tratta del design del motore di ricerca, questo cambiamento potrebbe essere considerato una svolta.

La decisione si è basata sul fatto che:

  • con il nuovo design, il marchio dei siti web sarebbe diventato più visibile.

  • il layout delle pagine dei risultati aiuterebbe gli utenti a comprendere meglio le informazioni visualizzate.

  • gli utenti avrebbero potuto scegliere più facilmente i siti di cui si fidano.

Il nuovo design dei risultati della ricerca sui dispositivi mobili è stato un successo. Per questo motivo, Google ha iniziato a testare le favicon nelle SERP desktop.

risultati su google con favicon

Le favicon possono davvero aiutare il tuo marchio a distinguersi dalla concorrenza. Tuttavia, non desideri che la tua pagina venga visualizzata con un'icona predefinita, giusto?

Nella sezione seguente ti mostreremo come creare la tua favicon.

º  º  º

Non è facile, ma riuscire a posizionarsi fra i primi posti nei motori di ricerca può portare ad un incremento di traffico significativo.
Abbiamo creato una check-list per aiutarti ad arrivare in cima ai risultati di ricerca!

Migliorare il ranking con la SEO  Scarica la check-list gratuita

º  º  º

3. Come si crea una favicon?

I proprietari di e-Commerce o di siti web di solito usano il loro logo aziendale come favicon. Puoi farlo anche tu, ma la domanda è: come?

Lo strumento Favicon.io è molto utile a questo scopo.

laptop aperto

Esempio di anteprima con il logo Trusted Shops.

Basterà trascinarvi il file con il tuo logo e Favicon.io le genererà automaticamente.

Una volta scaricato il file, nell'archivio ZIP troverai delle favicon già pronte in diverse dimensioni e formati:

cartella con favicon trusted shops

È inoltre possibile creare la propria favicon con lettere e sfondo colorato. Ecco un esempio con le mie iniziali (SB):

favicon iniziali

Come puoi vedere, lo strumento Favicon.io è molto utile e non si limita a semplici file di immagini.

4. Quali sono i requisiti tecnici per mostrare le favicon?

Google ha definito i requisiti tecnici per le favicon. A questo proposito, dovete sapere una cosa:

Se non soddisfi i requisiti di Google, la tua favicon non verrà mostrata nelle SERP.

È da accennare il fatto che, dato che Google è imprevedibile, la tua favicon potrebbe non essere mostrata anche se soddisfi tutti i requisiti, anche se è abbastanza improbabile. Detto ciò, arriviamo al prossimo capitolo.

Ecco i requisiti che Google ha stabilito per le favicon:

  • La homepage e il file della favicon devono essere indicizzabili

Ciò significa che non possono avere il parametro no-index impostato nel file robots.txt (o in qualsiasi altra parte). Se non hai mai modificato il file robots.txt, allora tutto dovrebbe funzionare correttamente.

Lettura consigliata: Crawl budget, cosa è e come aumentarlo per migliorare il tuo ranking

  • Le favicon devono rappresentare il tuo sito

Google richiede che le tue favicons siano uniche e che abbiano a che fare con il tuo sito online. Lo scopo della visualizzazione delle favicon nei risultati di ricerca è quello di facilitare la ricerca degli utenti.

  • Il file della favicon deve avere una dimensione ed un formato specifico

Sebbene Google ridimensioni automaticamente le favicons che trova su una pagina a 16x16 pixel, ai proprietari di siti web è richiesto un formato di file più grande.

Le favicon devono essere di 48x48 pixel, 96x96 pixel o 144x144 pixel.

Fondamentalmente, è possibile utilizzare la favicon 512x512 pixel come quella principale definita nel file HTML.

  • Disponibilità sotto un URL specifico

La tua favicon deve essere trovata con un URL specifico e non può essere un indirizzo dinamico. Se modifichi l'URL, Google potrebbe non poter mostrare la tua favicon per un certo periodo di tempo.

5. Come si aggiunge una favicon ad un sito online?

Puoi aggiungere una favicon al tuo sito online utilizzando un tag nel codice HTML.

Per un'icona in formato .ico:

<link rel="icona" type="image/x-icon" href="favicon.ico" />

Per un'icona in formato .png:

<link rel="icona" type="image/png" href="favicon.png" />

Il tag deve essere inserito nella sezione <head>.

6. Bonus: imposta il colore del tuo marchio nel tuo browser

I browser mobili permettono ai siti web di cambiare il colore della barra superiore. Grazie a questo, la tua azienda può aumentare la notorietà del marchio ed essere riconosciuta dai potenziali clienti.

smartphone su un tavolo con caramelle

Per ottenere questo effetto, è possibile inserire il seguente tag nel codice della pagina:

<meta name="theme-color" content="#f73e3e" />

#f73e3e è il codice del colore, quindi questo cambierà a seconda di quale colore vuoi usare per la barra del browser. Deve essere fornito in formato HEX. Potete scaricare un colore in questo formato dalla pagina dei codici colore HTML.

Inserisci il codice qui sopra nella sezione <header> della tua pagina, come nell'esempio:

codice html per browser colorato

Conclusione

Ti abbiamo mostrato come aggiungere il tuo logo, vale a dire una favicon, ai risultati di ricerca su Google. Una favicon ti aiuterà a farti riconoscere ancora più rapidamente e ad aumentare la notorietà del tuo marchio!

Dai un'occhiata alla nostra guida gratuita:

pagine prodotti ottimizzate seo

0 commenti