Che cos'è una favicon e perché è importante per il tuo sito web?

Una favicon (abbreviazione di «favorite icon», cioè «icona preferita») è la piccola immagine quadrata che rappresenta un sito web nelle schede del browser, nei segnalibri, nella cronologia, nei risultati di ricerca di Google, nelle schermate Home degli smartphone e nelle web app installate. È importante perché dà al tuo sito un volto riconoscibile a colpo d'occhio, lo rende più facile da trovare tra molte schede aperte, trasmette un'impressione di professionalità e affidabilità e oggi viene mostrata accanto al nome del tuo sito nei risultati di Google. Senza una favicon, i visitatori vedono un generico globo o l'icona di una pagina vuota, e il tuo server riempie i log di errori 404. Puoi creare gratuitamente un set completo di favicon con il generatore di favicon MakeFav.

Che cos'è una favicon?

Una favicon è una piccola grafica di marca, in genere una versione semplificata di un logo oppure una singola lettera o un simbolo, che i browser e altri software recuperano dal tuo sito web e mostrano ovunque serva un identificativo visivo compatto. In un browser desktop viene di solito disegnata a 16 per 16 pixel CSS, anche se il file stesso dovrebbe essere più grande per restare nitido sugli schermi ad alta densità.

Dal punto di vista tecnico, una favicon è semplicemente un file immagine richiamato dall'HTML (o trovato in una posizione predefinita) che gli user agent scaricano separatamente dal contenuto della pagina. Oggi una «favicon» è raramente un singolo file. Un sito moderno di solito include diverse versioni della stessa icona, in modo che browser, motori di ricerca, iOS e Android ricevano ciascuno un formato e una dimensione adatti.

Breve storia della favicon

La favicon risale al marzo 1999, quando Microsoft rilasciò Internet Explorer 5. Il browser permetteva di salvare le pagine in un elenco di «Preferiti» e cercava anche un piccolo file icona chiamato favicon.ico nella radice del sito da mostrare accanto a ciascuna voce salvata. L'idea era semplice: se un sito forniva /favicon.ico, l'icona compariva accanto al segnalibro.

Gli altri browser adottarono presto la funzione e la navigazione a schede la rese molto più utile. Quando le schede sono diventate il modo principale di navigare, la favicon è passata da semplice decorazione dei segnalibri a strumento fondamentale di orientamento. Nel corso degli anni l'approccio si è evoluto:

• Primi anni 2000: l'elemento <link rel="icon"> permise ai siti di indicare un'icona a qualsiasi URL anziché solo nella radice, e i file PNG e GIF iniziarono a essere accettati dai browser diversi da IE.
• Anni 2010: Apple introdusse l'apple-touch-icon per le schermate Home di iOS, mentre Android e Windows aggiunsero proprie convenzioni, come le icone del manifest e le immagini dei riquadri.
• Oggi: favicon SVG, web app manifest, icone sensibili alla modalità scura e requisiti di Google per le favicon nei risultati di ricerca hanno reso la favicon una parte piccola ma concreta della configurazione tecnica di un sito.

Dove compaiono oggi le favicon

La tua favicon viene mostrata in molti più posti della semplice scheda del browser. I principali sono:

• Schede del browser: il punto più visibile, dove l'icona è spesso l'unica cosa che si vede quando ci sono molte schede aperte.
• Segnalibri e preferiti: l'icona si trova accanto al titolo della pagina nelle barre e nei menu dei segnalibri.
• Cronologia e pagine più visitate: i browser mostrano le favicon negli elenchi della cronologia e nelle pagine della nuova scheda.
• Risultati di ricerca di Google: sia su mobile sia su desktop, Google mostra la favicon del sito accanto al nome e all'URL del sito.
• Schermate Home: quando un visitatore aggiunge il tuo sito alla schermata Home su iOS o Android, la touch icon o l'icona del manifest diventa il collegamento in stile app.
• PWA installate: una progressive web app usa le icone del proprio web app manifest per l'icona nel launcher, la schermata iniziale e il selettore delle app.
• Riquadri di Windows e siti aggiunti alla barra: le versioni più vecchie di Windows ed Edge usavano immagini per i riquadri definite per i siti aggiunti; quelle moderne riutilizzano per lo più le tue icone standard.
• Anteprime dei link in alcune app: alcuni strumenti di chat e produttività (Slack è un esempio noto) mostrano la favicon del sito accanto a un link espanso. La maggior parte delle anteprime si basa soprattutto sulle immagini Open Graph, ma spesso è la favicon a fornire il piccolo marchio.

Perché la favicon è importante per il tuo sito web

Riconoscibilità del brand

Le persone riconoscono colori e forme più in fretta di quanto leggano il testo. Un'icona coerente, ripetuta in schede, segnalibri e risultati di ricerca, crea familiarità ogni volta che viene vista: è esposizione gratuita del brand a ogni visita.

