Favicon, guida alle immagini di miniatura del sito
Ormai siamo abituati a vederle comparire nelle schede del browser e anche nelle SERP di Google, dove hanno un posto di rilievo nel classico snippet di anteprima, comparendo accanto al nome del sito posizionato: parliamo delle favicon, le piccole immagini rappresentative del sito che aiutano il brand a comunicare meglio con gli utenti e a diventare un po’ più visibile e memorabile. A patto, ovviamente, di non commettere errori e di eseguire correttamente tutti i passaggi per aggiungere una favicon al nostro sito, così come previsto anche dalle nuove linee guida di Google in materia.
Che cos’è una favicon
Il termine favicon deriva dalla contrazione delle parole inglesi favorite icon e quindi significa letteralmente icona preferita: è per l’appunto l’icona in miniatura associata a un sito o una specifica pagina web, e in genere si tratta di una piccola immagine o un logo che dovrebbe essere pertinente ai contenuti del sito web correlato, contribuendo a rafforzare la coerenza del marchio.
A volte, viene chiamata anche come icona di collegamento, icona di sito web, icona di scheda, icona di URL o icona di segnalibro (in inglese shortcut icon, website icon, tab icon, URL icon o bookmark icon), e può essere creata e aggiunta direttamente da web designer, gestori o proprietari di siti, o inpostata tramite un software specifico.
Molti programmi utente recenti (come browser e newsreaders) le usano e mostrano come promemoria visivo dell’identità del sito Web nella barra degli indirizzi o nelle schede.
Favicon, una storia lunga più di 20 anni
Le favicon sono state introdotte per la prima volta nel 1999 da Microsoft, che le integrò in Internet Explorer 5: all’epoca potevano essere caricate sui siti a partire da file di computer denominati favicon.ico, che andavano inseriti nella cartella root del sito. Quando un utente aggiungeva l’indirizzo ai preferiti di Internet Explorer, il browser aggiungeva e mostrava la favicon accanto all’URL.
In questo modo, inoltre, il sito poteva scoprire il numero di visitatori che avevano aggiunto la pagina ai segnalibri, stimato in base alla quantità di richieste della favicon. Oggi questo “effetto collaterale” non funziona più, poiché tutti i browser moderni caricano il file favicon da visualizzare nella barra degli indirizzi Web, indipendentemente dal fatto che il sito sia o meno aggiunto ai segnalibri.
Le evoluzioni di file e formato
Il formato standard delle favicon è stato regolamentato nello stesso anno da World Wide Web Consortium nelle specifiche HTML 4.01, e già nei mesi successivi aggiornate alle specifiche XHTML 1.0: per la definizione del formato bisogna inserire un “elemento di tipo link” con un “attributo Rel” nel tag HEAD del documento, del nome e del percorso del favicon, e il file può essere ospitato in una cartella di un sito web esterno e avere un formato file immagine (e non .ico obbligatoriamente); è quindi possibile memorizzare una favicon anche in formati file come GIF, PNG, JPEG, APNG e SVG di qualsiasi dimensione, e sfruttando le peculiarità e potenzialità del formato .gif è possibile creare delle favicon animate (che però sono supportate solo da alcuni browser).
Le caratteristiche delle favicon
Nelle dimensioni classiche, la favicon è dunque un’icona grafica in file ICO di misure quadrate (inizialmente 16×16, per poi aumentare dimensioni), con supporto a colori o trasparente a 16 o 24 bit, e dalla presenza solo nei preferiti di Internet Explorer l’iconcina si è fatta largo in questi 20 e più anni anche sugli altri browser, estendendo il suo utilizzo e la sua presenza di pari passo con le evoluzioni tecnologiche. Oggi le favicon compaiono in ogni tab di navigazione, generalmente nella parte sinistra, e sono spesso l’unico segnale visibile del sito quando si aprono più schede in contemporanea su una sola finestra.
L’utilità delle favicon
Le favorite icon sono dunque un biglietto da visita per un sito, e quindi bisognerebbe dedicare una cura particolare alla loro creazione, cercando di rispettare lo stile e l’aspetto visual del proprio brand e del sito a cui è associata, di cui diventa ambasciatrice. Di più: la favicon deve essere pertinente e chiara, avere cioè attinenza con i contenuti proposti o i servizi offerti e far capire subito all’utente qual è il messaggio che intende comunicare.
Come aggiungere le favicon al sito
In estrema sintesi, le favicon sono dei piccoli segnali grafici che possono aiutare a migliorare l’user experience delle persone, perché rendono la ricerca più rapida e visiva (nei preferiti, ma anche nelle SERP) e consentono di ritrovare l’URL che serve al momento opportuno tra tutti gli altri bookmark appuntati.
Il metodo più semplice e comune per aggiungere la favicon a un sito è usare l’apposito tag HTML “rel”, posto nella sezione head di un file HTML, per specificare la posizione del file all’interno del server web.
La sintassi basica è quindi: <link rel=”icon” href=”http://[percorso]/favicon.ico” />
che diventa <link rel=”icon” href=”http://[percorso]/favicon.gif” type=”image/gif” /> se scegliamo il formato .gif
e <link rel=”icon” href=”http://[percorso]/favicon.png” type=”image/png” /> se invece adottiamo il formato .png.
Più precisamente, facendo anche riferimento alle indicazioni di Google, il metodo corretto per identificare una favicon è aggiungere un tag all’intestazione della home page con la sintassi
<link rel=”icon” href=”/path/to/favicon.ico”>
Quando carichiamo per la prima volta una favicon o quando sostituiamo la precedente potrebbe essere necessario cancellare la cache per visualizzarla nel browser, perché a volte non è sufficiente ricaricare semplicemente la pagina.
Favicon e Google: le linee guida per aggiungere l’immagine correttamente
L’ultimo approdo delle favicon è tra i risultati di ricerca di Google sia da mobile che da desktop (con annuncio definitivo arrivato l’8 marzo 2023, come si vede nel tweet qui sotto).
Favicons and site names are coming to desktop! You can learn more about how to provide site names and define favicons in search results here:https://t.co/AGkfEeIbIs https://t.co/E7PxSacIIx https://t.co/WBHGf12Xkw
— Google Search Central (@googlesearchc) March 8, 2023
Oggi, le iconcine hanno anche conquistato più spazio in SERP rispetto a quello originariamente previsto – e ora sono racchiuse all’interno di un cerchio grigio, che dà maggior risalto ai colori del logo.
Nelle scorse settimane, il team di Mountain View ha provveduto anche ad aggiornare le linee guida e i consigli per l’ottimizzazione dell’icona, specificando la sintassi corretta da utilizzare per rendere idonea una favicon di un sito alle SERP e chiarendo alcuni aspetti dubbi.
Le regole da seguire per assicurarci che la favicon del nostro sito possa apparire effettivamente in SERP sono semplicemente sei, tra indicazioni tecniche e altri suggerimenti più teorici, ma ad ogni modo “non è garantito che la favicon venga mostrata nei risultati di ricerca” anche se rispettiamo tutti i parametri, spiega Google.
- La Ricerca Google supporta una sola favicon per sito, dove il sito è definito dal nome host. Se quindi abbiamo due host differenti (come ad esempio https://www.example.com/ e https://code.example.com/) possiamo impostare due favicon differenti, mentre una sottodirectory di un sito (come https://www.example.com/sub-site) può usare solo la favicon impostata per https://www.example.com/, che verrà applicata al sito e alle relative sottodirectory, come chiarisce l’immagine esplicativa qui sotto.
- Il file della favicon e la home page devono essere sottoposti a scansione da parte di Google, ovvero il lavoro di Googlebot non deve essere bloccato.
- L’URL della favicon deve essere stabile (quindi non dobbiamo modificare l’URL di frequente).
- La favicon deve essere di dimensioni multiple di 48 px quadrati; sono supportati tutti i formati favicon validi e i file SVG non hanno una dimensione specifica.
- La favicon è pensata come rappresentazione visiva del brand del sito web e consente agli utenti di identificarlo rapidamente quando scorrono i risultati di ricerca.
- Google specifica chiaramente che non mostrerà e bannerà le icone che ritiene inappropriate, come quelle con immagini di pornografia o simboli che incitano all’odio (campo in cui rientrano ad esempio le svastiche): se il sistema identifica una favicon con “un’immagine di questo tipo, Google la sostituirà con un’icona predefinita”.
Dal punto di vista tecnico, Google estrae le informazioni sulla favicon basandosi sui seguenti attributi dell’elemento link:
- rel va impostato su una delle possibili stringhe disponibili, ovvero icon / apple-touch-icon / apple-touch-icon-precomposed / shortcut icon.
- href va impostato indicando come URL della favicon un percorso relativo ( /smile.ico) o assoluto ( https://example.com/smile.ico).
Inoltre, rispetto a quanto indicato (e richiesto) in precedenza, nella formulazione ultima risalente a ottobre 2023 Google rimosso il requisito della posizione di hosting dalla documentazione della favicon. In altre parole, non è più obbligatorio ospitare la favicon nello stesso dominio della homepage del sito per rendere l’immagine idonea a comparire nei risultati di ricerca di Google.
Come funziona la scansione delle favicon
Sempre fino a ottobre 2023 sapevamo che Google aveva sviluppato e attivato un apposito user agent per scaricare le favicon definite dai siti web, che si chiama semplicemente Google Favicon: si tratta di un crawler a basso volume che, di tanto in tanto, “può visitare la home page del sito in base agli indicatori raccolti durante l’indicizzazione o attivati dalla richiesta di un utente”, segnalava la documentazione.
Altra specificazione: per fare in modo che lo user agent Google Favicon eseguisse la scansione della pagina, potevamo richiedere l’indicizzazione della home page del sito, consapevoli che per la visualizzazione degli aggiornamenti nei risultati di ricerca possono essere necessari alcuni giorni o un periodo più lungo. Se era l’utente a richiedere la scansione, Google Favicon ignorava le regole del file robots.txt.
Nell’ultimo aggiornamento, però, questo riferimento è stato completamente rimosso e Google ha chiarito che per l’indicizzazione della favicon è necessario consentire la scansione del file della favicon e della home page del sito ai due rispettivi user agent Googlebot-Image e Googlebot. Il motore di ricerca non utilizza più, quindi, l’user agent Google Favicon HTTP, ma ciò non comporta e non ha comportato alcuna modifica per i proprietari dei siti: Google Favicon dipendeva infatti dai token dello user agent Googlebot-Image e Googlebot, che rimangono supportati regolarmente.
Le favicon nella Ricerca: problematiche e penalizzazione delle icone
A proposito delle limitazioni nella visualizzazione delle favicon possiamo far riferimento a quanto riportato da Barry Schwartz su Search Engine Land, nel 2019, anno in cui Google ha definitivamente aggiunto le iconcine agli snippet delle SERP. Il noto esperto ha infatti raccontato due casi molto particolari di sanzioni applicate da Google per motivi completamente differenti: il primo riguarda il partito nazista americano, che aveva come favicon predefinita una svastica, che Google ha sostituito con un’immagine generica (un mappamondo grigiastro) dopo le opportune verifiche.
Più particolare la situazione in cui si è trovato Bill Hartzer, una delle voci più famose della comunità SEO internazionale: la favicon del suo sito era semplicemente una resa grafica delle lettere Ad, che richiamavano da (molto) vicino la grafica di Google Ads in SERP. Anche in questo caso, Google ha verificato la situazione e rimosso l’icona ritenuta non rispondente alle sue linee guida.
Entrambe le penalizzazioni, comunque, non hanno avuto effetti in termini di ranking o di posizionamento del sito in Google Search, e quindi l’azione manuale riguarda soltanto la rimozione della favicon personalizzata dai risultati di ricerca.
Per la cronaca, oggi Bill Hartzer ha impostato un’altra favicon, ispirata alle sue iniziali, mentre il sito dell’American Nazy Party continua ad apparire in SERP con la favicon neutra perché, come possiamo vedere analizzando il codice sorgente della sua home page, tiene ancora l’immagine della svastica come iconcina…
