WebyTooly

Generatore di favicon

Carica il tuo logo e scarica tutte le dimensioni di favicon che servono a un sito moderno, incluso il favicon.ico.

Espacio publicitario

Trascina qui il tuo logo o fai clic per sceglierlo

L'ideale è un'immagine quadrata da 512 × 512 px o più

Si applica solo se l'immagine ha zone trasparenti. Lascia su trasparente per conservare il canale alfa.

Espacio publicitario

Come vengono generate le favicon

Per prima cosa ritagliamo il quadrato centrato più grande della tua immagine, così un logo panoramico non viene schiacciato. Quel quadrato viene poi ridisegnato su una tela di ogni dimensione ed esportato in PNG.

lato del ritaglio = minimo(larghezza, altezza)

Il file favicon.ico è costruito con un codificatore ICO nostro: un'intestazione ICONDIR, una voce di directory per ogni dimensione e i PNG da 16, 32 e 48 px incorporati così come sono. Da Windows Vista il formato ICO accetta PNG al suo interno, e tutti i browser attuali li leggono.

Le dimensioni grandi non sono decorative: 180 px è l'icona che iOS usa quando si aggiunge il sito alla schermata iniziale, mentre 192 e 512 px sono quelle richieste dal manifest di una PWA.

Esempio pratico

Un logo da 1024 × 768 px viene ritagliato sul quadrato centrale di 768 × 768 px e da lì nascono i sei PNG e il .ico, tutti centrati e senza deformazioni.

Domande frequenti

Che dimensione deve avere l'immagine di partenza?
Più è grande meglio è: da 512 × 512 px in su tutte le dimensioni risultano nitide. Partendo da un'immagine piccola, quelle grandi appariranno sgranate.
Serve ancora il favicon.ico se ho già i PNG?
Resta consigliabile: alcuni browser e molti aggregatori lo richiedono per impostazione predefinita nella radice del dominio, senza leggere i tag HTML.
La trasparenza viene mantenuta?
Sì, a meno che tu non scelga un colore di sfondo. I PNG generati conservano il canale alfa e il .ico incorpora quegli stessi PNG a 32 bit.
Dove metto i file?
Il favicon.ico nella radice del sito e i PNG dove preferisci, richiamandoli con i tag link che mostriamo dopo la generazione.

Calcolatori correlati