Skip to content
user@convertitive:~$convertitive

Generatore di Favicon

Un'immagine quadrata in ingresso, un set completo di favicon in uscita. Nulla lascia il tuo browser.

Nel 2026 una configurazione moderna di favicon è un piccolo pacchetto, non un file solo: un classico favicon.ico per gli user agent più datati e i vecchi segnalibri, icone PNG a 16 e 32 pixel per le schede del browser, un apple-touch-iconda 180 px per le schermate Home di iOS e PNG da 192/512 px per il manifest della web app. La parte .ico è meno dolorosa di quanto sembri: da Windows Vista in poi, le voci della directory ICO possono contenere direttamente immagini codificate in PNG, quindi questo strumento renderizza la tua immagine a ciascuna dimensione su un canvas, codifica ogni versione come PNG e racchiude il trio 16/32/48 in un contenitore ICO che costa appena un’intestazione di 6 byte più 16 byte di directory per immagine — tutto lato client, senza che nulla venga caricato da nessuna parte.

Drop one image here (PNG, SVG, JPEG, WebP…), or

One file, up to 16 MB. A square 512×512+ source works best. Stays in your browser — nothing is uploaded.

How to use

  1. Rilascia un'immagine

    Trascina sulla zona di rilascio qualsiasi immagine che il tuo browser sappia decodificare — PNG, SVG, JPEG, WebP. Una sorgente quadrata di almeno 512×512 dà i risultati più nitidi; le immagini non quadrate vengono ritagliate automaticamente al centro.

  2. Controlla le anteprime alle dimensioni piccole

    Lo strumento renderizza la tua icona a 16, 32 e 48 pixel sia su uno sfondo a scacchi chiaro sia su uno scuro — esattamente le dimensioni usate dalle schede del browser. Se il design diventa illeggibile a 16 px, semplificalo prima di pubblicarlo.

  3. Scarica il set

    Prendi favicon.ico (che raggruppa le voci PNG a 16, 32 e 48 px in un unico file) più i PNG singoli: favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png a 180 px e icon-192/icon-512 per il tuo manifest.

  4. Copia i tag per l'head

    Copia lo snippet <link> già pronto nell'head del tuo HTML, metti i file nella radice del sito e referenzia icon-192.png e icon-512.png dall'array icons del manifest della tua web app.

Frequently asked questions

La mia immagine viene caricata su un server?
No. Decodifica, ritaglio centrale, ridimensionamento, codifica PNG e assemblaggio del contenitore ICO avvengono tutti nel tuo browser con l'API Canvas e semplice JavaScript. Non c'è alcuna richiesta di caricamento in nessun momento — Convertitive non vede mai la tua immagine.
Quali dimensioni contano davvero, e perché proprio queste?
16×16 e 32×32 coprono le schede del browser, le barre dei segnalibri e gli elenchi della cronologia su schermi standard e ad alta densità. 48×48 copre le scorciatoie ai siti di Windows e alcuni contesti desktop. 180×180 è ciò che gli iPhone e gli iPad attuali richiedono per le icone della schermata Home. 192×192 e 512×512 sono le due dimensioni previste dalla specifica del manifest delle web app e dal prompt di installazione di Android. Tutto il resto di cui i browser hanno bisogno lo ricavano ridimensionando una di queste.
Ho ancora bisogno di un file .ico nel 2026?
Sì, come rete di sicurezza. I browser e i crawler precedenti al supporto delle favicon PNG, i vecchi segnalibri che hanno fissato /favicon.ico nel codice e una lunga coda di lettori di feed, generatori di anteprime link e bot di monitoraggio richiedono ancora /favicon.ico alla radice del sito senza condizioni. Servire un file vero in quella posizione non costa nulla ed evita un flusso costante di 404 nei tuoi log.
Gli sfondi trasparenti vengono preservati?
Sì. Ogni output è codificato in PNG — comprese le voci all'interno del contenitore .ico — e il PNG supporta il canale alfa completo. Le anteprime a scacchi qui sopra esistono proprio per farti verificare come la tua icona trasparente si legge sia sui temi chiari sia su quelli scuri del browser, prima di adottarla.
Perché l'icona Apple touch è di 180 pixel?
180×180 è la dimensione che iOS richiede per le icone della schermata Home sui display Retina 3x (60 pt × 3). I dispositivi più vecchi che vogliono 152 o 167 pixel si limitano a ridimensionare il file da 180 px, quindi fornire l'unica dimensione più grande copre l'intera gamma Apple. Nota che iOS applica da sé la maschera con angoli arrotondati, quindi fornisci un quadrato a piena copertura — niente angoli pre-arrotondati.
E le favicon in formato SVG?
I browser desktop moderni accettano <link rel=“icon” type=“image/svg+xml”> ed è un'ottima aggiunta — un unico file nitido a qualsiasi dimensione, che può perfino adattarsi alla modalità scura con CSS incorporato. Ma il supporto di Safari è storicamente rimasto indietro e molti agenti non-browser lo ignorano, quindi il set PNG più ICO resta la base sicura. Fornisci l'SVG come <link> aggiuntivo, non come sostituto.

About

Il contenitore ICO, e perché le voci PNG funzionano

Un file .ico è uno dei formati contenitore più semplici ancora in uso quotidiano: un'intestazione ICONDIR di 6 byte (parola riservata, tipo 1 per le icone, numero di voci), poi una ICONDIRENTRY di 16 byte per ciascuna immagine che ne registra larghezza e altezza (come singoli byte, dove 0 significa 256), profondità di bit, lunghezza in byte e offset, seguita dai dati grezzi delle immagini uno dietro l'altro. In origine quei dati dovevano essere un BMP senza intestazione con una maschera di trasparenza AND; da Windows Vista, i dati possono invece essere un flusso PNG completo, che il sistema operativo riconosce dai byte della sua firma. È proprio quel cambiamento a rendere possibile un generatore lato client così piccolo — l'encoder PNG di canvas.toBlob del browser fa il lavoro sui pixel, e lo strato ICO è solo 6 + 16×n byte di contabilità little-endian scritta con una DataView.

Come i browser scelgono la sorgente della favicon

Quando sono dichiarati più link a icone, i browser scelgono in base al tipo di rel e all'attributo sizes: una scheda su un display 2x vuole 32 px, quindi un <link rel=“icon” sizes=“32x32”> vince su uno da 16 px; se nulla di dichiarato corrisponde, la maggior parte dei browser ripiega richiedendo /favicon.ico dalla radice del sito anche in assenza di tag link. I dispositivi Apple ignorano del tutto rel=“icon” per le icone della schermata Home e cercano rel=“apple-touch-icon” (ripiegando su /apple-touch-icon.png alla radice). Le web app installabili non leggono né l'uno né l'altro — prendono le voci da 192 e 512 px dall'array icons del manifest. Questa suddivisione — tag link per le schede, apple-touch-icon per iOS, manifest per le installazioni — è il motivo per cui un set completo ha tre meccanismi di consegna invece di uno.

Sources & references

Authoritative references behind the math, constants, and tables on this page. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.