Favicon - Docs di MetricSpot

Q: Perché la mia favicon non appare nei risultati di Google?

Tre cause comuni: 1. L'URL restituisce 404 o 403 — controlla con curl -I https://tuosito.com/favicon.ico. 2. L'icona è troppo piccola (sotto 8×8) — genera un ICO multi-risoluzione a 16, 32 e 48. 3. Google non ha ri-scansionato il sito da quando l'hai aggiunta — aspetta fino a una settimana o richiedi l'indicizzazione in Search Console.

Q: E il trucco favicon dark/light?

I browser moderni supportano le icone SVG con media query: `html ` Oppure incorpora entrambe in un SVG con un tag usando prefers-color-scheme. Entrambi funzionano; il secondo è una richiesta HTTP in meno.

Cosa verifica questo controllo

Cerca in <head> un <link rel="icon"> o <link rel="shortcut icon"> (o, come fallback, un /favicon.ico alla radice del dominio) e verifica che il file referenziato si carichi.

Perché è importante

Tre posti usano la tua favicon, tutti rivolti all’utente:

Barre dei tab del browser e segnalibri — identificazione visiva istantanea quando un utente ha 30 tab aperti.
Risultati di ricerca Google — Google mostra le favicon vicino al nome del sito nelle SERP mobile e sempre più anche su desktop. I siti senza visualizzano un’icona globo generica, che sembra incompiuta accanto ai concorrenti.
Cronologia browser, download, app switcher dell’OS — ovunque il sistema operativo o il browser metta in cache l’identità del tuo sito.

Mancare la favicon è l’equivalente visivo di spedire una lettera senza indirizzo del mittente. Il sito funziona; semplicemente non sembra serio.

Come sistemarlo

Pubblica due file icona e linkali correttamente:

1. Il classico .ico — per browser legacy e per il percorso di auto-detect.

Mettilo alla radice del dominio:

public/favicon.ico   (ICO multi-risoluzione 16×16, 32×32)

La maggior parte dei browser prende /favicon.ico automaticamente anche senza tag <link>, ma l’esplicito è meglio.

2. Un’icona SVG — per browser moderni, scala a qualunque dimensione.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Il browser sceglie quella che preferisce (Chrome e Firefox preferiscono SVG; Safari ricade su ICO).

3. PWA / uso a icona grande — abbina ad apple-touch-icon e al web manifest.

<link rel="apple-touch-icon" href="/apple-touch-icon.png">  <!-- 180×180 -->
<link rel="manifest" href="/site.webmanifest">

Vedi i controlli Apple touch icon e web manifest.

Blocco head completo:

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

È tutto ciò che serve alla maggior parte dei siti.

Genera l’intero set da un’unica sorgente:

RealFaviconGenerator prende una sola immagine sorgente (idealmente SVG o PNG 512×512) e produce l’intera famiglia di icone più l’HTML da incollare. Copre iOS, Android, tile Windows e installabilità PWA.

Astro: metti i file in public/ e linkali nell’<head> del tuo layout. Astro configura già link rel="icon" da astro:assets se lo usi.

Next.js (App Router): metti favicon.ico e opzionalmente icon.svg direttamente in app/. Il framework inietta automaticamente i tag <link>.

app/
  favicon.ico       # linkato automaticamente
  icon.svg          # opzionale, linkato automaticamente
  apple-icon.png    # opzionale, 180×180, linkato automaticamente

WordPress: Aspetto → Personalizza → Identità del sito ha un uploader “Icona del sito”. WordPress genera e linka l’intero set automaticamente.

Note di design:

Usa un design quadrato. I browser ritagliano comunque a quadrato.
Alto contrasto — le favicon vengono mostrate a 16×16 nelle barre dei tab, dove i dettagli fini scompaiono.
Testa in dark mode. Un logo su sfondo trasparente che funziona su bianco può diventare invisibile sulle barre dei tab scure.

Requisiti SERP Google:

Google ha regole aggiuntive per la favicon nella SERP — quadrata, almeno 8×8 e con un URL stabile. I siti che ruotano l’URL della favicon a ogni deploy possono apparire come globo su Google. Usa un nome file stabile e non aggiungere mai query string.

Domande frequenti

Mi serve `.ico` o basta SVG?

Entrambi, per ora. SVG è il futuro, ICO è il presente — Safari e alcune versioni più vecchie di Chrome preferiscono ancora ICO per la barra dei tab. Fino al 2027 circa, spediscili entrambi.

Perché la mia favicon non appare nei risultati di Google?

Tre cause comuni:

L’URL restituisce 404 o 403 — controlla con curl -I https://tuosito.com/favicon.ico.
L’icona è troppo piccola (sotto 8×8) — genera un ICO multi-risoluzione a 16, 32 e 48.
Google non ha ri-scansionato il sito da quando l’hai aggiunta — aspetta fino a una settimana o richiedi l’indicizzazione in Search Console.

E il trucco favicon dark/light?

I browser moderni supportano le icone SVG con media query:

<link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)" type="image/svg+xml">
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)" type="image/svg+xml">

Oppure incorpora entrambe in un SVG con un tag <style> usando prefers-color-scheme. Entrambi funzionano; il secondo è una richiesta HTTP in meno.