"Generatore di favicon: come creare una favicon da un PNG"

Ogni sito web necessita di una favicon. È la piccola icona quadrata che appare nelle schede del browser, nella barra dei segnalibri, nella cronologia del browser e nella schermata iniziale di iOS o Android quando un visitatore salva un collegamento al tuo sito. Appare anche nei risultati di ricerca di Google accanto al nome del tuo sito — un dettaglio che influisce sull’aspetto del tuo brand per chiunque ti trovi tramite ricerca organica. Senza una favicon, i browser ricorrono a un’icona generica a pagina bianca che fa sembrare persino un sito ben rifinito incompleto. Se hai già un logo in formato PNG, un generatore di favicon lo trasforma in un favicon.ico funzionante in meno di un minuto, senza installazioni e senza bisogno di account.

Di quali dimensioni di favicon hai realmente bisogno?

Non esiste un’unica dimensione universale per le favicon perché contesti diversi richiedono risoluzioni diverse dallo stesso set di file. Il set pratico copre sei dimensioni:

Dimensione	Formato	Caso d’uso
16×16	ICO / PNG	Barra delle schede del browser, barra degli indirizzi
32×32	ICO / PNG	Collegamento sulla barra delle applicazioni, scheda su schermi ad alta DPI
48×48	ICO	Collegamento sul desktop di Windows
180×180	PNG	Icona touch Apple — schermata iniziale di iOS
192×192	PNG	Collegamento alla schermata iniziale di Android tramite manifest web
512×512	PNG	Schermata di avvio di Android tramite manifest web

La dimensione della favicon da cui parti è importante. Lavora sempre da una fonte quadrata grande — 512×512 o più grande — in modo che ogni dimensione più piccola si riduca in modo pulito. L’ingrandimento da una miniatura 16×16 crea sfocature che nessuna quantità di nitidezza può correggere.

Per la maggior parte dei siti, il file ICO gestisce i livelli 16×16, 32×32 e 48×48 in un unico contenitore. Le dimensioni 180×180, 192×192 e 512×512 sono PNG separati richiamati in HTML o in un manifest web.

ICO vs PNG vs SVG

Tutti e tre i formati funzionano come favicon per un sito web. La risposta giusta è usarne più di uno.

ICO è un formato contenitore Microsoft che raggruppa più dimensioni in un singolo file. Inserisci favicon.ico nella directory root del tuo dominio e ogni browser — inclusi quelli più vecchi — lo troverà automaticamente senza alcun markup HTML. Un file, configurazione zero.

PNG è supportato da tutti i browser moderni quando dichiarato con un tag <link>. È l’unico formato che funziona per le icone touch di Apple e le icone manifest di Android. PNG preserva anche la trasparenza completa del canale alfa, quindi la tua icona appare pulita su qualsiasi colore di sfondo della scheda.

SVG è un formato vettoriale supportato da Chrome, Firefox ed Edge. Poiché si adatta a qualsiasi risoluzione senza pixelazione, un singolo file SVG copre ogni densità di visualizzazione. SVG supporta anche le media query prefers-color-scheme incorporate, che consentono alla favicon di passare automaticamente tra una versione scura e una chiara. Safari non supporta ancora le favicon SVG, quindi SVG non può sostituire ICO — ma è un forte complemento.

Raccomandazione pratica: spedisci favicon.ico (contenente 16×16, 32×32, 48×48) come fallback, aggiungi un SVG per i browser moderni e la modalità scura, e includi un PNG 180×180 per l’icona touch di Apple. Questa combinazione copre ogni browser e dispositivo principale.

Come creare una favicon da un PNG

I seguenti passaggi illustrano la creazione di una favicon per un sito web utilizzando il convertitore da PNG a ICO su privateconvert.org. Lo strumento funziona interamente nel tuo browser — il file non lascia mai il tuo dispositivo, non è necessario creare un account e nessun watermark viene aggiunto all’output.

1. Prepara il tuo PNG sorgente. Utilizza un’immagine quadrata di 512×512 pixel o più grande. Se il tuo logo è un wordmark orizzontale, ritaglia solo il simbolo o l’iniziale — i wordmark diventano illeggibili a 16 pixel di larghezza. Assicurati che il PNG abbia uno sfondo trasparente se vuoi che l’icona appaia pulita su qualsiasi colore della scheda.

2. Apri il convertitore. Vai su privateconvert.org/tools/png-to-ico.

3. Trascina il tuo PNG sulla pagina. Nessun pulsante di caricamento da cercare — trascina il file direttamente nella zona di rilascio.

4. Scarica il file ICO. Il convertitore genera un favicon.ico contenente i livelli standard 16×16, 32×32 e 48×48. Clicca su download. Il file è pronto per essere distribuito.

