Generatore favicon online

Creare una favicon per il tuo sito

La favicon è la piccola icona che compare nella scheda del browser, nei preferiti e a volte accanto al sito nei risultati di ricerca. Questo generatore favicon prepara tutti i file utili a partire da un'immagine, da qualche lettera o da un'emoji: una favicon.ico con tre dimensioni, i PNG, l'icona per la schermata Home dello smartphone, un file SVG quando è possibile e il manifest del sito. Ti dà anche il codice HTML. Tutto avviene sul tuo dispositivo: nessuna immagine viene inviata.

Serve per creare una favicon per il sito di una trattoria, di un B&B o di una palestra di quartiere.

Come si usa

1. In «Parti da:» scegli «Immagine», «Testo o iniziali» oppure «Emoji».
2. Con «Immagine», clicca su «Scegli un'immagine» (PNG, JPG, SVG o WebP). Con il testo, scrivi da 1 a 4 caratteri e regola «Carattere», «Spessore» e «Colore del testo».
3. Imposta la «Forma» (quadrata, arrotondata o rotonda), attiva o no «Sfondo colorato» e scegli «Colore di sfondo», «Margine» e «Dimensione del testo o dell'emoji».
4. Controlla le «Anteprime a grandezza reale» su sfondo chiaro e scuro.
5. Compila «Nome del sito», «Colore del tema», «Sfondo della schermata di avvio» e «Cartella dei file sul sito».
6. Clicca su «Scarica tutto (ZIP)» e poi su «Copia il codice» per prendere i tag HTML.

Quali dimensioni servono oggi

La favicon.ico resta per compatibilità: alcuni browser e programmi la cercano direttamente nella radice del sito, anche senza tag. Questa contiene tre immagini: 16, 32 e 48 px. I PNG da 16, 32 e 48 px servono ai browser recenti. L'icona da 180 × 180 px compare quando qualcuno aggiunge il sito alla schermata Home dello smartphone; è lo smartphone ad arrotondarne gli angoli. Le icone da 192 e 512 px sono dichiarate nel file site.webmanifest, insieme al nome e ai colori del sito, per installarlo come app. L'SVG (da testo o SVG) resta nitido a ogni dimensione.

Esempio: una foto da 1.200 × 800 px viene ritagliata in un quadrato di 800 × 800 px, togliendo 200 px a sinistra e 200 px a destra. Con un «Margine» del 10%, il disegno occupa 409,6 px nell'icona da 512 e 12,8 px in quella da 16.

Dove mettere i file e il codice HTML

Estrai lo ZIP e carica i file nella radice del sito, accanto alla home page: la favicon si trova così all'indirizzo /favicon.ico. Se li metti altrove, per esempio in /icone/, scrivi la cartella in «Cartella dei file sul sito»: codice e manifest vengono aggiornati. Poi incolla i tag nel <head> di ogni pagina.

Consigli di design

• Resta semplice: una lettera, due iniziali o un simbolo. Un logo completo a 16 px diventa una macchia.
• Verifica la leggibilità a 16 px nelle anteprime: è la dimensione della scheda.
• Cura il contrasto: uno sfondo colorato con testo bianco o molto scuro si vede sia sulle schede chiare sia su quelle scure.

Perché la nuova favicon tarda a comparire

I browser conservano la favicon in una cache separata, spesso per diversi giorni. Dopo averla cambiata, apri direttamente l'indirizzo /favicon.ico e ricaricalo, oppure svuota la cache del browser. Per forzare il cambio a tutti i visitatori, aggiungi ?v=2 alla fine di ogni indirizzo di file nel codice HTML. Nei risultati di ricerca la nuova favicon compare solo dopo il successivo passaggio del motore di ricerca sul sito.

Domande frequenti

Il file favicon.ico serve ancora?

Sì. Pesa pochissimo ed è utile ai browser più vecchi, ai lettori di feed e ai programmi che chiedono /favicon.ico senza leggere il codice della pagina.

Perché l'emoji ha un aspetto diverso sul mio smartphone?

L'emoji è disegnata dal carattere del dispositivo su cui crei l'icona. Creata su un altro sistema, la stessa emoji avrà un aspetto diverso.

La mia immagine è rettangolare: cosa succede?

Viene tenuto il centro e ritagliato a quadrato, accorciando allo stesso modo i lati lunghi. Metti il soggetto al centro.

Le impostazioni e l'immagine vengono salvate?

Le impostazioni restano su questo dispositivo per la prossima visita. L'immagine invece non viene né inviata né salvata.