Fiducia e credibilità

L'assenza di una favicon fa sembrare un sito incompleto. Un'icona pulita e visualizzata correttamente è un piccolo segnale che qualcuno cura i dettagli, il che rafforza la percezione che il sito sia legittimo. Non è una funzione di sicurezza e i siti di phishing possono copiare le icone, ma un'icona predefinita vuota difficilmente aiuta un'attività a sembrare affermata.

Percentuale di clic nei risultati di ricerca

Poiché Google mostra la favicon accanto al tuo risultato, questa diventa parte dell'aspetto della tua scheda rispetto ai concorrenti. Google non dichiara alcun effetto delle favicon sul posizionamento e non dovresti aspettarti un aumento nelle classifiche. Il vantaggio riguarda il riconoscimento visivo: gli utenti che conoscono la tua icona hanno più probabilità di notare e scegliere il tuo risultato, soprattutto su mobile, dove i risultati sono compatti.

Usabilità con molte schede aperte

Quando un browser ha venti schede aperte, i titoli vengono troncati fino a sparire e della scheda resta solo la favicon. Un'icona distintiva permette di trovare subito la tua scheda e di tornarci, invece di aprirne un duplicato o dimenticarsene.

Impressione di professionalità

Una favicon ben progettata dimostra la stessa attenzione ai dettagli del resto del sito. Che si tratti di pagine prodotto, documentazione, blog o web app, è uno degli elementi di rifinitura più economici che tu possa aggiungere.

Accessibilità nel ritrovare le schede

Le icone aiutano gli utenti che scorrono visivamente invece di leggere, comprese le persone con dislessia o differenze cognitive, e chiunque passi rapidamente da un'attività all'altra. Un'icona ad alto contrasto con una forma semplice è più facile da individuare. Ricorda però che la favicon è un complemento: non sostituisce un titolo di pagina chiaro, su cui si basano screen reader e tecnologie assistive.

Cosa succede se non hai una favicon

I browser richiedono automaticamente /favicon.ico dalla radice del tuo dominio, anche se il tuo HTML non ne fa menzione. Se il file non esiste, succedono diverse cose:

• Icona generica: i visitatori vedono un globo, un documento o un'icona vuota predefinita nella scheda e nei segnalibri, il che dà un aspetto anonimo.
• Errori 404 nei log: ogni browser che richiede il file genera una richiesta fallita. Sui siti molto trafficati questo aggiunge rumore ai log di accesso, al monitoraggio degli errori e alle analytics e può nascondere problemi reali.
• Nessuna icona nei risultati di Google: senza una favicon valida e scansionabile, Google mostra il proprio segnaposto predefinito accanto al tuo risultato.
• Richieste sprecate: i browser possono riprovare, aggiungendo al tuo server un carico minimo ma inutile.

Anche un'icona molto semplice è meglio di niente, perché elimina i 404 e offre agli utenti qualcosa di riconoscibile.

I formati delle favicon spiegati

Nessun formato singolo copre tutte le piattaforme, quindi la maggior parte dei siti usa un piccolo insieme di file.

Le immagini dei riquadri di Windows (configurate tramite browserconfig.xml) servivano per Internet Explorer 11 e il vecchio Edge. Oggi sono raramente necessarie, a meno che tu non debba supportare quegli ambienti.

Le linee guida di Google sulle favicon per i risultati di ricerca

Se vuoi che la tua icona compaia nella Ricerca Google, segui i requisiti pubblicati da Google:

• Dimensione: l'immagine deve essere quadrata (1:1) e multipla di 48 pixel, ad esempio 48x48, 96x96 o 144x144. Google poi la riduce a 16x16 per la visualizzazione. La dimensione minima supportata è 8x8, ma si consiglia 48x48 o più.
• Formati: funziona qualsiasi formato supportato dai browser, inclusi ICO, PNG e SVG.
• URL stabile: non cambiare spesso l'URL della favicon. Un indirizzo stabile aiuta Google a mantenere aggiornata la tua icona.
• Scansionabile: sia il file della favicon sia la tua home page devono essere accessibili a Googlebot. Non bloccarli in robots.txt né dietro un login.
• Una dichiarazione per sito: l'icona è associata alla home page del sito, quindi inserisci il tag <link> nell'head della tua home page.
• Rappresentativa e appropriata: l'icona deve riflettere il tuo brand e Google può sostituire con quella predefinita un'icona offensiva o fuorviante.

Dopo aver pubblicato o modificato una favicon, Google può impiegare da giorni a settimane per eseguire nuovamente la scansione e aggiornarla, quindi non aspettarti un cambiamento immediato.

Come creare rapidamente una favicon con MakeFav

