Generatore di favicon

Genera favicon in tutte le dimensioni (da 16x16 a 512x512). Esportazione multiformato (ICO, PNG, SVG).

Brand Kit Wizard

1
Logo
2
Colors
3
Favicon
4
Slogan
5
Website

91,284+ favicons generated and counting

Live Preview

512px
16px
32px
48px
180px
My Website

Download

Got your favicon? Build the website to match.

How It Works

1

Upload or Design

Upload an image or create a design from scratch with text and colors.

2

Preview All Sizes

See your favicon at 16x16, 32x32, 180x180, and 512x512 instantly.

3

Export & Use

Download as ICO, PNG, or SVG and add to your website in seconds.

Why Every Website Needs a Favicon

A favicon is the small icon displayed in browser tabs, bookmarks, and search results. It helps users quickly identify your site among dozens of open tabs and builds brand recognition.

Without a favicon, your site shows a generic browser icon, which looks unfinished and reduces trust. Adding one takes seconds and makes a lasting impression.

Supported Formats & Sizes

ICO

Classic format supported by all browsers. Includes multiple sizes in one file.

PNG

High-quality raster format. Perfect for modern browsers and Apple Touch icons.

SVG

Scalable vector format. Crisp at any size, ideal for retina displays.

Domande Frequenti

Che dimensione dovrebbe avere una favicon?+
Le dimensioni standard sono 16x16 e 32x32 pixel per le schede del browser, 180x180 per le icone Apple Touch e 512x512 per i manifest PWA. Il nostro generatore esporta tutte le dimensioni in una volta sola, così non ne perdi nemmeno una.
Qual è il formato file migliore per le favicon?+
ICO è il formato più universalmente compatibile, supportato da ogni browser incluse le versioni legacy di Internet Explorer. Per i browser moderni, PNG funziona ottimamente ed è più leggero. SVG è ideale se vuoi un singolo file che si scala perfettamente a qualsiasi dimensione e supporta le media query CSS.
Come aggiungo una favicon al mio sito web?+
Inserisci il file favicon nella directory root del tuo sito e aggiungi un tag <link> nell'<head> HTML: <link rel="icon" href="/favicon.ico">. Per PNG, usa type="image/png". Per le icone Apple Touch, usa <link rel="apple-touch-icon" href="/apple-touch-icon.png">.
Posso usare uno sfondo trasparente?+
Sì. I formati PNG e SVG supportano completamente la trasparenza. Anche i file ICO possono contenere icone trasparenti. Il nostro generatore preserva qualsiasi trasparenza nell'immagine caricata, ottimo per loghi e icone visualizzati su sfondi variabili.
Devo registrarmi per usare questo strumento?+
No. Questo generatore di favicon è completamente gratuito senza necessità di registrazione. Genera e scarica quante favicon vuoi, senza watermark o limiti giornalieri.
Qual è la differenza tra favicon.ico e favicon.png?+
Favicon.ico è un formato contenitore che può contenere più dimensioni di immagine (16x16, 32x32, 48x48) in un singolo file. PNG è un formato immagine standard che contiene una dimensione per file. I browser moderni supportano entrambi, ma ICO è necessario per la piena compatibilità con i browser più vecchi. La best practice è includere entrambi.
Come creo una favicon per iOS (Apple Touch Icon)?+
iOS richiede un'immagine PNG 180x180 chiamata icona Apple Touch. Aggiungila con <link rel="apple-touch-icon" href="/apple-touch-icon.png"> nell'head HTML. A differenza delle favicon normali, le icone Apple Touch non dovrebbero avere trasparenza — iOS le mostra con angoli arrotondati sulla schermata home.
Le favicon supportano la modalità scura?+
Sì, le favicon SVG possono adattarsi alla modalità scura usando media query CSS all'interno del file SVG. Puoi usare @media (prefers-color-scheme: dark) per cambiare i colori di riempimento. Le favicon PNG e ICO non possono cambiare dinamicamente, quindi scegli colori che funzionano sia su chrome del browser chiaro che scuro.
Di quali dimensioni favicon ha bisogno una PWA?+
Le Progressive Web App necessitano di icone almeno 192x192 e 512x512 pixel, referenziate nel manifest dell'app web (manifest.json). Queste vengono usate per lo splash screen di installazione, il cassetto delle app e l'icona della schermata home. Il nostro generatore esporta entrambe le dimensioni pronte all'uso.
Le favicon SVG funzionano in tutti i browser?+
Le favicon SVG sono supportate in Chrome, Firefox, Edge e Opera. Safari ha aggiunto il supporto dalla versione 15+. Per una copertura completa dei browser, includi una favicon ICO o PNG di fallback insieme al tuo SVG. Usa <link rel="icon" href="/favicon.svg" type="image/svg+xml"> seguito da <link rel="icon" href="/favicon.ico">.

