Generatore di favicon
Crea un pacchetto favicon completo da SVG, PNG o JPG
Trasforma un logo SVG, PNG o JPG in favicon.ico, PNG per browser, icona Apple Touch, icone Android Chrome, site.webmanifest e tag HTML pronti da incollare. Scarica l’intero pacchetto come ZIP, generato in modo privato nel browser.
Modifica dei valori predefiniti per i nuovi file
Aggiungi un logo per vederlo in tutte le dimensioni del favicon.
Output
head-tags.html
<link rel="icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Metti tutti i file tranne index.html nella cartella da cui viene servito il tuo sito, poi incolla questi tag nell'head di ogni pagina.
Nessun file ancora. Trascina file sopra o clicca SELEZIONA FILE.
Che cos'è un favicon?
Un favicon è la piccola icona che il browser mostra accanto al titolo di una pagina: nella scheda, nei segnalibri, nella cronologia e nei risultati di alcuni motori di ricerca. È nato come un singolo favicon.ico da 16 × 16 nella radice del sito. Oggi lo stesso compito è svolto da un insieme di file di dimensioni diverse, perché una scheda del browser, un collegamento nella schermata Home e un prompt di installazione disegnano l'icona a scale molto diverse.
Perché un pacchetto favicon invece di un solo file
Un singolo favicon.ico funziona ancora, ma da solo non basta più. Le schede del browser leggono dal .ico la voce da 16 o 32 px, Safari chiede un apple-touch-icon da 180 px quando una pagina viene aggiunta alla Home Screen e Android Chrome legge da un web manifest i PNG da 192 e 512 px per il suo prompt di installazione e per la schermata di avvio. Esportarli uno alla volta significa sei esportazioni, sei occasioni per ritagliare qualcosa in modo diverso e un manifest scritto a mano. Generarli da un'unica sorgente mantiene identiche tutte le dimensioni e richiede un solo trascinamento.
Come generare un pacchetto favicon
- 1
Trascina il tuo logo, o clicca SELEZIONA FILE, per aggiungerlo. Funzionano SVG, PNG, JPG, WebP, GIF, BMP, AVIF e TIFF, fino a 40 alla volta.
- 2
Imposta lo sfondo, il raggio degli angoli, il padding, la scala e l'allineamento, poi scrivi il nome dell'app e il nome breve che finiscono nel manifest. Ogni dimensione viene ridisegnata mentre li modifichi.
- 3
Clicca SALVA TUTTO per scaricare favicon-package.zip, poi incolla i quattro tag link della scheda Tag HTML nell'head di ogni pagina.
Privacy: i tuoi file non escono dal browser
La conversione viene eseguita localmente nel tuo browser utilizzando JavaScript e WebAssembly. Non è previsto il caricamento di file o la conversione lato server, quindi i file che aggiungi rimangono sul tuo dispositivo.
L'elaborazione locale aiuta a proteggere i loghi riservati, i documenti interni e le opere d'arte inedite dei clienti. Le pagine e il codice di conversione vengono memorizzati nella cache mentre li utilizzi, quindi gli strumenti che hai già aperto possono continuare a funzionare senza una connessione di rete.
Domande frequenti
Quali file ottengo e dove vanno messi?
favicon.ico (con 16, 32 e 48 px dentro un unico file), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest e un index.html che contiene i tag. Copia tutto tranne index.html nella cartella da cui viene servito il tuo sito, poi incolla i quattro tag link nell'head di ogni pagina.
Posso usare un logo PNG o JPG invece di un SVG?
Sì. Funzionano SVG, PNG, JPG, WebP, GIF, BMP, AVIF e TIFF. Un SVG resta comunque la sorgente migliore, perché ogni dimensione viene disegnata dai vettori invece che ricampionata. Un logo raster più piccolo di 512 px viene ingrandito per le icone più grandi e apparirà sfocato; la riga del file te lo segnala quando succede.
Serve ancora favicon.ico se pubblico icone PNG?
Tienilo. È il file che browser e crawler richiedono dalla radice del sito quando nessun tag li indirizza altrove, ed è l'unico che porta più dimensioni in un solo file. Le voci PNG coprono i browser che le preferiscono e il manifest copre il prompt di installazione di Android.