Generatore di favicon

Cosa c'è in favicons.zip

Carica un'immagine e il generatore crea, nel tuo browser, tutti i file che servono a un sito moderno:

File	Dimensione	Usato da
favicon.ico	16, 32 e 48 px in un unico file	Schede, preferiti, Windows, qualsiasi strumento che cerchi /favicon.ico
favicon-16x16.png	16×16	Schede su schermi standard
favicon-32x32.png	32×32	Schede su schermi ad alta densità, collegamenti
favicon-48x48.png	48×48	Risultati di Google, collegamenti sul desktop
apple-touch-icon.png	180×180	"Aggiungi alla schermata Home" su iPhone e iPad
android-chrome-192x192.png	192×192	Schermata Home di Android
android-chrome-512x512.png	512×512	Siti installati come app (PWA) e schermata di avvio
site.webmanifest	—	Dice ad Android/Chrome dove sono le due icone grandi
README-favicon.html	—	I tag HTML da incollare

Quale immagine di partenza funziona meglio

• Quadrata, semplice, decisa. A 16 px hai 256 pixel in tutto. Un logo completo con slogan diventa una macchia; una lettera o un simbolo resta leggibile. Molti brand usano una versione semplificata solo per la favicon.
• Almeno 512×512. L'icona più grande è di 512 px, quindi un'immagine più piccola verrà ingrandita e risulterà morbida. L'ideale è un logo SVG, che viene renderizzato ad alta risoluzione prima di essere ridotto.
• PNG trasparente o SVG. La trasparenza resta nel .ico e nei PNG piccoli, così l'icona sta bene sia sui temi chiari sia su quelli scuri del browser.
• Non è quadrata? L'immagine viene inserita nel quadrato senza ritagli, con spazio trasparente ai lati. Se preferisci riempire il quadrato, ritagliala prima o crea una versione tonda con Ritaglio circolare.

Lo sfondo dell'icona Apple touch

iOS non ammette trasparenza nelle icone della schermata Home: le aree trasparenti diventano nere. Per questo apple-touch-icon.png (180×180) ha sempre uno sfondo pieno. È bianco di default; con il campo colore accanto all'area di caricamento puoi impostare il colore del tuo brand (il selettore colore può ricavarlo dal logo). Le altre dimensioni restano trasparenti.

Dove mettere i file

1. Estrai e carica tutti i file nella radice del sito, così che https://tuosito.it/favicon.ico apra l'icona.
2. Incolla i tag di README-favicon.html nell'<head> di ogni pagina (o nel template dell'intestazione del tema):

<link rel="icon" href="/favicon.ico" sizes="any">
<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">

3. Se il sito è in una sottocartella, adatta i percorsi.

In WordPress, Aspetto → Personalizza → Identità del sito → Icona del sito fa tutto con una sola immagine 512×512: usa android-chrome-512x512.png. Shopify, Wix e Squarespace hanno un campo "favicon" simile.

Il site.webmanifest incluso elenca solo le icone. Se vuoi che i visitatori possano installare il sito come app, aggiungi name, short_name, theme_color, background_color e "display": "standalone".

"Ho cambiato la favicon ma vedo ancora la vecchia"

Le favicon vengono memorizzate nella cache con più ostinazione di quasi ogni altra cosa.

• Apri direttamente https://tuosito.it/favicon.ico e ricarica forzando (Ctrl + F5, o Cmd + Maiusc + R su Mac).
• Aggiungi una versione ai link, per esempio href="/favicon.ico?v=2", così il browser la tratta come un file nuovo.
• Svuota la cache del CDN o del plugin di cache, se ne usi uno.
• Preferiti e collegamenti sulla schermata Home mantengono la vecchia icona finché non vengono ricreati.
• Google aggiorna l'icona nei risultati solo dopo aver rieseguito la scansione della tua home page, il che può richiedere giorni o settimane. Google vuole un'icona quadrata con lato multiplo di 48 px: il PNG 48×48 e il .ico lo soddisfano.

Strumenti collegati

• Togli lo sfondo da una foto prima di farne un'icona: Rimuovi sfondo.
• Hai il logo in WebP? Convertilo in PNG se il tuo programma non lo apre.
• Ti serve una semplice immagine 512×512 per un negozio o un profilo? Ridimensiona a 512×512.