Confronto Generatori di Favicon

FunzionalitàKleapFavicon.ioRealFaviconGeneratorCanva
PrezzoGratuitoGratuitoGratuitoGratuito / $13/mese
Tutte le dimensioni (16-512px)SìSìSìLimitato
Esportazione SVGSìNoNoSolo Pro
Icone manifest PWASìNoSìNo
Adattivo alla modalità scuraSì (SVG)NoNoNo
Builder sito web inclusoSì (con AI)NoNoBase

Le Persone Chiedono Anche

Una favicon è uguale a un logo?+
No. Un logo è il tuo marchio brand completo usato in tutti i materiali di marketing, mentre una favicon è una piccola icona (solitamente 16x16 o 32x32 pixel) mostrata nelle schede del browser e nei segnalibri. Molti brand semplificano il loro logo in una favicon — usando solo un'iniziale, un simbolo o un'icona che rimane riconoscibile nelle dimensioni ridotte.
Una favicon influisce sulla SEO?+
Una favicon in sé non è un fattore di ranking diretto, ma aiuta indirettamente la SEO. Google mostra le favicon nei risultati di ricerca mobile, e un'icona riconoscibile aumenta i tassi di click-through. I siti senza favicon sembrano meno affidabili, il che può aumentare i tassi di rimbalzo — un segnale che i motori di ricerca monitorano.
Con quale frequenza dovrei aggiornare la mia favicon?+
Aggiorna la favicon solo quando effettui un rebranding o cambi significativamente la tua identità visiva. Le favicon vengono memorizzate pesantemente nella cache dai browser (a volte per settimane), quindi i cambiamenti frequenti potrebbero non essere visti dai visitatori abituali. Se devi aggiornare, cambia il nome del file o aggiungi una query string di versione per invalidare la cache.
Posso usare un emoji come favicon?+
Sì, con le favicon SVG puoi incorporare direttamente un emoji: <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>&#x1F680;</text></svg>">. È ottimo per prototipi rapidi ma non consigliato per siti in produzione poiché manca di riconoscimento del brand.
Perché la mia favicon non si mostra?+
Le cause più comuni sono: percorso del file errato nel tag link, cache aggressiva del browser (prova un hard-refresh con Ctrl+Shift+R), la favicon non nella directory root, o un'intestazione Content-Type mancante sul server. Verifica anche che il tuo favicon.ico sia un file ICO valido e non solo un PNG rinominato.

Come Aggiungere una Favicon al Tuo Sito Web

Aggiungere una favicon richiede solo pochi minuti. Segui questi quattro passaggi per far mostrare la tua icona nelle schede del browser, nei segnalibri e nelle schermate home mobile.

Passaggio 1: Genera i file favicon

Usa il Kleap Favicon Generator qui sopra per creare tutte le dimensioni di cui hai bisogno. Carica il tuo logo o design, visualizzalo in anteprima a dimensioni diverse e scarica il pacchetto favicon completo inclusi i file ICO, PNG e SVG.

Passaggio 2: Posiziona i file nella directory root

Carica favicon.ico, favicon.png (32x32), apple-touch-icon.png (180x180) e le tue icone 192x192 + 512x512 nella cartella root del tuo sito web. La maggior parte dei browser cerca /favicon.ico per impostazione predefinita.

Passaggio 3: Aggiungi i tag link all'head HTML

Aggiungi questi tag all'interno di <head>: <link rel="icon" href="/favicon.ico" sizes="any">, <link rel="icon" href="/favicon.svg" type="image/svg+xml">, e <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Questo copre tutti i browser e i dispositivi.

Passaggio 4: Aggiorna il manifest dell'app web

Se hai una PWA o vuoi il supporto all'installazione, aggiungi le voci delle icone al tuo manifest.json: {"icons": [{"src": "/icon-192.png", "sizes": "192x192"}, {"src": "/icon-512.png", "sizes": "512x512"}]}. Questo assicura che la tua app appaia ottimale sulle schermate home mobile e nei cassetti delle app.

Build your full website with AI

Got your favicon? Now create the website to go with it. Kleap builds professional sites in minutes.

Start Building Free

Related Free Tools

Business Name GeneratorColor Palette GeneratorSlogan Generator
Generatore di favicon - Strumento gratuito online | Kleap