5. Crea le dimensioni PNG aggiuntive se necessario. Per l’icona touch di Apple, ridimensiona il tuo PNG sorgente a 180×180. Per le icone manifest di Android, produci un 192×192 e un 512×512. Qualsiasi editor di immagini o ridimensionatore online funziona; il convertitore ICO su privateconvert.org gestisce il lato ICO.

Qualche consiglio prima della conversione:

• Inizia dalla versione a più alta risoluzione del tuo logo, non da una miniatura compressa.
• Il convertitore conserva la trasparenza del canale alfa, quindi un PNG con un bordo sagomato o trasparente rimane nitido nell’output ICO.
• Se gestisci un ambiente di staging insieme alla produzione, usa un colore di sfondo diverso sulla favicon di staging. La differenza visiva istantanea nella scheda ti dice a colpo d’occhio in quale ambiente ti trovi.

Come aggiungere una favicon al tuo sito web (HTML)

Posiziona favicon.ico nella directory root del tuo dominio. La maggior parte dei browser controlla automaticamente iltuosito.com/favicon.ico — nessun markup richiesto. Per un controllo esplicito su ogni formato e dimensione, aggiungi i seguenti tag all’interno del tuo <head>:

<!-- Fallback ICO — funziona in tutti i browser senza ulteriori markup -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- Dimensioni PNG per i browser moderni -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- SVG per i browser moderni + cambio modalità scura -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- Icona touch Apple per la schermata iniziale di iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Se hai solo un file e desideri la configurazione più semplice possibile, il singolo tag ICO è il fallback minimo indispensabile:

<link rel="icon" href="/favicon.ico">

Per la schermata iniziale di Android e il supporto delle Progressive Web App, aggiungi un manifest web che faccia riferimento ai tuoi PNG 192×192 e 512×512:

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512", "purpose": "any maskable" }
  ]
}

Salva il manifest come manifest.webmanifest e referenzialo in <head>:

<link rel="manifest" href="/manifest.webmanifest">

Il valore "purpose": "any maskable" nell’elemento 512×512 indica ad Android di utilizzare un’icona di avvio adattiva che si adatti alla sua griglia di icone sagomate senza ritagli.

Come aggiungere una favicon in WordPress, Shopify e Squarespace

Ogni piattaforma offre un campo UI dedicato in modo da non dover modificare HTML o caricare file tramite FTP.

WordPress: Vai su Aspetto > Personalizza > Identità sito. Cerca il campo “Icona sito” in fondo. Clicca su “Seleziona icona sito”, carica il tuo PNG, quindi ritaglia se richiesto. WordPress accetta qualsiasi immagine quadrata e gestisce il ridimensionamento. Usa almeno 512×512 come sorgente. Clicca su “Pubblica” per salvare.

Shopify: Vai su Negozio Online > Temi, clicca su “Personalizza” sul tuo tema attivo, quindi apri “Impostazioni tema” (o la sezione dell’intestazione a seconda del tuo tema). Trova il campo “Favicon”, clicca su “Seleziona immagine” e carica un PNG o ICO quadrato. Salva e pubblica il tema. L’icona apparirà entro pochi minuti.

Squarespace: Vai su Sito Web > Pagine, quindi clicca su “Strumenti sito Web” in fondo alla barra laterale sinistra. Seleziona “Favicon”. Carica un PNG quadrato — Squarespace lo ridimensiona automaticamente. Salva la pagina.

In tutti e tre i casi il flusso di lavoro è lo stesso: produrre un PNG quadrato pulito di 512×512 o più grande utilizzando un generatore di favicon, quindi lasciare che la piattaforma gestisca il dimensionamento del display.

Perché la tua favicon non appare

Una favicon che funziona nello sviluppo ma si rifiuta di apparire in produzione — o scompare dopo un aggiornamento — di solito è riconducibile a una di cinque cause.

Cache del browser. Le favicon sono memorizzate nella cache in modo aggressivo. Ricarica con un “hard refresh” tramite Ctrl+Shift+R (Windows/Linux) o Cmd+Shift+R (Mac). Se l’icona non appare ancora, svuota completamente la cache del browser o testa in una finestra privata/in incognito. Alcuni browser richiedono la chiusura e la riapertura della scheda prima che la cache si svuoti per le favicon.

Percorso file errato. favicon.ico deve trovarsi nella directory root esatta del tuo dominio — iltuosito.com/favicon.ico, e non iltuosito.com/assets/favicon.ico. Se usi un tag <link> con un percorso relativo, verifica che il percorso si risolva correttamente dalla pagina che stai testando, non solo dalla homepage.

