Come creare un favicon
Creare una favicon è un lavoro di due minuti con lo strumento giusto. Inizia da un'immagine sorgente quadrata, di almeno 512×512 pixel, eseguila tramite favicon generator e ottieni un pacchetto completo: .ico multi-dimensione, SVG, apple-touch-icon e manifest PNG. Questa guida accompagna ogni fase, dalla preparazione dell'origine alla verifica del browser. Per un riferimento approfondito vedere anche full tutorial.
Una favicon è la piccola icona che il browser visualizza nella barra delle schede, nella barra degli indirizzi e nell'elenco dei segnalibri. Sui dispositivi mobili, diventa l'icona della schermata iniziale quando un utente salva il tuo sito. Su Windows appare sui pin della barra delle applicazioni e sui collegamenti sul desktop. Ottenere la favicon giusta è un piccolo sforzo con un impatto enorme sul marchio: ogni visualizzazione di pagina inizia con la tua icona nella scheda dell'utente.
La moderna configurazione della favicon non è un singolo file: è un insieme coordinato. Un .ico multi-dimensione gestisce il fallback universale del browser. Un SVG offre un rendering nitido e scalabile sui browser moderni, incluso il supporto della modalità oscura. Un PNG (apple-touch-icon) 180×180 è ciò che iOS utilizza per le installazioni della schermata iniziale. Un 192×192 e un 512×512 PNG alimentano il prompt di installazione di Android PWA. Un'immagine sorgente ben preparata genera tutti questi elementi contemporaneamente.
La preparazione dell'immagine sorgente è il passaggio più trascurato. Il tuo logo deve essere quadrato: un ritaglio asimmetrico produce sempre un risultato allungato. Progetta una versione semplificata del tuo marchio che si legga chiaramente anche in piccole dimensioni: riduci le linee sottili, rimuovi il testo minuscolo e aumenta il contrasto. Ciò che sembra elegante a 512×512 può diventare un blob illeggibile a 16×16 se salti questo passaggio di semplificazione.
SVG è il formato sorgente ideale perché è indipendente dalla risoluzione. Una grafica vettoriale viene rasterizzata a qualsiasi densità di pixel senza perdita di qualità. Se disponi solo di un raster PNG o JPG, assicurati che sia almeno 512×512 prima di generarlo: il downscaling da qualsiasi cosa più piccola introduce una sfocatura che si aggrava ad ogni passaggio di ridimensionamento e si traduce in un'icona della scheda sfocata.
Il formato .ico è un contenitore, non una singola immagine. Contiene più fotogrammi raster, in genere 16×16, 32×32, 48×48 e 64×64, in un unico file. Il browser analizza la directory ICO ed esegue il rendering solo del fotogramma che più si avvicina alla densità di visualizzazione necessaria. Questo approccio a file singolo significa che non sono necessari tag di collegamento separati per ciascuna risoluzione: un tag copre tutte le dimensioni delle schede.
Carica la tua immagine sorgente su favicon generator. Lo strumento elabora tutto localmente nel tuo browser: la tua immagine non lascia mai il tuo dispositivo. In pochi secondi produce un pacchetto di download contenente favicon.ico, favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png e site.webmanifest, oltre ai tag di collegamento HTML pronti per essere incollati.
Posizionare i file è semplice. Trascina tutti i file generati nella directory principale pubblica del tuo sito, la stessa cartella che serve il tuo index.html. Per i progetti dell'app Vite e Create React questa è la cartella /public. Per i progetti Next.js App Router, posiziona favicon.ico all'interno di /app e i file PNG in /public. Per i siti statici, rilascia tutto insieme ai file HTML.
I tag di collegamento HTML indicano ai browser quale file utilizzare per ciascun contesto. Il minimo è una riga: `<link rel='icon' href='/favicon.ico'>`. Il set completo consigliato aggiunge altre tre righe: una per la variante SVG, una per apple-touch-icon e una per il manifest web. Incolla lo snippet generato all'interno del tuo elemento "<head>". L'ordine dei tag non ha importanza purché precedano "</head>".
La memorizzazione nella cache del browser è la principale causa di confusione quando una favicon non sembra aggiornarsi. I browser memorizzano nella cache /favicon.ico per origine e potrebbero non rispettare le intestazioni di controllo della cache standard come fanno per altre risorse. Se la tua vecchia icona persiste, apri una nuova finestra di navigazione in incognito o aggiungi una stringa di query di buster della cache come `?v=2` all'href nel tag di collegamento per forzare i browser a recuperare il file aggiornato.
Gli errori più comuni includono il caricamento di un'immagine non quadrata (produce icone allungate), l'utilizzo di un'origine inferiore a 256×256 pixel (sfocatura con dimensioni dello schermo più grandi) e l'omissione di apple-touch-icon (le installazioni nella schermata iniziale iOS mostrano invece uno screenshot della pagina). Tutti e tre vengono risolti partendo da una sorgente quadrata 512×512 PNG o SVG e lasciando che il generatore gestisca ogni dimensione di output.
Vale la pena integrare il supporto della modalità oscura fin dall'inizio. Molti browser visualizzano la barra delle schede in una cromatura scura quando il sistema dell'utente è in modalità oscura. Se la tua icona è un segno scuro su uno sfondo trasparente, può svanire in una scheda scura. Spedisci una favicon SVG con un blocco di stile `@media (prefers-color-scheme: dark)` incorporato che cambia il colore di riempimento: non sono richiesti tag HTML aggiuntivi, solo un file SVG aggiornato.
Verifica la tua favicon utilizzando live favicon tester dopo la distribuzione. Il tester simula i contesti della scheda del browser, del segnalibro e della richiesta di installazione e mostra come viene visualizzata l'icona a 16, 32, 48, 128 e 512 pixel affiancate. Controlla anche manualmente una scheda bloccata in Chrome e Safari e utilizza "Aggiungi alla schermata iniziale" su iOS per confermare apple-touch-icon.
Per le procedure dettagliate specifiche della piattaforma, fare riferimento a favicon for WordPress, favicon for Shopify, favicon for React e favicon for Next.js. Il set di file generato è identico su tutte le piattaforme: ciò che varia è dove carichi i file e il modo in cui la piattaforma inserisce o sovrascrive i tag di collegamento HTML.
Rivisita la tua favicon ogni volta che esegui il rebranding. Le favicon memorizzate nella cache persistono nei segnalibri e nelle schermate delle case mobili anche molto tempo dopo l'attivazione della riprogettazione del sito. L'aggiornamento della stringa della versione nel tag di collegamento href obbliga i browser a recuperare il nuovo file alla visita successiva, sostituendo gradualmente la vecchia icona in tutte le posizioni memorizzate nella cache. Consulta la guida best favicon format per una suddivisione formato per formato delle dimensioni del file e dei compromessi di compatibilità.
Come funziona
- 1
Preparare un'immagine sorgente quadrata
Esporta il tuo logo o icona come PNG 512×512 con uno sfondo trasparente o come SVG con un viewBox quadrato (ad esempio, `viewBox='0 0 512 512'`). Semplifica i dettagli fini che saranno invisibili a 16×16.
- 2
Genera il tuo pacchetto favicon
Carica la fonte su [favicon generator](tool:favicon-generator). Lo strumento produce favicon.ico (multi-dimensione 16/32/48/64), favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png e site.webmanifest, tutto in un unico passaggio.
- 3
Copia tutti i file nella root del tuo sito
Inserisci tutti i file dallo zip di download nella radice pubblica del tuo progetto, la directory che serve index.html. Per Next.js App Router, favicon.ico va in /app; gli PNG vanno in /public.
- 4
Incolla i tag di collegamento HTML in <head>
Copia lo snippet HTML generato e aggiungilo all'interno del tuo elemento "<head>". Il set completo copre il fallback .ico, la variante SVG, apple-touch-icon e il collegamento manifest: sei righe in totale.
- 5
Verifica su browser e dispositivi
Apri il tuo sito in Chrome, Safari, Firefox e Edge. Esamina la scheda, la barra dei segnalibri e la barra degli indirizzi. Su iOS, tocca il foglio Condividi e "Aggiungi alla schermata iniziale" per testare apple-touch-icon. Utilizza [favicon tester](utility:favicon-tester) per una simulazione rapida.
- 6
Busta della cache durante l'aggiornamento di una favicon esistente
Se sostituisci una favicon live, incrementa la stringa della versione nel tag href del collegamento (`?v=2`, `?v=3`, ecc.). Ciò costringe tutti i browser a recuperare il file aggiornato al caricamento della pagina successiva anziché a fornire la versione memorizzata nella cache.
Provalo ora
Crea adesso la tua favicon
Generatore di FaviconFAQ
Qual è il modo più semplice per creare una favicon?+
Carica un quadrato PNG o SVG da 512×512 nel generatore FetchFavicon. Produce tutti i file richiesti (.ico, SVG, apple-touch-icon, manifest PNGs) oltre a HTML pronti per essere incollati in meno di un secondo, senza registrazione né caricamento sul server.
Che dimensioni dovrebbe avere la mia immagine sorgente?+
Almeno 512×512 pixel, idealmente come SVG. Passando a dimensioni più piccole si rischia una sfocatura visibile alla dimensione 256×256 utilizzata da Windows e alla dimensione 512×512 richiesta per le richieste di installazione di PWA. L'upscaling di un'immagine piccola comporta una perdita di qualità ad ogni passaggio di ridimensionamento.
Ho bisogno di un apple-touch-icon?+
Sì, se qualche visitatore utilizza un iPhone o iPad. Senza di esso, le installazioni della schermata iniziale di iOS mostrano una miniatura dello screenshot di bassa qualità della tua pagina invece del marchio del tuo marchio. Un PNG 180×180 collegato con `<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>` è tutto ciò di cui hai bisogno.
Perché la mia favicon non viene visualizzata nella scheda del browser?+
Molto spesso si tratta di un problema di memorizzazione nella cache. Apri una finestra privata/in incognito e accedi al tuo sito. Se ancora non viene visualizzato, verifica che favicon.ico sia servito nella radice del tuo dominio e che il percorso href del tag di collegamento si risolva correttamente: controlla eventuali errori di battitura e barre iniziali mancanti.
Ho bisogno sia di .ico che di SVG?+
Sì, per una copertura completa. Il file .ico gestisce browser legacy, scorciatoie Windows e strumenti di terze parti che recuperano direttamente /favicon.ico. SVG gestisce un rendering nitido su Chrome, Firefox, Edge e Safari 15+ e supporta la commutazione del colore in modalità scura. La dimensione combinata del file è in genere inferiore a 30 KB.
Quanto tempo impiega la modifica di una favicon per propagarsi?+
Da pochi secondi a diversi giorni, a seconda dell'aggressività con cui il browser ha memorizzato nella cache l'originale. La soluzione più rapida è aggiungere una nuova stringa di query (`?v=2`) alla tua favicon href. Ciò fa sì che i browser lo considerino come un nuovo URL e ne recuperino immediatamente una nuova copia.
Posso utilizzare un JPEG come sorgente della mia favicon?+
Puoi caricare un JPEG nel generatore, ma i JPEG non supportano la trasparenza. Se la tua icona necessita di uno sfondo trasparente, che ha un aspetto migliore nelle schede del browser, inizia invece da PNG-32 o SVG. Il generatore convertirà correttamente sia in .ico che in PNG.