CodeKitHubChe cos'è questo strumento?
Un file favicon.ico non è solo una piccola immagine: è un formato contenitore in grado di racchiudere diverse dimensioni della stessa icona in un unico file, in modo che il browser, la barra delle applicazioni o la barra dei segnalibri possano scegliere la risoluzione più nitida per lo spazio in cui viene visualizzata. Rinominare un file PNG in favicon.ico non produce lo stesso risultato: si tratta di una singola immagine con un’estensione di file errata e, sebbene alcuni browser la tollerino, molti strumenti, crawler e browser meno recenti che leggono i byte grezzi si aspettano la vera struttura del contenitore ICO e non funzioneranno correttamente o visualizzeranno un’icona vuota.
Questo strumento crea un vero e proprio contenitore ICO: ridimensiona il tuo file SVG a 16×16, 32×32 e 48×48, codifica internamente ciascuna di esse come PNG e raggruppa tutte e tre in un unico file favicon.ico valido utilizzando lo stesso formato PNG-in-ICO supportato da tutti i browser e sistemi operativi a partire da Windows Vista. Inoltre, otterrai file PNG separati nelle dimensioni 180×180 (la dimensione utilizzata da iOS per l’icona quando un utente aggiunge il tuo sito alla schermata iniziale) e 192×192 / 512×512 (le dimensioni che Android e le richieste di installazione delle PWA ricavano dal manifesto della tua applicazione web).
Perché usarlo?
- Genera un file favicon.ico multirisoluzione realmente valido, non un file PNG rinominato.
- Copre in un unico passaggio tutte le dimensioni delle icone necessarie per un'implementazione reale: 16, 32, 180, 192, 512 px.
- Codice HTML pronto per l'incollaggio <head> — non occorre indovinare gli attributi rel, sizes e type.
- Gli SVG non quadrati vengono centrati su un quadrato trasparente anziché essere allungati.
- Tutto viene visualizzato localmente nel browser; il file SVG non viene mai caricato.
Come si usa
- Fai clic sulla casella oppure trascina il file SVG del tuo logo al suo interno.
- Lo strumento genera automaticamente la favicon in tutte le dimensioni, senza bisogno di configurare alcuna impostazione.
- Scarica il file favicon.ico nella directory principale del tuo sito, insieme alle singole icone in formato PNG.
- Copia il frammento di codice HTML e incollalo nel tag <head> della tua pagina.
Esempio
Input
logo.svg — a company mark, 3 KB vectorRisultato
favicon.ico (16/32/48px combined), plus favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.pngUn unico file SVG in entrata, tutti i file di icone necessari per una vera e propria implementazione in uscita.
In quali casi viene utilizzata quale dimensione dell'icona
| File | Dimensione | Utilizzato per |
|---|---|---|
| favicon.ico | 16/32/48 px (complessivamente) | Schede del browser, barra dei segnalibri, barra delle applicazioni |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Soluzione alternativa per i browser che preferiscono le favicon in formato PNG |
| apple-touch-icon.png | 180×180 | Icona sulla schermata Home di iOS quando il sito viene aggiunto alla schermata Home |
| Icona 192 | 192×192 | Icona sulla schermata iniziale di Android, manifesto dell'app web |
| Icona 512 | 512×512 | Richiesta di installazione della PWA, icona della schermata iniziale su Android |
Perché il codice sorgente SVG è importante
Poiché SVG memorizza le forme come dati matematici anziché come pixel, il rendering sia a 16px che a 512px parte esattamente dagli stessi dati del tracciato: non ci sono artefatti di upscaling alle dimensioni maggiori né approssimazioni forzate di allineamento ai pixel a cui lo strumento debba ricorrere alle dimensioni minori. Se disponi solo di un logo in formato PNG, questo strumento non può esserti d’aiuto; converti o ricrea prima il logo in formato SVG, poiché ingrandire un piccolo PNG fino a 512px produrrebbe semplicemente un risultato sfocato.
Domande frequenti
Perché non rinominare semplicemente un file PNG in favicon.ico?
Un file .ico ha un proprio formato contenitore binario (un’intestazione ICONDIR che descrive il numero di immagini contenute, seguita da una voce di directory per ciascuna immagine); un file PNG rinominato in .ico rimane semplicemente un PNG con un’estensione errata. La maggior parte dei browser moderni è tollerante e lo visualizzerà comunque, ma questo strumento crea un vero e proprio contenitore ICO contenente tre risoluzioni effettive, proprio come previsto dal formato e come si aspettano i lettori più rigorosi.
Perché mi servono le icone PNG se ho già il file favicon.ico?
Il file favicon.ico copre solo il classico caso d'uso relativo alle schede del browser e ai segnalibri. Il file PNG 180×180 è quello che iOS utilizza quando un utente aggiunge il tuo sito alla schermata iniziale (apple-touch-icon), mentre i file PNG 192×192 e 512×512 sono quelli che Android e le richieste di installazione delle PWA prelevano dal manifest della tua app web. Senza di essi, l’icona sulla schermata iniziale del telefono verrà sostituita da uno screenshot generico o da un quadrato vuoto.
Il mio logo non è quadrato: cosa succede?
Viene centrato su un quadrato trasparente in base alle dimensioni di destinazione, anziché essere allungato; in questo modo, un logo largo o alto mantiene le proporzioni corrette invece di risultare schiacciato all’interno di un quadrato.
Dove devo salvare i file scaricati?
Inserisci i file favicon.ico, apple-touch-icon.png, icon-192.png e icon-512.png nella cartella principale del tuo sito (accanto a index.html), quindi incolla i tag <link> generati all'interno del tag <head> della tua pagina.
Il mio file SVG è stato caricato da qualche parte?
No. Il file SVG viene visualizzato su elementi <canvas> locali e i file ICO/PNG vengono assemblati nel browser. Non viene inviato nulla a un server.