Come creare un favicon.ico (multi-dimensione) da PNG o SVG

Un favicon è la piccola icona che appare nelle schede del browser, nei preferiti, nelle liste della cronologia e nelle barre degli indirizzi. È uno dei primi elementi visivi che gli utenti notano del tuo sito, e farlo bene conta più di quanto la maggior parte degli sviluppatori pensi. Un favicon sfocato, mancante o con dimensioni errate fa sembrare un sito incompleto e poco professionale.

Il formato ICO rimane la scelta più affidabile per i favicon perché può raggruppare più dimensioni di immagine in un singolo file. Quando un browser ha bisogno di un'icona 16x16 per la barra delle schede, prende l'immagine 16x16 dal file ICO. Quando il sistema operativo ha bisogno di un'icona 32x32 per un collegamento nella barra delle applicazioni, prende la versione 32x32. Questo assicura che il tuo favicon sia sempre nitido a ogni dimensione, invece di essere ridimensionato in su o in giù da una singola risoluzione.

In questa guida, preparerai un'immagine sorgente, la convertirai in un file ICO multi-dimensione usando Any2ICO, sceglierai le dimensioni giuste per il favicon e aggiungerai i tag HTML corretti affinché i browser trovino e mostrino la tua icona. L'intero processo richiede meno di due minuti, e la conversione avviene direttamente nel tuo browser.

Passaggio 1: prepara l'immagine sorgente

Un ottimo favicon inizia con un'ottima immagine sorgente. La qualità del tuo input determina direttamente la qualità del tuo output, quindi vale la pena dedicare un momento a fare le cose per bene prima di convertire qualsiasi cosa.

Usa un'immagine quadrata. I favicon vengono sempre visualizzati come quadrati, quindi il tuo sorgente dovrebbe essere quadrato o molto vicino a esserlo. Se il tuo logo è più largo che alto, considera di ritagliarlo in una porzione quadrata o di usare un marchio semplificato piuttosto che il logotipo completo. Any2ICO offre sia la modalità di ridimensionamento contain che cover se la tua immagine non è perfettamente quadrata. Contain adatta l'intera immagine all'interno del quadrato con riempimento opzionale dello sfondo, mentre cover ridimensiona l'immagine per riempire completamente il quadrato, ritagliando i bordi.

Parti dalla risoluzione più alta disponibile. Un'immagine di almeno 256x256 pixel fornisce ad Any2ICO dati sorgente puliti per ogni dimensione di favicon da 16x16 fino a 256x256. Se il tuo sorgente è solo 32x32, lo strumento può comunque creare dimensioni più piccole ridimensionando verso il basso, ma non può generare una versione 256x256 nitida da un originale minuscolo. In caso di dubbio, scegli più grande.

PNG è il formato di input ideale. PNG preserva la trasparenza ed è senza perdita di dati, rendendolo il miglior punto di partenza per la conversione di icone. Se il tuo logo ha uno sfondo trasparente, PNG trasporterà quella trasparenza perfettamente nell'output ICO. Anche JPG funziona, ma non supporta la trasparenza e potrebbe introdurre artefatti di compressione nel sorgente.

SVG funziona, ma con alcune avvertenze. SVG è un formato vettoriale che può teoricamente scalare a qualsiasi risoluzione, il che sembra ideale per i favicon. Any2ICO accetta file SVG e li rasterizza durante la conversione. Tuttavia, gli SVG con riferimenti a font esterni, immagini collegate o CSS complessi potrebbero non essere renderizzati come previsto quando rasterizzati nel browser. Se il tuo SVG appare correttamente in un browser web, quasi certamente si convertirà correttamente.

Passaggio 2: converti in un ICO multi-dimensione con Any2ICO

Con la tua immagine sorgente pronta, vai su Any2ICO per convertirla in un file ICO multi-dimensione strutturato correttamente. Il processo è semplice e richiede solo pochi clic.

Carica la tua immagine. Trascina e rilascia il tuo file PNG, SVG, JPG, WebP, GIF, BMP o AVIF nell'area del convertitore. Puoi anche incollare un'immagine direttamente dagli appunti, importare da un URL o connetterti a Google Drive o OneDrive. Any2ICO accetta file fino a 10 MB, molto più di quanto qualsiasi sorgente favicon dovrebbe richiedere.

Seleziona le dimensioni del tuo ICO. Any2ICO ti permette di scegliere quali dimensioni incorporare nel file ICO: 16, 32, 48, 64, 128 e 256 pixel. Per la maggior parte dei siti web, selezionare 16, 32 e 48 copre i casi d'uso essenziali. Se vuoi una copertura completa incluse le icone delle applicazioni Windows e i display ad alta risoluzione, aggiungi anche 64, 128 e 256. Ogni dimensione selezionata aggiunge un livello immagine separato all'interno del singolo file ICO.

