Converti PNG in ICO per una favicon perfetta
La favicon è la piccola immagine che dà a un sito web la sua firma visiva. La vedi nella scheda del browser accanto al titolo della pagina, nell'elenco dei segnalibri, nel menu a tendina della cronologia di navigazione e a volte accanto ai risultati di ricerca. È piccola, ma svolge molto lavoro: una favicon riconoscibile aiuta gli utenti a trovare la tua scheda tra una dozzina di altre e segnala che un sito è curato e completo. Il formato classico per quella piccola icona è ICO, e il modo più semplice per crearne una è partire da un PNG quadrato pulito e convertirlo.
Questo strumento prende un'immagine PNG e la trasforma in una favicon ICO direttamente nel tuo browser. La conversione avviene localmente usando il tuo dispositivo, quindi l'immagine che scegli non viene mai caricata su un server. Questo è importante quando la tua icona è un logo o un asset del brand che preferiresti non consegnare a terzi. Quando il file è pronto, lo scarichi semplicemente.
Cos'è il formato ICO e perché contiene più dimensioni
ICO è un formato contenitore per icone originato in Microsoft Windows, dove memorizza le icone usate per programmi, scorciatoie e cartelle. La sua caratteristica distintiva, e il motivo per cui è diventato lo standard per le favicon web, è che un singolo file ICO può contenere la stessa immagine a più risoluzioni contemporaneamente. Invece di un singolo bitmap fisso, il file racchiude un piccolo set di immagini quadrate e lascia che il browser o il sistema operativo scelga quella di dimensione adatta al contesto in cui deve disegnare l'icona.
Questo è genuinamente utile. Una scheda del browser ha bisogno di un'icona minuscola, una barra dei segnalibri potrebbe usarne una leggermente più grande, e una scorciatoia aggiunta al desktop può richiederne una ancora più grande. Con un ICO multi-dimensione, ogni contesto sceglie la versione che gli si addice, quindi l'icona rimane nitida invece di essere ingrandita da un singolo bitmap piccolo diventando sfocata. ICO preserva anche la trasparenza, che mantiene i bordi di un logo rotondo o irregolare puliti su qualsiasi colore di scheda.
Dimensioni favicon consigliate
Per una favicon di sito web, le tre dimensioni che vale la pena includere sono 16x16, 32x32 e 48x48 pixel. La versione da 16 pixel è quella che la maggior parte dei browser mostra nella scheda e nella barra degli indirizzi. La versione da 32 pixel viene usata sui display ad alta risoluzione e in alcune visualizzazioni di segnalibri e cronologia, quindi mantiene le cose nitide sugli schermi moderni. La versione da 48 pixel copre contesti più grandi come le scorciatoie di siti Windows. Poiché vivono tutte all'interno di un unico file ICO, distribuisci un singolo asset e lasci che ogni superficie scelga ciò di cui ha bisogno.
Parti da un PNG quadrato in modo che nulla venga distorto. Se l'immagine sorgente è rettangolare o troppo grande, ritaglia o ridimensionala a un quadrato pulito prima con il nostro ridimensionatore di immagini, poi esegui la conversione. Un design semplice e ad alto contrasto si legge molto meglio a 16 pixel rispetto a un'illustrazione dettagliata, quindi preferisci forme in grassetto al testo fine.
Come aggiungere la favicon al tuo sito
Una volta ottenuto il file ICO, caricalo sul tuo sito web, tradizionalmente nella root del sito come favicon.ico. Molti browser lo troveranno lì automaticamente, ma è buona pratica dichiararlo esplicitamente nell'head del tuo HTML per evitare ambiguità. Aggiungi un tag link come questo:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Inserisci quella riga all'interno della sezione <head> delle tue pagine. L'attributo rel="icon" indica al browser che questa risorsa è l'icona della pagina, e href punta dove hai archiviato il file. Se usi un percorso relativo alla root come quello sopra, la stessa dichiarazione funziona su tutte le pagine del tuo sito. Dopo il deploy, potresti dover fare un hard refresh o svuotare la cache prima che la nuova icona appaia, poiché i browser tengono le favicon in modo aggressivo.
Conversione privata nel tuo browser
Tutto avviene sul tuo dispositivo. Il PNG scelto viene letto, decodificato e ricodificato come ICO in locale, e nulla lascia il tuo computer durante il processo. Non c'è account, nessuna coda e nessun archivio lato server, il che lo rende comodo anche per loghi non ancora rilasciati o lavori per clienti soggetti ad accordo. Per altri modi di preparare e rifinire la grafica, sfoglia la nostra raccolta completa di strumenti per immagini.
Domande frequenti
La mia immagine viene caricata da qualche parte?
No. Il PNG viene convertito in ICO interamente nel tuo browser, sul tuo dispositivo. Nulla viene inviato a un server e nulla viene archiviato, quindi la tua immagine rimane privata.
Quali dimensioni dovrebbe includere la mia favicon?
Le dimensioni più utili sono 16x16, 32x32 e 48x48 pixel. L'immagine da 16 pixel viene mostrata nelle schede del browser, mentre quelle più grandi mantengono l'icona nitida sui display ad alta risoluzione e nelle scorciatoie desktop.
Perché usare ICO invece di un semplice PNG?
ICO è il formato favicon consolidato da tempo e può memorizzare più dimensioni all'interno di un unico file. I browser e il sistema operativo scelgono la risoluzione adatta a ogni contesto, quindi l'icona rimane nitida invece di essere scalata da un singolo bitmap.
L'ICO mantiene la trasparenza del mio PNG?
Sì. Il formato ICO supporta la trasparenza, quindi le aree trasparenti del tuo PNG vengono preservate e l'icona si fonde perfettamente con qualsiasi colore di scheda o sfondo.
Come aggiungo la favicon al mio sito web?
Carica il file ICO sul tuo sito, di solito come favicon.ico nella root, e aggiungi un tag link nell'head del tuo HTML come link rel icon type image x-icon href slash favicon.ico. Poi svuota la cache del browser per vederla.
La mia immagine sorgente non è quadrata. Cosa devo fare?
Ritaglia o ridimensionala a un quadrato prima in modo che non venga distorta. Puoi usare il nostro ridimensionatore di immagini per creare un quadrato pulito, poi convertilo in ICO per la favicon migliore possibile.