Convertire HEIC in ICO

Questo è il passaggio che decide se il risultato appare voluto. Nulla in questa conversione ritaglia: l’immagine conserva le proprie proporzioni e viene centrata su una tela quadrata alla scala più grande che ci sta, quindi una normale cornice iPhone 4 032 per 3 024 arriva come un’immagine 4:3 con un quarto dell’icona vuoto sopra e sotto. Nulla viene stirato, che è la metà importante — ma una favicon è alta 16 pixel e ne avete appena regalati quattro.

Aprire la fotografia nell’app Foto, toccare Modifica, scegliere lo strumento di ritaglio e selezionare il rapporto quadrato, poi posizionarlo sulla parte che si vuole davvero — le lettere sull’insegna, l’emblema, il singolo oggetto. Salvare, condividere la copia ritagliata, e convertire quella. Trenta secondi di ritaglio valgono più di qualsiasi impostazione di questa pagina.

Una favicon viene disegnata a 16 pixel CSS. Su uno schermo ad alta densità il browser può scegliere 32 pixel fisici, e una barra dei preferiti o una scheda fissata può andare un po’ più grande, ma 16 per 16 è la dimensione per cui progettare. Sono 256 pixel in totale, meno di quante siano le parole di questa pagina.

Ciò che sopravvive a quella dimensione è una forma e uno o due colori. Ciò che non sopravvive è un testo di qualsiasi tipo sotto le quattro lettere, le linee sottili, i gradienti, le ombre e qualunque cosa abbia uno sfondo dietro. Una fotografia di un negozio diventa una macchia marrone. Una fotografia di una singola lettera marcata dipinta su un muro, ritagliata stretta, diventa un’icona riconoscibile — la differenza è interamente in ciò che è stato fotografato e a che distanza.

Il file è un header di sei byte, poi una voce di directory di sedici byte per dimensione, poi un PNG per ciascuna — tre di esse con le impostazioni predefinite, a 48, 32 e 16 pixel, elencate dalla più grande. Il formato consente anche un payload bitmap puro, che è ciò che originariamente significava, ma ogni versione di Windows da Vista in poi legge un PNG dentro un’icona e il file ne esce una frazione delle dimensioni, quindi è ciò che viene scritto.

Una particolarità è visibile in un editor esadecimale: i campi di larghezza e altezza nella directory sono un byte ciascuno, quindi 256 non ci sta e la convenzione del formato è di scrivere zero al suo posto. Un’icona la cui voce dice che la propria dimensione è 0 per 0 è la specifica che funziona come previsto, non un file corrotto. Lo si incontra solo se si sceglie un set di dimensioni che includa 256; i tre predefiniti stanno tutti in un byte e si leggono come sé stessi.

Qualunque cosa si fornisca in ingresso, nulla nel file supera i 256 pixel — il tetto viene applicato nel passaggio e non c’è un’impostazione che lo alzi. Una fotografia da 12 megapixel viene ridotta di un fattore di circa sedici in ciascuna direzione per raggiungerlo, e una da 48 megapixel di oltre trenta. Le dimensioni effettivamente scritte derivano da quello, quindi con il set predefinito la riduzione è di un fattore ottantaquattro prima che la voce più grande venga raggiunta.

Ciascuna di quelle riduzioni è fatta con smoothing di alta qualità in una canvas, che è il modo giusto: ridurre una fotografia grande fa la media di molti pixel in ciascun pixel di uscita e nasconde il rumore invece di mostrarlo. Il risultato è un’immagine piccola e pulita di qualcosa che non era mai pensato per essere piccolo, che è un problema diverso e non uno che il ricampionamento possa risolvere.

Le icone stanno meglio con uno sfondo trasparente, così si appoggiano su un chrome del browser chiaro o scuro senza un riquadro visibile attorno. Il contenitore qui lo supporta, perché il payload è un PNG e un PNG porta l’alfa.