Scegli la modalità di ridimensionamento. Se il tuo sorgente non è perfettamente quadrato, scegli contain per adattare l'immagine completa all'interno del bordo quadrato (con un riempimento dello sfondo per le aree vuote) oppure cover per riempire l'intero quadrato ritagliando. Per la maggior parte dei loghi, contain è la scelta più sicura perché preserva l'immagine completa senza tagliare nulla.

Imposta lo sfondo. Se il tuo sorgente ha la trasparenza e vuoi mantenerla, seleziona sfondo trasparente. Se preferisci uno sfondo solido, scegli bianco. Gli sfondi trasparenti hanno un aspetto migliore nei browser e sistemi operativi moderni, mentre uno sfondo bianco può essere utile se il tuo logo ha elementi molto sottili o chiari che potrebbero scomparire contro le barre delle schede scure.

Scarica il tuo ICO. Clicca sul pulsante di conversione e scarica il file favicon.ico generato. La conversione viene eseguita dalla Canvas API direttamente nel tuo browser. Per capire esattamente come Any2ICO gestisce i tuoi file durante il caricamento e l'importazione, visita la nostra pagina informativa.

Passaggio 4: aggiungi i tag favicon al tuo sito

Una volta ottenuto il file favicon.ico, devi posizionarlo sul tuo server e indicare ai browser dove trovarlo.

Posiziona il file nella radice del tuo dominio. Salva il file favicon.ico nella directory radice del tuo server web in modo che sia accessibile all'indirizzo https://tuodominio.com/favicon.ico. La maggior parte dei browser cercherà automaticamente un file in questo esatto percorso, anche senza tag HTML che lo indichino. Questa convenzione risale ai primi giorni dei favicon e rimane il metodo più affidabile.

Aggiungi un tag link nel head del tuo HTML. Sebbene posizionare il file nella radice sia spesso sufficiente, aggiungere un tag <link> esplicito nella sezione <head> assicura che ogni browser lo trovi in modo affidabile, inclusi quelli che cercano in percorsi non-radice o sottodomini. Ecco lo snippet minimo di cui hai bisogno:

<link rel="icon" href="/it/favicon.ico" sizes="any">

L'attributo sizes="any" indica al browser che il file ICO contiene più dimensioni e il browser dovrebbe scegliere la migliore per il contesto corrente. Se vuoi essere esplicito su quali dimensioni sono incluse, puoi elencarle:

<link rel="icon" href="/it/favicon.ico" sizes="16x16 32x32 48x48">

Per la maggior parte dei siti, la versione a riga singola con sizes="any" è perfettamente sufficiente. I browser sono intelligenti nella selezione della dimensione giusta da un file ICO multi-dimensione. Per un riferimento completo sui tag link dei favicon, i valori degli attributi e i casi limite, consulta la nostra guida sui tag HTML dei favicon.

Verifica che funzioni. Apri il tuo sito in un browser e controlla l'icona della scheda. Se vedi il vecchio favicon o nessun favicon, probabilmente devi svuotare la cache del browser. I favicon vengono memorizzati nella cache in modo aggressivo da ogni browser principale, quindi un aggiornamento forzato (Ctrl+Shift+R o Cmd+Shift+R) o aprire la pagina in una finestra di navigazione in incognito è il modo più veloce per confermare che la tua nuova icona si stia caricando correttamente.

Riepilogo

Creare un favicon.ico multi-dimensione corretto è un processo in quattro passaggi: preparare un'immagine sorgente quadrata di alta qualità (preferibilmente PNG o SVG a 256x256 o più grande), convertirla in ICO con le dimensioni giuste usando Any2ICO, scegliere le dimensioni che corrispondono al tuo pubblico (16, 32 e 48 come minimo) e aggiungere un semplice tag <link> nel head del tuo HTML. L'intero processo richiede meno di due minuti e produce un favicon che appare nitido in ogni scheda del browser, barra dei preferiti e collegamento desktop.

Un file ICO multi-dimensione è ancora il formato favicon più universalmente supportato tra browser e sistemi operativi. Mentre i browser moderni accettano anche favicon PNG e SVG, il formato ICO garantisce compatibilità fino a Internet Explorer e funziona perfettamente con i collegamenti desktop di Windows. Raggruppando più dimensioni in un singolo file, ti assicuri che il browser abbia sempre la risoluzione giusta disponibile senza dover scaricare file separati per ogni contesto.

Pronto a creare il tuo favicon? Vai su Any2ICO, carica il tuo logo, seleziona le dimensioni e scarica il tuo favicon.ico finito in pochi secondi. Nessuna registrazione, nessun watermark, e la conversione avviene direttamente nel tuo browser.