Immagine a Favicon: Crea icone per il tuo sito da qualsiasi immagine

Q: Come faccio a fare riferimento ai favicon in HTML?

Utilizzando i tag che puntano a ogni dimensione e formato, più per iOS. Il browser seleziona la migliore corrispondenza. Un set completo di tag link copre ogni piattaforma.

Ultimo aggiornamento: June 28, 2026. Il supporto per i favicon nei browser si evolve; le dimensioni e i formati di base qui coprono lo scenario attuale.

Un favicon è l'icona piccola che appare in una scheda del browser, un elenco di segnalibri e la schermata iniziale del telefono quando qualcuno salva il tuo sito. Convertire un'immagine in un favicon significa creare i tipi di file giusti nelle dimensioni giuste in modo che l'icona appaia nitida ovunque venga visualizzata — da una scheda del browser da 16 pixel a un'icona Apple Touch da 180 pixel. Questa guida copre le dimensioni che ogni piattaforma si aspetta, i formati di file da generare e come mantenere l'icona riconoscibile anche nelle dimensioni più piccole.

Risposta rapida: come creare un favicon da un'immagine?

Inizia con un'immagine sorgente quadrata (o ritaglia in quadrato con lo image cropper), ridimensionalizzala resize alle dimensioni standard del favicon (16px, 32px, 180px, 512px) ed esporta come PNG più un file ICO per i browser legacy. Fa riferimento ad essi nel tuo HTML con i tag link appropriati. Testa la versione da 16px in una scheda del browser, perché se l'icona non è riconoscibile a quella dimensione, nessun numero di versioni più grandi lo risolverà. Mantieni anche la versione SVG se il logo è vettoriale, per un rendering nitido su schermi ad alta DPI.

Quali sono le dimensioni necessarie per un favicon?

Contesti diversi visualizzano il favicon in diverse dimensioni, e fornire le giuste dimensioni lo mantiene nitido ovunque.

Dimensione	File	Utilizzato per
16x16	ICO / PNG	Browser tab (legacy)
32x32	ICO / PNG	Browser tab (retina)
180x180	PNG	Apple Touch icon
192x192	PNG	Android home screen
512x512	PNG	PWA / splash
Any	SVG	Modern browsers, high-DPI

La versione da 16px è la più importante — è ciò che la maggior parte delle persone vede nella scheda del browser.
L'icona Apple Touch richiede 180px per un display nitido sulla schermata iniziale su iOS.
SVG serve i browser moderni a qualsiasi risoluzione senza file multipli.
Un singolo ICO può raggruppare più dimensioni per il supporto legacy.

Come si progetta un favicon che funzioni a 16px?

La sfida di un favicon è che deve essere riconoscibile a 16 pixel, che sono minuscoli. I dettagli che sembrano buoni a 512px scompaiono a 16px, quindi il design deve essere semplice.

Usa una forma singola e audace — una lettera, un marchio del logo, un'icona semplice.
Evita linee sottili e testo piccolo — svaniscono a 16px.
Usa un alto contrasto in modo che la forma risalti sullo sfondo della scheda (tab).
Testa la versione a 16px nella dimensione reale prima di pubblicare.

Un errore comune è usare l'intero logo con testo. A 16px, il testo è illeggibile, quindi il favicon assomiglia a una macchia sfocata. La soluzione è estrarre l'elemento più riconoscibile — l'icona o la prima lettera — e usarlo come favicon. La guida SVG to PNG copre l'esportazione di marchi vettoriali nelle dimensioni che ti servono.

Quali formati di file dovresti generare?

I favicon coprono diversi formati perché il supporto dei browser è evoluto nel tempo, e coprirli tutti assicura che l'icona funzioni ovunque.

ICO — il formato legacy, raggruppa più dimensioni, supportato da tutti i browser.
PNG — lo standard moderno, un file per dimensione.
SVG — vettoriale, si adatta a qualsiasi dimensione, supportato dai browser moderni.
Apple Touch PNG — specificamente 180x180, per le icone della schermata iniziale di iOS.

Formato	Quando usare
ICO	Supporto browser legacy, raggruppa dimensioni
PNG	Browser moderni, file per dimensione
SVG	Browser moderni, singolo file scalabile
Apple Touch PNG	Schermata iniziale iOS

Genera un ICO per la compatibilità legacy, i PNG per ogni dimensione per un supporto ampio e un SVG se la fonte è vettoriale. L'image converter gestisce la generazione del formato, e lo image cropper ottiene prima il quadrato sorgente.

Come si fa a referenziare i favicon in HTML?

I file generati devono essere referenziati nel tag <head> della pagina in modo che i browser li trovino. I tag link indicano al browser quale file utilizzare per quale contesto.

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

L'ICO copre i browser legacy con dimensioni raggruppate.
Lo SVG serve ai browser moderni a qualsiasi risoluzione.
L'icona Apple Touch copre i salvataggi della schermata iniziale di iOS.
Posiziona i file nella radice del sito per la massima compatibilità.

