Generatore di favicon
Non pubblicare il sito con l'icona predefinita nella scheda. Carica un'immagine ed esporta il set di favicon previsto da browser, iOS, Android e PWA.
Carica un'immagine
PNG, JPG e SVG supportati. Una sorgente 512x512 o superiore funziona meglio.
Anteprima dal vivo
Frammento HTML
<!-- Add inside <head> --> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Best practice per Favicon
Perché più dimensioni contano
Browser, segnalibri, schede aggiunte, istruzioni di installazione e scorciatoie mobili richiedono tutti dimensioni diverse. Un set completo mantiene l'icona nitida invece di consentire alle piattaforme di eseguire l'upscaling di un file di piccole dimensioni.
PNG contro ICO
I browser moderni gestiscono bene le icone PNG. ICO resta utile per la compatibilità legacy, mentre PNG di solito offre trasparenza migliore e gestione degli asset più semplice.
Design per piccole dimensioni
Una favicon viene spesso vista a 16x16. Forme semplici, contrasto forte e pochi dettagli funzionano meglio di un logo completo compresso in una scheda.
Guida alle icone della piattaforma
Browser desktop
Utilizzato per schede, segnalibri ed elenchi di cronologia del browser.
iOS/iPhone
Usato quando il sito viene aggiunto alla schermata principale. Immagini opache e pulite di solito funzionano meglio.
Android Chrome
Usato insieme a un web manifest per richieste di installazione, schermate iniziali e switcher delle app.
Guida di installazione rapida
Scarica ed estrai
Usa il pulsante di download per esportare un file zip con asset PNG, file manifest e snippet head.
Carica nella cartella public
Posiziona i file estratti dove sono accessibili pubblicamente, per esempio nella directory public del sito.
Aggiungi il markup head
Copia lo snippet head generato nell'head del documento e svuota la cache del browser per verificare le nuove icone.
Domande frequenti
Cosa è incluso nel file zip?
Il file zip contiene PNG comuni per favicon del browser, Apple touch icon, dimensioni per icone Android e un file site.webmanifest.
Cos'è site.webmanifest?
È un manifest JSON che indica ai browser come dovrebbe comportarsi il sito quando installato su una schermata iniziale o avviato come un'app.
Come utilizzo queste icone?
Carica i file generati nella cartella public e includi il markup head generato nelle pagine che devono esporre la favicon.
Perché la mia vecchia favicon è ancora visibile?
I browser memorizzano nella cache le favicon in modo aggressivo. Prova un aggiornamento completo, cancella i dati del sito, modifica l'icona URL o esegui un test in un nuovo profilo del browser.
La favicon dovrebbe corrispondere esattamente all'icona dell'app?
Dovrebbe sembrare correlata, ma non deve essere identica. Molti brand usano un segno semplificato per le favicon e un'icona più ricca per le app installate.