Cos'è una favicon e come crearne una dal tuo logo (2026)

Una favicon è la minuscola icona che rappresenta il tuo sito in una scheda del browser, un segnalibro o la schermata home del telefono. Creala dal simbolo del tuo logo, semplificala affinché si legga a 16–32 pixel e distribuisci il set di file minimo del 2026: un SVG, un fallback ICO e un apple-touch-icon 180×180.

Di LogoSagaPubblicato
In questa pagina
  1. Cos'è una favicon?
  2. Perché una favicon conta?
  3. Le dimensioni e i formati di favicon che ti servono
  4. Come creare una favicon dal tuo logo
  5. Collegare una favicon nel tuo HTML
  6. Bonus: una favicon che si adatta alla modalità scura
  7. Testare la tua favicon
Lo stesso segno mostrato a dimensioni di favicon, inclusa una versione delle dimensioni di una scheda del browser.
Una favicon è il segno del tuo logo, semplificato per restare chiaro a dimensioni minuscole.

Cos'è una favicon?

Una favicon (abbreviazione di «favorite icon») è la piccola immagine quadrata che rappresenta un sito web in una scheda del browser, un segnalibro, una voce della cronologia e la schermata home del telefono. È quasi sempre una versione semplificata del logo di un brand — nello specifico il simbolo, dato che non c'è spazio per il nome completo a quella dimensione.

Perché una favicon conta?

Una favicon è un pezzo di branding piccolo ma costante. Con una dozzina di schede aperte, è spesso l'unico modo in cui qualcuno individua il tuo sito in un istante, e un'icona salvata sulla schermata home sta accanto a icone app curate. Una favicon nitida e in linea con il brand appare ragionata; una mancante o sfocata appare incompleta.

Le dimensioni e i formati di favicon che ti servono

Non ti servono le dozzine di icone che elencano i vecchi tutorial. Nel 2026 il set minimo e affidabile è ridotto:

FileDimensioneScopo
favicon.svgqualsiasibrowser moderni; può adattarsi alla modalità scura
favicon.ico16 + 32fallback legacy (browser più vecchi)
apple-touch-icon.png180×180schermata home iOS
Icone PWA (opzionale)192, 512web app installabili

Dimensioni come 64×64, 96×96 e 128×128 che le vecchie guide consigliano sono obsolete — saltale. Il .ico è un fallback, non il file principale: i browser che supportano l'SVG lo preferiranno.

  1. Parti dal simbolo, non dal logo completo — il nome non si leggerà alla dimensione di una scheda.
  2. Semplifica per le dimensioni minuscole. Elimina dettagli fini, linee sottili e gradienti delicati che scompaiono a 16–32 pixel. Prediligi forme decise e alto contrasto.
  3. Mantienilo quadrato con un po' di padding così non è schiacciato contro i bordi della scheda.
  4. Esporta il set — SVG, ICO e il PNG 180×180 — dal master vettoriale del tuo logo.
Il passaggio di esportazione dell'editor di LogoSaga che mostra favicon.svg incluso con i file del logo.
Esportare dal master vettoriale ti dà una favicon che corrisponde esattamente al logo.

Poiché l'SVG è il formato master ideale, vale la pena capire SVG vs PNG per i loghi prima di esportare.

Collegare una favicon nel tuo HTML

Punta ai file dall'<head> delle tue pagine. Un set moderno e minimale appare così:

<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

I browser che supportano l'SVG lo usano; gli altri ricadono sull'ICO.

Bonus: una favicon che si adatta alla modalità scura

Una favicon SVG può portare con sé il proprio stile per la modalità scura. Incorpora una media query dentro l'SVG affinché il segno cambi colore con il tema del browser:

<style>
  path {
    fill: #18231d;
  }
  @media (prefers-color-scheme: dark) {
    path {
      fill: #eef1ea;
    }
  }
</style>

Chrome, Firefox ed Edge rispettano questo; Safari non ancora, quindi scegli colori che restino leggibili su entrambi i temi come fallback.

Testare la tua favicon

Controllala in una vera scheda del browser, chiara e scura, e su una schermata home del telefono. Poiché i browser mettono in cache le favicon in modo aggressivo, fai un hard-refresh dopo ogni modifica — o invalida la cache rinominando il file o aggiungendo ?v=2. Se appare confusa alla dimensione di una scheda, semplifica ulteriormente il segno: la favicon è la prova onesta di quanto bene un logo si riduce.

Se costruisci il tuo logo con LogoSaga, l'esportazione include già una favicon.svg accanto all'SVG e al PNG del logo, così la favicon corrisponde sempre esattamente al segno.

Crea un logo con una favicon abbinata

Domande frequenti

Che dimensione dovrebbe avere una favicon?

Fornisci un SVG scalabile più le dimensioni raster PNG: 32×32 è lo standard moderno per le schede, 16×16 è la classica dimensione piccola e 180×180 è l'icona Apple touch. Le PWA hanno bisogno anche di 192×192 e 512×512.

In quale formato dovrebbe essere una favicon — SVG, PNG o ICO?

Usa un SVG per i browser moderni, un ICO come fallback legacy e PNG per l'apple-touch-icon e le dimensioni PWA. L'SVG è scalabile e può persino adattarsi alla modalità scura; l'ICO copre i browser più vecchi.

Una favicon può cambiare in modalità scura?

Sì, con una favicon SVG. Incorpora una media query prefers-color-scheme dentro l'SVG per definire i colori chiari e scuri. Safari non la rispetta ancora, quindi scegli un colore neutro che si legga su entrambe.

Perché la mia favicon non si mostra o non si aggiorna?

I browser mettono in cache le favicon in modo aggressivo. Dopo una modifica, fai un hard-refresh, o invalida la cache rinominando il file o aggiungendo una query string come favicon.svg?v=2, e verifica che i tag link nell'head della pagina siano corretti.

Fonti