Generatore di favicon online: ICO, PNG e manifest

Q: Che dimensione deve avere una favicon?

Il favicon.ico contiene 16, 32 e 48 px. Servono anche un PNG da 180 px per iPhone e altri da 192 e 512 px per Android. Questo strumento li genera tutti.

Q: Perché la mia favicon non si aggiorna?

I browser la tengono in cache a lungo. Aggiungi ?v=2 al link, oppure apri il sito in una finestra privata per controllare quella nuova.

Q: Perché l’icona dell’iPhone ha lo sfondo?

Perché iOS non supporta la trasparenza in apple-touch-icon e dipingerebbe lo sfondo di nero. Lo strumento usa il tuo colore di sfondo, o il bianco se hai scelto lo sfondo trasparente.

Quali file servono oggi a un sito

Non servono più venti dimensioni. Con questi cinque file sei a posto in tutti i browser, nella schermata home del telefono e nelle ricerche di Google:

favicon.ico con 16, 32 e 48 px all’interno: lo chiedono i browser vecchi, i lettori RSS e Google, che lo cerca nella radice anche se non lo colleghi.
icon.svg: un solo file vettoriale nitido a qualsiasi dimensione. Viene generato solo in modalità testo.
apple-touch-icon.png da 180 px, per la schermata home dell’iPhone. È senza trasparenza, perché iOS riempie lo sfondo di nero.
icon-192.png e icon-512.png, collegate dal site.webmanifest per Android e le web app installabili.

Come installarla

Scarica lo ZIP, copia i file nella radice del sito (dove si trova index.html) e incolla l’HTML dentro l’<head>. Se cambi l’icona più avanti, il browser può metterci un po’ ad accorgersene perché la tiene in cache: rinominare il file o aggiungere ?v=2 al link risolve.

Consigli di design

A 16 px i dettagli non si leggono: una lettera, un simbolo o il tratto più riconoscibile del logo funzionano meglio del logo intero.
Controlla l’icona in entrambe le schede dell’anteprima: una favicon scura sparisce nel tema scuro del browser.
Ogni dimensione viene disegnata alla sua risoluzione reale, non ridotta da quella da 512, così quella da 16 px esce il più nitida possibile.

Una favicon provvisoria in una riga

Se ti serve solo qualcosa mentre impagini, il generatore di ximg.es serve già un’immagine quadrata con una lettera, senza scaricare niente:

<link rel="icon" href="https://ximg.es/32x32/2563eb/fff.png?text=X">

Domande frequenti

Che dimensione deve avere una favicon?

Il favicon.ico contiene 16, 32 e 48 px. Servono anche un PNG da 180 px per iPhone e altri da 192 e 512 px per Android. Questo strumento li genera tutti.

Serve favicon.ico se ho già l’SVG?

Sì. Safari e alcuni strumenti non usano ancora l’SVG, e Google e i lettori RSS chiedono direttamente /favicon.ico.

Le mie immagini vengono caricate su un server?

No. Le icone vengono disegnate con canvas nel tuo browser e anche lo ZIP viene creato lì.

Perché la mia favicon non si aggiorna?

I browser la tengono in cache a lungo. Aggiungi ?v=2 al link, oppure apri il sito in una finestra privata per controllare quella nuova.

Perché l’icona dell’iPhone ha lo sfondo?

Perché iOS non supporta la trasparenza in apple-touch-icon e dipingerebbe lo sfondo di nero. Lo strumento usa il tuo colore di sfondo, o il bianco se hai scelto lo sfondo trasparente.

Che cos’è il site.webmanifest?

Un JSON che descrive il tuo sito come app: nome, icone e colori. Android lo usa quando il sito viene aggiunto alla schermata home.

Generatore di favicon

HTML per l’<head>

Quali file servono oggi a un sito

Come installarla

Consigli di design

Una favicon provvisoria in una riga

Domande frequenti

Altri strumenti