Porta la tua identità.
Carica il tuo logo o crea un'icona da una lettera. Forme semplici, contrasto deciso e una tela quadrata sono il tuo miglior punto di partenza.
Vero Generatore di Favicon Online Gratuito
Generatore di favicon gratuito online. Carica un'immagine e scarica un kit di icone completo — favicon.ico, icone PNG, icona Apple touch e web manifest — pronto per schede del browser, segnalibri e schermate iniziali Android e iOS.
Un'immagine quadrata, 512 x 512 px o più grande, funziona meglio.
Mantienilo semplice. Una singola lettera risalta nelle dimensioni piccole.
- Andale Mono
- Arial
- Arial Black
- Arial Narrow
- Baskerville
- Bookman
- Bradley Hand
- Brush Script
- Calibri
- Candara
- Century Gothic
- Chalkboard
- Comic Sans
- Consolas
- Copperplate
- Courier New
- Didot
- Franklin Gothic
- Futura
- Garamond
- Georgia
- Gill Sans
- Helvetica Neue
- Impact
- Inter
- JetBrains Mono
- Marker Felt
- Menlo
- Nunito
- Optima
- Palatino
- Papyrus
- Rockwell
- Segoe UI
- System UI
- Tahoma
- Times New Roman
- Trattatello
- Trebuchet MS
- Verdana
La disponibilità dei caratteri dipende dal tuo dispositivo.
Da bordo a bordoSpazio per respirare
QuadratoCerchio
Impostazioni app e installazione
Percorso relativo alla radice, come / o /icons/.
#FFFFFF
512 PX
SCHEDA DEL BROWSER
Il mio sito web
iltuosito-web.com
SCHERMATA INIZIALE
Il mio sito web
PIXEL PERFETTI?
Confronta le dimensioni piccole.
16px
32px
48px
64px
Contenuto del tuo download
9 filefavicon.icoClassic browser support
16, 32, 48 pxfavicon-16x16.pngBrowser tabs
16 x 16favicon-32x32.pngHigh-density tabs
32 x 32favicon-48x48.pngSearch & shortcuts
48 x 48apple-touch-icon.pngiPhone & iPad
180 x 180android-chrome-192x192.pngAndroid home screen
192 x 192android-chrome-512x512.pngLarge app icon
512 x 512site.webmanifestWeb app metadata
JSONINSTALL.txtInstallation guide
TXTCodice HTML
HTMLCarica i tuoi file, poi aggiungi questo nel <head> del tuo sito web. I percorsi si aggiornano con le tue impostazioni.
DALL'UPLOAD OVUNQUE
Come funziona
Salta il ridimensionamento manuale e le congetture sul formato.
Passa dalla tua idea a un sito riconoscibile in tre passaggi.
Perfeziona i dettagli.
Scegli uno sfondo, regola la spaziatura e controlla le anteprime dal vivo. Assicurati che il tuo marchio sia riconoscibile anche in una minuscola scheda del browser.
Dai una casa a ogni scheda.
Scarica il tuo kit completo, carica i file e incolla l'HTML. Il tuo marchio è pronto per schede del browser, segnalibri e schermate iniziali.
CREATO PER LE PICCOLE COSE
Funziona su browser e dispositivi
Una favicon è spesso la parte più piccola del tuo marchio. Dovrebbe comunque sembrare intenzionale. Genera le dimensioni giuste per i luoghi in cui le persone trovano, salvano e rivisitano il tuo sito.
Crea la tua faviconBrowser di tutti i giorniICO + PNG per schede, segnalibri e scorciatoie16-48 PX
Dispositivi AppleUn'icona dedicata e opaca per la schermata iniziale180 PX
Android e app webIcone ad alta risoluzione con un web manifest192 / 512
LA GUIDA DI DUE MINUTI
Installazione
Nessuna configurazione complicata.
Solo alcuni file nel posto giusto.
Scarica ed estrai il tuo kit di icone
Scegli la tua sorgente e regola l'anteprima, poi seleziona Scarica kit di favicon. Estrai lo ZIP per ottenere tutti e sette i file di icone, site.webmanifest e una guida all'installazione in testo semplice.
Metti i file dove il tuo sito può servirli
Carica le icone e il manifest nella radice pubblica del tuo sito. Se preferisci una sottocartella, imposta Cartella icone nelle impostazioni dell'app prima di scaricare. Ad esempio, /icons/ significa che i tuoi file devono essere disponibili su iltuosito.com/icons/.
Aggiungi l'HTML e controlla il tuo lavoro
Copia il codice generato nel <head> di ogni pagina o nel tuo layout condiviso. Rimuovi i vecchi tag di icone in conflitto. Apri direttamente le URL delle icone per verificare che vengano caricate, poi rivisita il tuo sito in una finestra privata per evitare icone in cache obsolete.
UN'ICONA MIGLIORE INIZIA QUI
Suggerimenti di design per favicon
Meno dettagli. Più carattere.
Linee sottili e parole lunghe scompaiono nelle dimensioni piccole. Usa un simbolo distintivo, un monogramma o una singola lettera invece di strizzare tutto il tuo logo in un quadrato.
Lasciale un po' di spazio.
Usa la spaziatura per tenere il tuo marchio lontano dai bordi. Anteprima sia una scheda del browser sia una schermata iniziale: la stessa immagine può sembrare molto diversa a ciascuna scala.
Fai contare il contrasto.
Le icone trasparenti possono sparire su un tema del browser chiaro o scuro. Uno sfondo solido ti offre un contrasto prevedibile. Controlla entrambi i temi prima di pubblicare.
Inizia con una sorgente nitida.
Un'immagine grande e pulita dà al generatore più dettagli con cui lavorare. Ingrandire un'immagine minuscola non può recuperare informazioni mancanti. Utilizza un SVG o una sorgente da 512 px quando possibile.
I DETTAGLI PIÙ FINI
Domande frequenti
Tutto il resto che potresti voler sapere sulla tua nuova favicon.
Cos'è una favicon e perché mi serve?
Una favicon è la piccola icona che rappresenta il tuo sito nelle schede del browser, nei segnalibri, nella cronologia e talvolta nei risultati di ricerca. Un'icona chiara e coerente aiuta i visitatori a riconoscere il tuo sito tra molte schede aperte. Le icone della schermata iniziale hanno uno scopo simile quando qualcuno salva il tuo sito su un telefono.
Quale immagine dovrei caricare?
Inizia con un PNG, SVG, JPEG o WebP quadrato, idealmente di almeno 512 x 512 pixel. I PNG trasparenti e gli SVG autonomi funzionano particolarmente bene. Mantieni il design semplice: un simbolo o un'iniziale è di solito più leggibile di un logo completo a 16 pixel. Sono supportati file fino a 10 MB e immagini fino a 4096 pixel per lato.
Questo strumento è gratuito? Le mie immagini vengono caricate?
Il generatore è gratuito, senza account né filigrana. La decodifica delle immagini, le anteprime e la creazione dello ZIP avvengono nel tuo browser. La tua immagine sorgente non viene caricata su un server. Il tuo browser potrebbe scaricare le risorse del sito alla prima visita, ma il generatore non invia la tua immagine da nessuna parte.
Perché le icone Apple e Android hanno uno sfondo?
Le icone della schermata iniziale rendono meglio su una tela quadrata solida. Questo strumento appiattisce questi export sul colore di sfondo che hai scelto, anche quando le icone trasparenti del browser sono abilitate. Il dispositivo applica il proprio trattamento degli angoli. Gli export Android usano lo scopo standard "any"; non sono icone maskable certificate.
Perché viene ancora mostrata la mia vecchia favicon?
I browser memorizzano nella cache le favicon in modo aggressivo. Prima verifica che ogni URL generata si apra direttamente e che la tua pagina abbia un solo insieme previsto di link alle icone. Poi prova una finestra privata o svuota la cache del sito. Per un aggiornamento affidabile, usa una nuova cartella come /icons-v2/ e aggiorna i link HTML. I motori di ricerca potrebbero impiegare più tempo a ricrawlare l'icona.
Il web manifest rende il mio sito una PWA?
No. Il manifest fornisce un nome app, colori e icone, ma non aggiunge funzionalità offline né un service worker. L'installabilità dipende dal tuo browser e dalla configurazione del sito, incluso HTTPS. Il manifest generato usa / come URL di partenza; modificalo se la tua app vive in una sottodirectory.
Posso usare questi file con WordPress, Shopify o Astro?
Sì. I file sono immagini PNG e ICO standard. In Astro, mettili in public/ e aggiungi i tag generati all'head del tuo layout condiviso. Per WordPress o Shopify, usa l'impostazione dell'icona del sito della piattaforma quando possibile, oppure carica i file e regola l'head del tuo tema. Le piattaforme ospitate possono controllare nomi di file e URL, quindi adatta i percorsi di conseguenza.