Non servono software di grafica né la riga di comando. Il generatore MakeFav trasforma un'unica immagine di partenza nei file descritti sopra.

1. Prepara la tua grafica. Usa un logo o un simbolo quadrato da 512 x 512 px o più grande. Le forme semplici funzionano meglio perché l'icona verrà vista a 16 px.
2. Caricala nella home page di MakeFav oppure apri l'editor per regolare immagine, sfondo e margini prima dell'esportazione.
3. Controlla l'anteprima del risultato a dimensioni ridotte e su sfondi chiari e scuri per essere certo che resti leggibile.
4. Scarica il pacchetto. Contiene l'ICO, i PNG nelle varie dimensioni, l'Apple touch icon, le icone del manifest e lo snippet HTML da incollare.
5. Carica i file nella radice del tuo sito web, in modo che siano raggiungibili a percorsi come /favicon.ico.
6. Aggiungi l'HTML nel <head> di ogni pagina, oppure nel layout o template condiviso.
7. Verifica con il verificatore di favicon, poi svuota la cache del browser e ricarica la pagina per vedere la nuova icona.

Esempio di snippet HTML

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

L'attributo sizes="48x48" sul link ICO aiuta i browser a preferire l'SVG quando lo supportano, mantenendo l'ICO come alternativa. Il PNG da 96 px soddisfa la regola di Google del multiplo di 48.

Esempio di web app manifest

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Se lavori con pipeline di build o vuoi automatizzare la creazione delle icone, consulta le risorse per sviluppatori.

Consigli di design per una favicon efficace

• Mantienila semplice. Una forma, una lettera o un monogramma deciso funzionano meglio di un logo dettagliato che a 16 px si trasforma in una macchia.
• Usa un forte contrasto. Assicurati che l'icona sia visibile sia con i temi chiari sia con quelli scuri del browser. Un riquadro di sfondo colorato aiuta.
• Evita il testo. Una sola iniziale va bene; le parole sono illeggibili a queste dimensioni.
• Lascia un po' di margine per le icone maskable e con angoli arrotondati, in modo che nulla di importante venga tagliato.
• Resta coerente con il tuo logo e i colori del brand, così la favicon rafforza il riconoscimento.
• Prova su dispositivi reali e controlla come appare in una scheda, in un segnalibro e in un risultato di Google.

Problemi comuni delle favicon

Se la tua icona non compare, le cause abituali sono la cache, i percorsi errati e i file bloccati. I browser mettono in cache le favicon in modo aggressivo, quindi spesso basta un aggiornamento forzato o una nuova finestra privata per vedere le modifiche. Controlla che l'URL del file restituisca uno stato 200 e il tipo di contenuto corretto e che il tag <link> si trovi nel <head>. Per la ricerca, assicurati che robots.txt non blocchi l'icona né la home page. Il verificatore MakeFav può aiutarti a individuare rapidamente questi problemi.

Domande frequenti

Che cosa significa favicon?

Favicon è l'abbreviazione di «favorite icon», cioè «icona preferita». Il nome deriva da Internet Explorer 5, che nel 1999 usò per la prima volta un piccolo file icona per decorare le voci dell'elenco Preferiti del browser. Il termine è rimasto, anche se oggi l'icona compare in molti altri luoghi.

La favicon aiuta la SEO?

La favicon non è un fattore di posizionamento diretto. Tuttavia compare accanto al nome del tuo sito nei risultati di Google su mobile e desktop, quindi può migliorare la riconoscibilità del brand e l'aspetto visivo del tuo risultato, il che può favorire indirettamente i clic. Seguire le linee guida di Google è ciò che rende l'icona idonea a essere mostrata.

Quali dimensioni deve avere una favicon?

Per la Ricerca Google, usa un'immagine quadrata con lato multiplo di 48 pixel, come 48x48 o 96x96. Per una copertura più ampia, fornisci anche un file ICO, una Apple touch icon da 180x180 e icone del manifest da 192x192 e 512x512. Un SVG è un'ottima aggiunta per la scalabilità.

Mi serve ancora favicon.ico se uso PNG o SVG?

È comunque una buona idea. I browser e alcuni strumenti richiedono /favicon.ico per impostazione predefinita e il software più datato dipende da esso. Tenere un file ICO nella radice del sito evita errori 404 e offre un'alternativa sicura quando SVG o PNG non sono supportati.

Perché la mia favicon non si aggiorna?

Browser e motori di ricerca mantengono le favicon in cache a lungo. Prova un aggiornamento forzato, una finestra privata o lo svuotamento della cache. Assicurati che il percorso del file sia corretto e che il nuovo file venga servito. Nella Ricerca Google, un'icona modificata può richiedere giorni o settimane per essere sottoposta a nuova scansione e aggiornata.