La Mozilla favicon guide documenta i tag link e il comportamento del browser, e la Web.dev app icons guide copre lo standard dell'icona mascherabile per Android. Testa il risultato in una scheda browser reale e sulla schermata iniziale di un telefono dopo aver implementato, perché le stranezze di rendering si manifestano solo nei contesti effettivi.

Progettare favicon per modalità chiara e scura

I browser e gli OS moderni passano tra modalità chiara e scura, e un favicon che appare benissimo su una scheda chiara può scomparire su una scheda scura. Un PNG con sfondo trasparente o un SVG con colori adattivi gestisce entrambi i contesti, perché l'icona si adatta al chrome circostante piuttosto che portare il proprio sfondo.

Sfida di modalità	Soluzione
L'icona scura scompare su scheda scura	Aggiungere un contorno sottile o usare la trasparenza
L'icona chiara scompare su scheda chiara	Stesso — contorno o colore adattivo
Difficile leggibilità a 16px	Semplificare la forma, aumentare il contrasto

Per i favicon SVG, è possibile utilizzare la media query prefers-color-scheme all'interno dell'SVG per fornire colori diversi per contesti chiari e scuri, che è la soluzione più pulita. Per PNG, uno sfondo trasparente con una forma che ha un contrasto interno sufficiente funziona accettabilmente su entrambi. L'obiettivo è che il favicon sia leggibile in una scheda indipendentemente dal fatto che l'utente utilizzi modalità chiara o scura, cosa che sta diventando sempre più il default piuttosto che l'eccezione.

Errori comuni del favicon

Troppi dettagli — l'icona non è riconoscibile a 16px. Semplifica.
Sorgente non quadrata — ritaglia prima in quadrato o l'icona si deforma.
Mancanza dell'icona Touch di Apple — i salvataggi su iOS mostrano invece uno screenshot generico.
Niente SVG — gli schermi ad alta DPI rendono un PNG sfocato anziché un vettore nitido.
Dimenticare di testare a 16px — la dimensione che la maggior parte delle persone vede è quella più spesso trascurata.

Il favicon è piccolo ma appare ovunque il tuo sito sia rappresentato — schede, segnalibri, schermate home, risultati di ricerca. Un'icona nitida e riconoscibile in ogni dimensione rafforza il brand a colpo d'occhio, mentre un favicon sfocato o mancante segnala una mancanza di cura. Dedica del tempo per ottenere la versione da 16px, genera l'intero set di formati e dimensioni, e l'icona rappresenterà il sito in modo pulito ovunque appaia. L'investimento è piccolo — un singolo pomeriggio di lavoro di design ed esportazione — ma ripaga ogni volta che un utente vede il tuo sito in una scheda, un segnalibro o una schermata home, cosa molto più spesso di quanto la maggior parte dei team si renda conto.

Domande frequenti

Quali dimensioni ha bisogno un favicon?

Un set moderno: 16×16, 32×32, 48×48 (classico), più 180×180 (icona al tocco Apple) e 192×192 / 512×512 (Android). Un'immagine master genera l'intero set. Il browser seleziona la dimensione corretta per il contesto.

Come disegno un favicon che funzioni a 16px?

Mantienilo semplice: una forma audace, alto contrasto, nessun dettaglio fine o testo. A 16px qualsiasi cosa intricata diventa un alone indistinto (smudge). Testa il design a 16px prima di impegnarti; se non è leggibile lì, è troppo complesso.

Quali formati di file dovrebbe usare un favicon?

ICO per la compatibilità legacy, PNG per i browser moderni e le icone Apple/Android, e SVG per una versione indipendente dalla risoluzione dove supportata. Genera l'intero set; un formato non copre ogni dispositivo.

Come faccio a fare riferimento ai favicon in HTML?

Utilizzando i tag <link rel="icon"> che puntano a ogni dimensione e formato, più <link rel="apple-touch-icon"> per iOS. Il browser seleziona la migliore corrispondenza. Un set completo di tag link copre ogni piattaforma.

Posso usare un'unica immagine per tutte le dimensioni del favicon?

Sì: un unico master quadrato (512×512 o superiore) genera l'intero set, da 16×16 a 512×512. Progetta il master in modo che sia leggibile a 16px (una forma audace) in modo che anche la dimensione più piccola funzioni. Un master, molte dimensioni.

Come faccio a testare un favicon?

Apri il sito in una scheda del browser e controlla l'icona a 16px (dimensione della scheda), 32px (segnalibri) e 180px (Apple touch). Se la versione da 16px non è leggibile, il design è troppo complesso: semplifica con una forma audace. I favicon sono piccoli ma compaiono ovunque, quindi un'icona nitida e riconoscibile in ogni dimensione rafforza il brand a colpo d'occhio.

Cos'è un file ICO?

Un formato contenitore legacy che contiene una o più immagini raster di diverse dimensioni, utilizzato per i favicon sui browser più vecchi (in particolare il vecchio Internet Explorer). I moderni browser usano PNG e SVG, quindi ICO è principalmente uno strato di retrocompatibilità. Genera un ICO insieme al tuo set PNG/SVG in modo che ogni browser, per quanto vecchio, riceva un'icona.