Generatore Favicon: Guida completa alle icone browser

Crea favicon che funzionano ovunque: schede browser, segnalibri, schermate home e launcher PWA.

5 min di lettura Immagine · HTML · PWA 6 sezioni + FAQ

La favicon è il primo elemento brandizzato che gli utenti vedono in una scheda del browser. Una favicon mancante o sfocata segnala un sito non finito — ma fare bene le favicon nel 2025 significa generare più dimensioni e formati, ognuno per una piattaforma o contesto diverso.

L'implementazione moderna della favicon va oltre un singolo file ICO 16×16. Hai bisogno di PNG per i browser standard, SVG per il rendering scalabile, e Apple touch icon per iOS. Questa guida copre ogni dimensione richiesta, i tag HTML per collegarle, e i principi di design per icone leggibili a dimensioni minuscole.

Cos'è una favicon

Una favicon (abbreviazione di "favorites icon") è una piccola immagine visualizzata dai browser nelle schede, nei segnalibri e negli elenchi della cronologia. Il nome deriva dalla funzione "Preferiti" di Internet Explorer nel 1999. Oggi le favicon appaiono in molti contesti: schede browser, barre degli indirizzi, segnalibri, liste di lettura, task manager e come icone della schermata home sui dispositivi mobili.

Tool gratuito Generatore Favicon Genera favicon in tutte le dimensioni richieste da qualsiasi immagine

Dimensioni richieste nel 2025

Il set moderno di favicon include: PNG 16×16 e 32×32 per le schede browser; PNG 48×48 per la barra delle applicazioni Windows; PNG 180×180 per Apple touch icon (schermata home iOS); PNG 192×192 e 512×512 per Android/PWA; una favicon SVG per i browser moderni; e un file ICO (contenente 16×16 e 32×32) per la compatibilità con i browser legacy.

ICO vs PNG vs SVG favicon

Il formato ICO è un contenitore che può contenere più dimensioni di immagine in un unico file — storicamente lo standard ma sempre più sostituito da PNG. Le favicon PNG sono ampiamente supportate, offrono trasparenza e sono più facili da generare. Le favicon SVG sono supportate da Chrome, Firefox e Edge moderni — si scalano perfettamente e possono adattarsi alla modalità scura/chiara tramite media query CSS.

Tool gratuito Convertitore SVG in PNG Converti file SVG in PNG a qualsiasi risoluzione

Tag HTML link per la favicon

Posiziona i tag link della favicon nell'head del tuo HTML. La configurazione moderna minimale: un tag rel="icon" che punta al tuo SVG o PNG, un tag rel="apple-touch-icon" per iOS, e un tag rel="manifest" per la PWA. Il file ICO nella root (/favicon.ico) viene prelevato automaticamente dai browser senza alcun tag HTML.

Apple touch icon e icone PWA

Quando gli utenti aggiungono il tuo sito alla schermata home iOS, Safari utilizza l'apple-touch-icon. La dimensione preferita è 180×180 pixel — non sono necessari angoli arrotondati poiché iOS li applica automaticamente. Per Android e le Progressive Web App, specifica le icone nel file manifest con almeno versioni PNG 192×192 e 512×512.

Consigli di design per icone piccole

Le favicon devono essere leggibili a 16×16 pixel — evita illustrazioni complesse. Usa una singola lettera in grassetto o una forma geometrica semplice. Assicura un alto contrasto tra l'icona e il tema del browser. Evita tratti sottili che scompaiono a dimensioni piccole. Testa la tua favicon sia nei temi browser chiari che scuri.

Tool gratuito Codificatore Immagine in Base64 Incorpora immagini come stringhe Base64 in HTML e CSS

Domande frequenti

Qual è la dimensione minima della favicon? +
Il minimo è 16×16 pixel, la dimensione mostrata nelle schede del browser. Tuttavia, le configurazioni moderne richiedono più dimensioni: 32×32 per display ad alta DPI, 180×180 per iOS, e 192×192 per PWA.
Posso usare un solo file favicon? +
Puoi usare una singola favicon SVG per i browser moderni, ma per la piena compatibilità hai bisogno di un file ICO per i browser legacy e file PNG per i dispositivi Apple.
La favicon influisce sulla SEO? +
Direttamente no — Google non usa le favicon come fattore di ranking. Indirettamente, una favicon professionale migliora il riconoscimento del brand e i tassi di click dai segnalibri e dai risultati di ricerca.
Come implemento il supporto alla modalità scura nella mia favicon? +
Le favicon SVG supportano la modalità scura tramite media query CSS all'interno del file SVG. Usa una media query prefers-color-scheme per passare tra varianti di icone chiare e scure.
Perché la mia favicon non si aggiorna dopo il deployment? +
Le favicon vengono memorizzate nella cache in modo aggressivo dai browser. Per forzare un aggiornamento, rinomina il file favicon e aggiorna il tag link HTML, o aggiungi una stringa query come ?v=2 all'URL della favicon.
Cos'è un'icona web app manifest? +
Le icone web app manifest sono definite nel file manifest.json del tuo sito e usate quando gli utenti installano la tua PWA sulla schermata home. Il manifest richiede almeno icone PNG 192×192 e 512×512.
La mia favicon dovrebbe avere uno sfondo trasparente? +
Dipende dal tema del browser. Le favicon trasparenti sembrano bene nei browser a tema scuro ma potrebbero essere invisibili su sfondi chiari. Un colore di sfondo solido è generalmente più sicuro per la compatibilità cross-browser.