Generatore di favicon

Tutte le icone del tuo sito a partire dal tuo logo, pronte da caricare.

Altri strumenti: Da JPEG a JPG Comprimere JPG Comprimere PNG Comprimere WebP Ridimensionare immagine Ritagliare immagine Unire immagini

Scegli la tua immagine PNG, JPG, WebP o SVG

Un file alla volta, fino a 20 MB.

Adatta al quadrato

Adatta Immagine intera Riempi Taglia i lati

Le icone sono quadrate. Se la tua immagine non lo è, scegli se mostrarla intera (con margini trasparenti) o se deve riempire il quadrato.

Colore di sfondo

Per l’icona Apple, che non può essere trasparente, e come colore del tema su Android.

I tuoi file vengono eliminati automaticamente dopo la conversione, e al massimo un’ora dopo il caricamento. Come trattiamo i tuoi file

Crea la favicon completa del tuo sito a partire dal tuo logo: l’icona della scheda del browser, quelle della schermata Home di iPhone e Android, il manifest e il codice HTML per collegarle. Carica un’immagine PNG, JPG, WebP o SVG e scarica uno ZIP con tutto, senza registrazione e senza filigrana.

Come creare una favicon

Seleziona il tuo logo o la tua icona in PNG, JPG, WebP o SVG, meglio se quadrato e di almeno 512 pixel.
Scegli se l’immagine si vede intera o riempie il quadrato, e il colore di sfondo dell’icona Apple.
Fai clic su «Crea favicon» e scarica lo ZIP.
Metti i file nella radice del tuo sito e incolla il codice di head.html nel tag head delle tue pagine.

Cosa contiene il pacchetto

File	A cosa serve
`favicon.ico`	L’icona classica della scheda, con le dimensioni 16, 32 e 48 pixel in un solo file. I browser la cercano anche se non la colleghi.
`favicon-16x16.png` e `favicon-32x32.png`	Le icone della scheda e dei preferiti nei browser recenti.
`apple-touch-icon.png`	L’icona da 180 pixel che usano iPhone e iPad quando si aggiunge il tuo sito alla schermata Home.
`android-chrome-192x192.png` e `android-chrome-512x512.png`	Le icone di Android e delle app web installabili.
`site.webmanifest`	Il manifest che dichiara le icone Android e il colore del tuo sito.
`head.html`	I tag per collegare le icone dalle tue pagine.

Come installarla sul tuo sito

Decomprimi lo ZIP e metti tutti i file, tranne head.html, nella radice del tuo sito (dove si trova la home page).
Copia questi tag, che trovi anche in head.html, nel tag head delle tue pagine:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Se vuoi, scrivi il nome del tuo sito in name e short_name dentro site.webmanifest.

I browser tengono in cache la favicon: se non vedi subito quella nuova, ricarica la pagina forzando l’aggiornamento o aspetta un po’.

Adattare o riempire

Tutte le icone sono quadrate. Se la tua immagine non lo è, puoi adattarla, perché si veda intera con margini trasparenti, oppure riempire il quadrato, tagliando ciò che sporge ai lati. Per un logo orizzontale con testo, spesso conviene usare solo il simbolo del logo, ritagliato in quadrato.

L’icona Apple non può essere trasparente: iOS riempirebbe lo sfondo di nero. Per questo la creiamo con il colore di sfondo che scegli, usato anche come colore del tuo sito su Android. Le altre icone mantengono la trasparenza.

Consigli per un buon risultato

Parti da un’immagine grande, di almeno 512 × 512 pixel, o meglio ancora da un SVG: le icone piccole vengono calcolate a partire da lei.
Semplifica: a 16 pixel testi e dettagli fini non si leggono. Un simbolo o un’iniziale con colori contrastati funziona molto meglio.

Se ti serve solo il file .ico, puoi convertire il tuo PNG in ICO.

Limiti

Un’immagine alla volta, fino a 20 MB e 100 megapixel.
Non modifichiamo il tuo sito: devi caricare tu i file e aggiungere i tag, oppure chiederlo a chi lo gestisce.

Domande frequenti

Quanto deve essere grande l’immagine per creare una favicon?

Più è grande, meglio è: almeno 512 × 512 pixel, oppure un SVG. Tutte le icone, da 512 a 16 pixel, vengono calcolate a partire da lei.

Dove metto i file della favicon?

Nella radice del tuo sito, nella stessa cartella della home page. Poi incolla i tag di head.html nel tag head delle tue pagine.

Perché non vedo la nuova favicon nel browser?

Perché i browser tengono la favicon in cache. Ricarica la pagina forzando l’aggiornamento, aprila in una finestra di navigazione in incognito o aspetta un po’.

Perché l’icona Apple ha uno sfondo colorato?

Perché iOS non accetta la trasparenza nelle icone della schermata Home e riempirebbe lo sfondo di nero. La creiamo con il colore di sfondo che scegli perché si veda bene.

Posso creare la favicon del mio sito WordPress?

WordPress ha una sua opzione, l’«Icona del sito» (in Aspetto › Personalizza › Identità del sito o, secondo la versione e il tema, nelle impostazioni generali): carichi un’immagine quadrata e crea da solo le dimensioni. Il pacchetto di questo strumento è pensato per i siti in cui puoi caricare file e modificare il codice.