Convertire PNG in ICO

Praticamente a due cose: il `favicon.ico` nella radice di un sito e l’icona di un eseguibile Windows. Fuori da lì il formato non si incontra, e chi arriva su questa pagina sta quasi sempre facendo la prima delle due.

Vale la pena dire subito che per un sito moderno l’ICO non è più obbligatorio: un `<link rel="icon" href="/favicon.png">` funziona su ogni browser in circolazione. Il motivo per cui il file continua a esistere è che i browser lo cercano comunque nella radice del dominio anche senza che nessuno lo dichiari, e senza quel file ogni visita produce un 404 nei vostri log. Metterlo lì costa un minuto e toglie un rumore permanente.

Questa è la differenza che spiega tutto il formato. Un PNG contiene una immagine. Un ICO contiene un elenco di immagini, ciascuna con la sua misura, e chi lo legge sceglie quella che gli serve: 16 pixel nella scheda del browser, 32 nella barra dei preferiti, 48 in una scorciatoia sul desktop, 256 nell’anteprima grande di Esplora risorse.

È per questo che un ICO fatto bene batte un PNG ridimensionato al volo. Il ridimensionamento automatico da 256 a 16 pixel produce quasi sempre una poltiglia, perché a quella misura ogni pixel conta e l’algoritmo non sa quali dettagli sono importanti. Un ICO con la versione da 16 disegnata apposta resta leggibile dove l’altro non lo è.

Le tre che contano davvero sono 16, 32 e 48. La prima è la scheda del browser, la seconda è quello che Windows usa per le scorciatoie e la barra delle applicazioni a densità normale, la terza è la vista a icone medie. Aggiungere 256 ha senso se il file finirà anche come icona di un eseguibile, dove Windows la usa nell’anteprima grande.

Aggiungerne di più non fa danno ma non serve, e ogni misura in più è peso su un file che ogni visitatore scarica. Le misure intermedie che si vedono in giro — 24, 64, 128 — sono avanzi di versioni di Windows che nessuno usa più.

Un quadrato, con il lato di almeno 256 pixel, con sfondo trasparente. Il quadrato perché un ICO è quadrato e un’immagine rettangolare va tagliata o riempita, e la decisione su come farlo è meglio prenderla voi in un editor che lasciarla a un convertitore. La trasparenza perché l’icona finirà su sfondi di colore diverso — la scheda chiara, la barra scura, il desktop con una fotografia — e uno sfondo bianco cotto dentro si vedrà come un francobollo su tutti tranne uno.

La partenza da 256 serve perché le misure piccole si ricavano da lì. Partire da un PNG di 32 pixel e chiedere una versione da 256 produce un’icona sfocata, e nessuna conversione può inventare i dettagli che nel file non c’erano mai stati.

È il consiglio che fa la differenza fra un favicon leggibile e una macchia colorata, e non riguarda la conversione ma quello che le date da convertire. A 16 pixel di lato avete 256 pixel in tutto: un logo con un testo dentro, un gradiente, un contorno sottile o tre elementi separati non ci sta, per ragioni aritmetiche prima che estetiche.

Quello che funziona è una forma sola, con un contrasto forte e senza dettagli fini. Guardate i favicon che riconoscete a colpo d’occhio in una fila di schede: sono quasi tutti una lettera sola o una forma geometrica piena. Se il vostro logo è complesso, la versione per il favicon è un disegno diverso che ne conserva l’idea, non lo stesso file più piccolo.

Gli ICO moderni contengono immagini PNG al loro interno, con canale alfa completo: i bordi sfumano in modo pulito su qualsiasi sfondo. È quello che viene prodotto qui.

La versione storica del formato usava invece una maschera a un bit — un pixel era completamente opaco o completamente trasparente, senza vie di mezzo — ed è la ragione dei bordi seghettati delle icone di Windows 95. Nessun sistema in uso ha ancora bisogno di quella forma, e produrla oggi significherebbe solo rinunciare all’antialiasing.

Nella radice del dominio, chiamato esattamente `favicon.ico`. I browser lo richiedono lì da soli, senza che nessun tag lo indichi, ed è precisamente questa richiesta implicita che rende utile mettercelo.

Dichiararlo comunque nell’HTML è buona pratica perché toglie ogni ambiguità e permette di servirlo da un altro percorso: `<link rel="icon" href="/favicon.ico" sizes="any">`. L’attributo `sizes="any"` dice ai browser che sanno leggere anche l’SVG di preferire quello, se lo avete dichiarato accanto, e di usare l’ICO come ripiego.

È la domanda che arriva subito dopo la conversione, e la risposta è quasi sempre la cache. I browser conservano i favicon con particolare tenacia, separatamente dalla cache normale delle pagine, e un ricaricamento forzato spesso non basta.

Il modo affidabile di controllare è aprire direttamente `vostrodominio.it/favicon.ico` in una scheda, che salta la logica del favicon e mostra il file che il server sta davvero servendo. Se lì vedete quello nuovo, il lavoro è finito e il resto è pazienza. Se vedete ancora il vecchio, il file non è stato caricato dove pensate o un CDN ha una copia da invalidare.

Un logo non è un documento riservato, quindi la questione della riservatezza pesa meno che altrove su questo sito. Resta però che il file non ha nessuna ragione di viaggiare: il lavoro è ridimensionare un’immagine e impacchettarla, e il browser sa fare entrambe le cose.

Quindi il PNG viene letto dal vostro disco nella vostra scheda, ridimensionato con la tela del browser e scritto in un ICO in memoria. Nessuna richiesta parte con dentro la vostra immagine, e la scheda di rete degli strumenti di sviluppo ve lo mostra mentre succede. Il vantaggio pratico è che funziona anche offline e che non c’è una coda dietro ad altri.

Se state facendo l’icona di un’applicazione web, di un manifest o di una schermata iniziale, l’ICO non c’entra: quei posti vogliono PNG di misure dichiarate, e un ICO lì non viene letto. Lo stesso vale per le anteprime social, che vogliono un’immagine rettangolare grande e sono un’altra cosa ancora.

L’ICO ha esattamente due usi, elencati all’inizio di questa pagina. Fuori da quelli è un formato del 1985 che state usando per abitudine, e un PNG fa il suo lavoro meglio e con meno complicazioni.