Come creare un favicon
Un moderno favicon è più di un'immagine 16×16. Questa guida illustra la preparazione del codice sorgente, la generazione di più dimensioni, la configurazione di HTML, esempi reali e soluzioni per i problemi che intralciano la maggior parte dei team.
Cos'è un favicon?
A favicon è la piccola icona visualizzata dai browser nelle schede, nelle barre dei segnalibri, negli elenchi della cronologia e nelle barre degli indirizzi. Sui telefoni diventa l'icona della schermata iniziale quando qualcuno salva il tuo sito. Il Windows appare sui pin della barra delle applicazioni e sui collegamenti sul desktop. Utilizza il nostro [generatore favicon](strumento:favicon-generator), [convertitore da PNG a ICO](strumento:png-to-ico), [convertitore da SVG a ICO](strumento:svg-to-ico) e tester live favicon per creare e verificare il tuo set di icone e leggere il companion guide per una guida dettagliata.
La parola deriva dall'icona dei preferiti, ma il lavoro è cresciuto ben oltre una singola GIF 16×16. L'attuale favicon è una piccola famiglia di asset: un favicon.ico a livello root, varianti opzionali SVG e PNG, un'icona touch Apple per iOS e icone manifest per PWA installabili.
Gli utenti raramente commentano un buon favicon, ma notano immediatamente uno mancante o sfocato. Un'icona nitida segnala la pulizia e rende la tua scheda identificabile tra venti pagine aperte.
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
Prepara la tua immagine sorgente
Parti da un'immagine quadrata di almeno 512×512 pixel. SVG con un quadrato viewBox è l'ideale perché si adatta perfettamente a ogni dimensione raster che esporterai.
Evita tratti sottili, tipografia fine e sfumature complesse. A 16×16, i dettagli dell’attaccatura dei capelli si fondono in una poltiglia grigia. Semplifica il segno: meno forme, contrasto più elevato, più imbottitura attorno al glifo.
Se il tuo logo è orizzontale, crea un ritaglio quadrato che centra il simbolo senza il marchio denominativo. Le forme delle lettere inferiori a 8px di altezza raramente sopravvivono al ridimensionamento.
Esporta PNG-32 con trasparenza quando il raster è la tua unica opzione. Uno sfondo bianco incorporato apparirà sbagliato nella cromatura scura del browser e sui launcher mobili colorati.
Genera un .ico di più dimensioni
Raggruppa fotogrammi da 16, 32, 48, 64, 128 e 256 pixel all'interno di un file favicon.ico. I browser e Windows leggono l'intestazione della directory e decodificano solo la dimensione di cui hanno bisogno.
Posiziona favicon.ico nella radice del tuo sito (/favicon.ico). Anche se dichiari tag <link> moderni, i crawler e i client più vecchi continuano a sondare quel percorso per convenzione.
Il nostro generatore favicon rasterizza ogni dimensione lato client in meno di un secondo. La tua immagine originale non lascia mai il browser, il che è importante quando il marchio è il logo di un prodotto inedito.
Aggiungi i tag HTML
Rilascia questi tag in <head> per una configurazione 2026 completa:
<link rel="icon" href="/favicon.ico" size="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
La linea SVG fornisce tabulazioni nitide su Chromium e Firefox. La linea .ico copre i fallback Safari, le scorciatoie Windows e i lettori RSS che ignorano SVG.
Esempi del mondo reale
Sito di marketing statico: carica un PNG 512×512 del tuo logo, genera favicon.ico più un'icona apple-touch 180×180, aggiungi quattro righe <link>, distribuisci in /public o nella radice web. Tempo totale: meno di cinque minuti.
React / App Vite: posiziona le icone in /public, fai riferimento ad esse con percorsi relativi alla radice in index.html. Vite copie /public invariate in fase di compilazione, quindi /favicon.ico si risolve correttamente in produzione.
WordPress: salta il manuale HTML: utilizza Aspetto → Personalizza → Identità sito → Site Icon. Carica una sorgente 512×512; WordPress emette automaticamente i tag corretti. Consulta il nostro tutorial WordPress per suggerimenti sul busting della cache.
Marchio in modalità oscura: esporta un SVG il cui riempimento cambia all'interno di @media (prefers-color-scheme: scuro). Abbinalo a un fallback .ico neutro per i client che non caricano mai SVG.
Verifica in ogni browser
Aggiornamento definitivo (Ctrl+Maiusc+R o Comando+Maiusc+R) in Chrome, Safari, Firefox e Edge. Le ricariche normali spesso mantengono un favicon memorizzato nella cache per giorni.
Controlla quattro superfici: scheda del browser, barra dei segnalibri, Aggiungi alla schermata iniziale su iOS e un'icona Windows bloccata sulla barra delle applicazioni. Ogni superficie può richiedere una risoluzione diversa dal tuo pacchetto.
Apri DevTools → Rete, filtra per ico o png, ricarica e conferma 200 risposte per ogni URL di icona dichiarato. Un singolo 404 su apple-touch-icon.png è un errore comune.
Domande frequenti
Ho ancora bisogno di favicon.ico se ho SVG? SÌ. Mantieni .ico come fallback universale. SVG è un miglioramento, non una sostituzione.
Qual è il minimo vitale favicon? Un favicon.ico multitaglia a /favicon.ico. Tutto il resto migliora la chiarezza sugli schermi ad alto DPI e sulle schermate della casa mobile.
Posso usare un JPG? Puoi, ma perdi trasparenza. PNG o SVG è quasi sempre migliore per le icone dell'interfaccia.
Con quale frequenza devo aggiornare favicon? Ogni volta che il marchio del tuo marchio cambia. Aumenta una volta una query ?v=2 sui tag <link> per sconfiggere le cache aggressive del browser.
Risoluzione dei problemi
L'icona non si aggiorna dopo la distribuzione: i browser memorizzano nella cache favicon indipendentemente da HTML. Esegui un hard refresh, cancella i dati del sito o aggiungi temporaneamente ?v=2 agli URL delle icone.
Icona della scheda sfocata: la tua fonte era troppo piccola o non quadrata. Rigenera da 512×512 o SVG; verificare che .ico contenga effettivamente un frame 32×32.
Riquadro bianco attorno al logo: la fonte aveva uno sfondo opaco. Riesporta con trasparenza e rigenera .ico con voci compresse PNG.
Funziona localmente ma non in produzione: conferma che i file si trovano nella root web pubblica, non solo in src/. Controlla le cache CDN e i percorsi con distinzione tra maiuscole e minuscole sui server Linux.
Lista di controllo passo dopo passo
Esporta o individua un master quadrato a 512×512 o superiore. Verifica la trasparenza, il profilo colore sRGB e l'assenza di livelli di sfondo nascosti nel file di disegno.
Esegui il master tramite un generatore favicon lato client. Scarica favicon.ico, favicon.svg se applicabile, apple-touch-icon.png e manifest PNG in un unico passaggio.
Carica tutti i file nella tua root web pubblica. Sugli host statici ciò significa la stessa cartella di index.html; sui framework, utilizzare la directory /public o /static mappata su /.
Incolla il blocco <link> consigliato in <head> prima di qualsiasi script di blocco del rendering. Il posizionamento anticipato aiuta i browser a scoprire le icone al primo utilizzo.
Convalida con aggiornamento forzato tra Chrome, Safari e Firefox. Aggiungi una scheda, aggiungi la pagina ai segnalibri e prova Aggiungi alla schermata principale su un vero iPhone se il traffico iOS è importante per te.
Documenta il set di icone nel tuo README o nel sistema di progettazione in modo che il prossimo rebranding non inizi da un singolo 32×32 PNG trovato da qualcuno nell'e-mail.
Errori comuni da evitare
Utilizzando un logo completamente orizzontale ridimensionato in uno slot 16×16, il testo diventa illeggibile. Ritaglia fino al simbolo.
Viene spedito solo un PNG 16×16 rinominato .ico senza una directory multi-dimensione adeguata: schede Windows e Retina migliorate e sfocate.
Dimentica l'icona del tocco della mela e sei ossessionato dalle schede del desktop: gli utenti iOS rappresentano una quota importante del traffico web mobile.
Indicando <link href> a un percorso CDN che differisce tra gestione temporanea e produzione senza build compatibili con l'ambiente.
Supponendo che WordPress, Shopify o Webflow risolveranno magicamente un caricamento di origine a bassa risoluzione. Immondizia dentro, spazzatura fuori di ogni dimensione.