Una fotografia da fotocamera non ha trasparenza, quindi ciò che si ottiene è un quadrato completamente opaco. Se il marchio fotografato è scuro su un muro chiaro, il muro chiaro diventa lo sfondo dell’icona e apparirà come un rettangolo su un tema scuro del browser. Rimuovere quello sfondo è un lavoro per un editor prima della conversione, non qualcosa che la conversione possa dedurre.

Se si intende scattare qualcosa di specifico per questo, scattare il più piatto e il più vicino che l’obiettivo consenta: il solo emblema, che riempia l’inquadratura, dritto, in luce uniforme senza ombra attraverso. Evitare l’intera insegna, l’intera vetrina e l’intero prodotto. Un motivo, un colore dominante, bordi netti.

Vale anche la pena fotografare il marchio su uno sfondo omogeneo che si possa ritagliare in seguito — un foglio di carta, una parete tinta unita — perché dà la possibilità di un’icona trasparente senza dover ricostruire i bordi a mano. Se l’attività ha un vero file di logo da qualche parte in un’email di un designer, è un punto di partenza migliore di qualsiasi fotografia, e vale dieci minuti di ricerca prima di convertire.

L’immagine viene decodificata e ricodificata nel percorso verso il payload PNG, quindi nulla dei metadati dell’HEIC raggiunge l’icona: nessuna data di scatto, nessun modello di fotocamera, nessuna coordinata GPS. È senza ambiguità un bene qui, dato che una favicon viene servita a ogni visitatore del sito e altrimenti pubblicherebbe dove è stata scattata la fotografia.

Anche il profilo Display P3 che un iPhone allega non viaggia, quindi i colori saturi verranno riprodotti leggermente più spenti che sul telefono. A 16 pixel non è qualcosa che qualcuno noterà, e rimuove una variabile da come l’icona appare attraverso i browser.

Due cose vale la pena fare con il risultato. Caricarlo ovunque il proprio site builder lo abbia chiesto, e anche assicurarsi che una copia stia alla radice del dominio come favicon.ico, perché i browser, i crawler e le anteprime dei link richiedono quel percorso di loro iniziativa indipendentemente dal fatto che la pagina lo dichiari.

Poi controllarlo in una scheda reale anziché nell’anteprima del builder, alla dimensione a cui verrà effettivamente visto, sia su un tema del browser chiaro sia su uno scuro. La cache è aggressiva con le favicon — un hard reload o una finestra privata sono spesso necessari prima che la nuova appaia, e più di una persona ha riconvertito un file tre volte per quello anziché perché qualcosa non andava in esso.

L’intero lavoro avviene nel browser: libheif decodifica l’HEIC, una canvas lo ridimensiona, il codificatore PNG gira e il contenitore dell’icona viene scritto da poche decine di righe di JavaScript. Nulla viene trasmesso, e si può verificare nella scheda Rete o staccando prima la connessione.

Significa anche niente coda e niente attesa. Realizzare un’icona è un lavoro iterativo — ritagliare più stretto, provare l’altra foto, provarla senza sfondo — e poter eseguire sei tentativi in un minuto sulla propria macchina è ciò che rende l’iterazione pratica. È anche il motivo per cui l’elaborazione locale è il modello giusto per questa coppia in particolare.

La raccomandazione onesta, se la fotografia non si riduce bene, è di non usare una fotografia. Una favicon disegnata come forma — un’iniziale in un carattere forte, una silhouette semplice, un colore solido con una lettera ritagliata — si leggerà a 16 pixel dove una fotografia non lo farà mai, e può essere fatta in qualsiasi strumento vettoriale in pochi minuti.

Se si va in quella direzione, produrla come SVG e convertire quello in ICO invece: entra nello stesso contenitore con lo stesso set di dimensioni, ma i pixel da cui parte sono renderizzati dal disegno anziché catturati attraverso un obiettivo, quindi i bordi sono netti dove quelli di una fotografia sono morbidi. Questa pagina esiste perché a volte la fotografia è tutto ciò che si ha, e produrrà un file usabile — ma non renderà una vetrina leggibile in una scheda del browser.