PNG rinominato che si maschera da ICO. Cambiare l’estensione di un file da .png a .ico non lo converte. Il formato ICO è un contenitore binario; un PNG rinominato è ancora un PNG e i browser che ispezionano l’intestazione del file lo ignoreranno. Passa il file attraverso un vero generatore di favicon per produrre un vero ICO.

Discrepanza HTTPS vs HTTP. I browser bloccano le richieste di contenuto misto. Se il tuo sito è servito tramite HTTPS ma il tag <link> della favicon punta a http://, la richiesta viene bloccata silenziosamente. Controlla che l’URL della favicon utilizzi https://.

Caching CDN. Se il tuo sito si trova dietro a una CDN (Cloudflare, Fastly, ecc.), i nodi edge potrebbero servire una versione obsoleta di favicon.ico anche dopo che l’hai sostituita sull’origine. Svuota la cache della CDN specificamente per l’URL della favicon, o aggiungi una stringa di query per “cache-busting”: href="/favicon.ico?v=2".

Domande frequenti

Qual è la dimensione minima di una favicon? 16×16 pixel è la dimensione più piccola che i browser visualizzano nelle schede. Detto questo, dovresti includere sempre anche il 32×32 — gli schermi ad alta DPI e i collegamenti sulla barra delle applicazioni necessitano della versione più grande per rimanere nitidi. Se usi privateconvert.org/tools/png-to-ico, l’output ICO include entrambe le dimensioni automaticamente.

Dovrei usare PNG o ICO per la mia favicon? Usa entrambi. ICO funziona come fallback universale che i browser trovano automaticamente senza alcun markup HTML — è ciò che i browser cercano quando non è presente un tag <link>. PNG funziona per i browser moderni quando dichiarato esplicitamente ed è richiesto per le icone touch di Apple e le icone manifest di Android. I due formati svolgono compiti diversi e non sono intercambiabili.

Una favicon influisce sulla SEO? Non direttamente — Google non usa la favicon come segnale di ranking. Tuttavia, appare nei risultati di ricerca di Google accanto al nome del tuo sito nella SERP. Una favicon pulita e riconoscibile rafforza il riconoscimento del brand e può contribuire al tasso di click-through. Una favicon mancante o rotta mostra un’icona generica a forma di globo nei risultati di ricerca.

Come creo una favicon che cambia per la modalità scura? Usa una favicon SVG con una media query prefers-color-scheme incorporata:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .icon { fill: #000000; }
    @media (prefers-color-scheme: dark) {
      .icon { fill: #ffffff; }
    }
  </style>
  <circle class="icon" cx="50" cy="50" r="40"/>
</svg>

Riferisci l’SVG insieme al tuo fallback ICO:

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

I browser che supportano le favicon SVG utilizzano la versione scalabile con cambio di colore. Safari e i browser più vecchi ripiegano su ICO.

Cos’è un’icona touch di Apple e ne ho bisogno? L’icona touch di Apple è l’immagine che iOS usa quando un visitatore salva il tuo sito sulla schermata iniziale. Senza di essa, iOS o scatta uno screenshot della tua pagina o usa la tua favicon normale, entrambe le quali appaiono scadenti alla dimensione di visualizzazione 180×180. Produci un PNG 180×180 con uno sfondo solido (iOS riempie la trasparenza con il bianco e taglia gli angoli), aggiungi 20 pixel di spaziatura in modo che l’artwork sia visibile attraverso la maschera a angoli arrotondati, e referenzialo:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Cos’è un’icona mascherabile? L’icona di avvio adattiva di Android ritaglia le icone in un cerchio, una lacrima o una squircle a seconda del dispositivo. Un’icona mascherabile include un’imbottitura extra intorno all’opera d’arte — chiamata “zona sicura” — in modo che l’icona appaia intenzionale dopo il ritaglio piuttosto che accidentalmente tagliata. Aggiungi "purpose": "any maskable" alla tua voce 512×512 nel manifest web per dire ad Android che può applicare la maschera adattiva.

Quale immagine funziona meglio come favicon? Forme semplici, ad alto contrasto. Una singola lettera, un segno geometrico o un simbolo di logo audace rimangono leggibili a 16 pixel. Illustrazioni dettagliate, tratti sottili e wordmark completi si riducono a rumore a piccole dimensioni. Se il tuo logo funziona solo come un blocco orizzontale, usa la favicon come un’opportunità per creare un’icona app dedicata — solo il simbolo, senza il testo. Puoi creare una favicon da un png in pochi secondi su privateconvert.org/tools/png-to-ico per testare come il tuo artwork si presenta a piccole dimensioni prima di impegnarti.

---

Sei pronto a creare la tua favicon? Apri il convertitore da PNG a ICO su privateconvert.org — trascina il tuo PNG, scarica l’ICO, e la tua favicon è pronta. Nessun account, nessuna filigrana, nessun caricamento di file.