Come si usa
- Trascina un file .ico nell’area di rilascio, fai clic per sceglierne uno oppure incolla un’immagine.
- Lascia Converti in su Mantieni originale, così tutte le dimensioni memorizzate nell’icona restano nell’output.
- Controlla la dimensione codificata: un’icona con molte dimensioni può pesare più di quanto ti aspetti.
- Copia il data URI per il tag link della favicon, oppure copia l’output come tag img, CSS o Markdown.
Il formato ICO
ICO è il formato delle icone di Windows e il formato originale delle favicon. Si tratta di un contenitore: una breve directory elenca una o più immagini con larghezza, altezza e profondità di colore, e ogni immagine è memorizzata come dati bitmap oppure, per le dimensioni grandi come 256 per 256, come PNG incorporato. Un tipico favicon.ico contiene le versioni da 16, 32 e 48 pixel, così il browser può scegliere quella più nitida.
Il tipo MIME registrato è image/vnd.microsoft.icon, ma image/x-icon è molto più diffuso e i browser accettano entrambi. I dati ICO in Base64 iniziano con AAABAA, cioè l’intestazione del file codificata.
Una favicon come data URI
<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBA...">Incorporare la favicon è comodo per i documenti HTML in un unico file, come report esportati, dashboard salvate su disco e documentazione offline, e per prototipi o strumenti interni in cui non vuoi pubblicare un file separato. Su un sito web con molte pagine un normale /favicon.ico di solito è preferibile: viene scaricato una volta sola e messo in cache, mentre un data URI viene ripetuto in ogni risposta HTML.
Se non vuoi alcuna icona, <link rel="icon" href="data:,"> impedisce al browser di richiedere /favicon.ico.
Favicon ICO, PNG o SVG
I browser attuali accettano anche favicon PNG e SVG, per esempio <link rel="icon" type="image/png" href="data:image/png;base64,...">. Un singolo PNG da 32 per 32 è spesso più piccolo di un ICO con più dimensioni; in questi casi usa PNG in Base64 o SVG in Base64.
Convertire qui un ICO in PNG, JPEG o WebP mantiene una sola immagine, quella che il browser sceglie di visualizzare. Per fare il percorso inverso e creare un file ICO, codifica un PNG e incolla il risultato in Base64 in ICO, che genera icone da 16 a 256 pixel.
Domande frequenti
Devo usare image/x-icon o image/vnd.microsoft.icon?
image/vnd.microsoft.icon è il tipo registrato ufficialmente, mentre image/x-icon è quello usato dalla maggior parte dei siti. Se un sistema ne richiede uno in particolare, modifica il prefisso dopo averlo copiato.Tutte le dimensioni dell’icona restano nell’output Base64?
Sì, se mantieni il formato originale. Viene codificato l’intero file, quindi il browser può ancora scegliere la dimensione che gli serve. La conversione in un altro formato mantiene una sola immagine.
Le favicon in formato data URI funzionano in tutti i browser?
I browser desktop attuali le mostrano nella scheda. Segnalibri, collegamenti nella schermata Home e alcuni browser più vecchi possono ignorare un’icona incorporata, quindi i siti pubblici dovrebbero comunque fornire un file favicon.