Cos’è una favicon? Definizione ed esempi

L’importanza delle favicon per i siti web va ben oltre il semplice design. Tra le altre cose, le piccole icone servono anche per l’orientamento e hanno effetti positivi sulla SEO.

Cos’è una favicon: definizione

Un piccolo simbolo con un grande effetto: una favicon è una piccola icona che viene visualizzata, ad esempio, sul lato sinistro della scheda del browser e consente di avere una visione d’insieme anche se si hanno numerosi siti web aperti. Di solito mostra un logo semplificato o un’immagine: tramite essa si può facilmente identificare il sito web corrispondente. La favicon ha quindi un significato particolare: serve come orientamento e rafforza la presenza di un sito web.

Quale sia esattamente la favicon più adatta o cosa si può utilizzare per crearne una dipende dall’aspetto del vostro marchio. Poiché il simbolo stesso ha una dimensione di pochi pixel, spesso i loghi sofisticati e dettagliati non possono essere visualizzati in modo soddisfacente. In questo caso, si consiglia una variante semplificata del simbolo identificativo vero e proprio.

La grande importanza della favicon si può già intuire dal nome: si tratta di una parola composta, creata dall’unione dei termini “favorite” e “icon”, che significa “icona dei preferiti”. Le piccole immagini non appaiono solo nelle schede del browser, ma anche nei segnalibri, dove vengono salvati i siti web preferiti. Inoltre, ora le favicon si trovano anche come icone delle app, nei menu di ricerca o nella cronologia del browser.

Consiglio

La favicon perfetta in pochi clic: con il Favicon Generator di IONOS potete creare gratuitamente l’icona perfetta per il vostro sito web, ovviamente compatibile con tutti i browser.

Che importanza hanno le favicon?

La grande importanza della favicon giusta per il vostro sito web si spiega con diversi motivi:

  • Professionalità: la favicon è parte integrante di un sito web professionale. Rafforza la fiducia dei visitatori nel vostro marchio e dimostra che per voi sono importanti anche i piccoli dettagli. Anche se la maggior parte delle persone non è in grado di dire che cos’è esattamente una favicon, ne noterebbero immediatamente l’assenza.
  • Identificazione: la favicon è particolarmente importante anche per motivi pratici. Gli utenti troveranno il vostro sito web molto più rapidamente grazie alla piccola icona, anche se sono aperte numerose schede contemporaneamente. L’icona rende inoltre il vostro marchio inconfondibile nei motori di ricerca o nell’elenco delle app.
  • Rafforzamento del vostro marchio: un buon logo garantisce che il vostro marchio venga riconosciuto e può svolgere un ruolo nel processo decisionale d’acquisto. Per quanto fondamentale sia il design del logo per la vostra startup o il vostro marchio, anche la giusta favicon è significativa.

Come influiscono le favicon sulla SEO?

Almeno indirettamente, la favicon ha anche un significato per l’ottimizzazione per i motori di ricerca. Sebbene non influisca direttamente sul ranking, una buona favicon ha comunque un effetto positivo sulla SEO. I motivi sono i seguenti:

  • Funzione segnalibro: in particolare su Chrome, la favicon funge da segnalibro. I siti web che sfruttano questa funzione vengono individuati molto meglio e possono posizionarsi in modo prominente. In molti casi, questo aumenta significativamente il traffico.
  • Facilità d’uso: l’usabilità di un sito web ha un impatto diretto sul suo successo. Gli utenti premiano le pagine che seguono un concetto rigoroso, sono visivamente accattivanti e sulle quali è possibile navigare in modo intuitivo. Le favicon contribuiscono a questo obiettivo. I visitatori rimangono più a lungo e più spesso su siti web ben progettati, e questo viene a sua volta premiato dai motori di ricerca nel ranking.
  • Visibilità: una maggiore visibilità grazie a un’icona appropriata è anche ricompensata con un miglior posizionamento nel lungo periodo. Gli utenti sono più propensi ad aprire un sito web con un’icona accattivante, soprattutto perché questa viene visualizzata anche nei risultati della ricerca.

A cosa prestare attenzione nella creazione di una favicon?

