Generatore di Asset Favicon

Genera un pacchetto completo di favicon — ICO, PNG, icona Apple touch, icone PWA, web manifest e snippet HTML — localmente nel tuo browser.

Immagine sorgente
Trascina o seleziona un file PNG, JPEG, WebP o SVG. Ogni piattaforma utilizza questa immagine a meno che non venga sovrascritta qui sotto.
Informazioni sito
Utilizzate dal manifest, dall'apple-touch-icon e dallo snippet HTML.

Mostrato quando il nome dell'app è troppo lungo per la superficie.

Opzionale. Omessa dal manifest se vuota.

Dove si apre la PWA installata.

Prefisso applicato a ogni href nello snippet HTML e a ogni src nell'array delle icone del manifest.

Controlla theme_color del manifest e il tag HTML <meta name="theme-color">.

background_color del manifest. Utilizzato dai browser per disegnare le splash screen delle PWA.

Favicon browser desktop
Controlla favicon.ico, favicon-16x16.png, favicon-32x32.png e (quando la sorgente è SVG) favicon.svg.

Spazio visivo di respiro intorno alla sorgente all'interno dell'icona.

Scheda browser desktop
Scheda browser desktop (dark)
Risultato motore di ricerca
Web clip iOS
Controlla il file apple-touch-icon.png 180×180 utilizzato nelle schermate Home di iOS.

Le icone Apple devono essere opache, quindi questo riempimento viene sempre applicato.

Spazio visivo di respiro intorno alla sorgente all'interno dell'icona.

Schermata Home iOS
Icone PWA
Controlla pwa-192x192.png, pwa-512x512.png e le varianti maskable.

Spazio visivo di respiro intorno alla sorgente all'interno dell'icona.

L'area sicura raccomandata dal W3C è 40%. Il contenuto della sorgente rimane visibile all'interno di qualsiasi maschera della piattaforma.

Barra delle applicazioni Windows
Launcher Android
Pacchetto generato
Clicca su Genera per renderizzare ogni asset, costruire lo zip e copiare lo snippet HTML.
Nessun pacchetto ancora
Scegli un'immagine e clicca su Genera per assemblare il pacchetto di favicon.

Cosa genera lo strumento

Questo generatore trasforma una singola immagine in un bundle di favicon completo e moderno: un .ico multi-dimensione per i browser legacy, le varianti PNG da 16 / 32 / 180 / 192 / 512, un .svg originale opzionale, un site.webmanifest per le PWA e lo snippet HTML da incollare in <head>. Ogni byte viene prodotto nel tuo browser; nessun upload, nessun server, nessuna analitica.

Cosa contiene il bundle

  • favicon.ico — multi-immagine (16 / 32 / 48) per le schede del browser, i preferiti e i vecchi collegamenti di Windows.
  • favicon-16x16.png e favicon-32x32.png — varianti PNG moderne usate dai browser attuali.
  • favicon.svg — incluso solo quando l’immagine sorgente è in formato SVG ed è attivo l’interruttore “Usa SVG originale”.
  • apple-touch-icon.png — 180×180, opaca, usata dalle schermate Home di iOS.
  • pwa-192x192.png e pwa-512x512.png — le icone PWA standard.
  • pwa-maskable-192x192.png e pwa-maskable-512x512.png — varianti maskable con l’area sicura raccomandata dal W3C.
  • site.webmanifest — il manifest PWA collegato alle icone sopra elencate.

Come funzionano padding, sfondo e zone sicure maskable

Ogni piattaforma ha il proprio padding (“Margine”) così puoi lasciare spazio di respiro all’interno del canvas dell’icona. L’interruttore “Aggiungi sfondo” dipinge un quadrato opaco dietro la sorgente: utile quando la sorgente è trasparente e la destinazione richiede opacità (la schermata Home di Apple) oppure semplicemente per contrasto visivo in una scheda del browser. Le icone PWA maskable usano una zona sicura aggiuntiva sopra al margine della piattaforma: tutto ciò che si trova al di fuori del ~80% centrale può essere ritagliato da Android, Windows o ChromeOS quando applicano una maschera circolare, arrotondata o a squircle.

Collegare il bundle al tuo sito

  1. Estrai l’archivio scaricato nella radice del tuo sito web (in modo che i file si trovino in /favicon.ico, /site.webmanifest, ecc.).
  2. Incolla lo snippet HTML nel <head> del tuo sito.
  3. Se servi gli asset da un sotto-percorso (ad esempio /static/icons/), imposta “Percorso degli asset” prima di generare, in modo che lo snippet e il manifest usino gli URL corretti.
  4. Se hai personalizzato il manifest oltre a quanto questo strumento espone (ad esempio per aggiungere categories o screenshots), apri site.webmanifest in un editor di testo e modificalo direttamente: è semplice JSON.