Non è possibile delineare le caratteristiche di una buona favicon in generale. Questo perché l’approccio adatto dipende in larga misura dal marchio e dal suo design. Molte aziende utilizzano anche il proprio logo come favicon, ma questo funziona solo se rimane accattivante anche in miniatura e a bassa risoluzione. Tuttavia, alcune regole di base per creare una mini-grafica adeguata sono le seguenti:

  • Corporate identity: gli esempi di favicon di successo sono sempre in linea con la corporate identity di un’azienda. Anche se non è possibile utilizzare il proprio logo come simbolo, il motivo scelto dovrebbe comunque abbinarsi al resto del design. Questo è l’unico modo per preservare l’unicità del marchio.
  • “Less is more”: le favicon sono molto piccole, per cui le decorazioni e i dettagli elaborati non vengono mostrati al meglio quando l’icona viene effettivamente utilizzata, soprattutto su uno smartphone. Il risultato appare disordinato e non più accattivante. Un’opzione è quindi sempre quella di utilizzare le iniziali di un marchio. Poiché solo raramente è possibile riportare l’intero titolo nella favicon, conviene piuttosto utilizzare la lettera iniziale o un’icona semplice ma significativa.
  • I colori giusti: i colori utilizzati devono ovviamente corrispondere alla vostra corporate identity. Se non li avete ancora scelti, tenete a mente che i colori contrastanti sono una buona idea, in quanto catturano più rapidamente l’attenzione. Tuttavia, tenete sempre presente che i diversi browser visualizzano le favicon in modo leggermente diverso. Ad esempio, le immagini piccole possono avere uno sfondo bianco o grigio, il che può cambiare un po’ l’effetto.

Che dimensioni hanno le favicon?

Se desiderate integrare una favicon, dovete rispettare le dimensioni delle favicon appropriate. Sebbene di norma si tratti di 16 x 16, 32 x 32 o 48 x 48 pixel, alcuni browser purtroppo si discostano da questi valori. Di seguito un elenco delle eccezioni:

Browser o dispositivo Dimensioni
Chrome Webstore 128 x 128 Pixel
Google TV 96 x 96 Pixel
Internet Explorer 9 24 x 24 Pixel
iPad (schermata iniziale) 72 x 72 Pixel
iPhone (modelli meno recenti) e iPad Touch 57 x 57 Pixel
iPhone 4 (schermata iniziale) 114 x 114 Pixel
Opera (selezione rapida) 195 x 195 Pixel
Consiglio

In un altro articolo vi spieghiamo come integrare una favicon con HTML.

Quali sono i formati supportati?

In linea di principio, le favicon possono essere create in diversi formati. Tuttavia, il più comune è .ico, un contenitore di dati immagine che consente diverse profondità di bit e risoluzioni. Questo formato è supportato dalla maggior parte dei browser. È possibile utilizzare anche .png, .gif o .svg. Questi tre formati, però, non sono compatibili con tutti i browser. Anche il formato .jpg è utilizzabile, ma la bassa risoluzione non lo rende ideale.

Esempi di favicon

Per darvi un’idea di quanto possano essere versatili le piccole immagini, vi mostriamo tre esempi di favicon di successo.

Google utilizza solo la propria lettera iniziale e per il resto si affida ai colori. Il disegno dell’arcobaleno è ciò che contraddistingue il motore di ricerca dalla maggior parte delle altre favicon.

LinkedIn adotta un approccio diverso e dimostra che la favicon non deve essere necessariamente sempre la prima lettera del nome. La “in” bianca su sfondo blu si distingue da molte altre icone.

YouTube mostra come una buona favicon possa funzionare anche senza lettere. Il pulsante play, che è anche parte del logo dell’azienda, è inconfondibile e si distingue in ogni browser.

Nella Digital Guide troverete numerosi altri articoli che vi serviranno per la vostra presenza online. Oltre a delle linee guida per la creazione di un sito web, c’è anche una guida utile per inserire le favicon su WordPress.

Per offrirti una migliore esperienza di navigazione online questo sito web usa dei cookie, propri e di terze parti. Continuando a navigare sul sito acconsenti all’utilizzo dei cookie. Scopri di più sull’uso dei cookie e sulla possibilità di modificarne le impostazioni o negare il consenso.