Convertire JPG in ICO

Questa è la cosa che si scopre dopo, quindi va detta prima. JPG non ha un canale alfa: il formato in sé non può registrare che un pixel è trasparente. Qualunque cosa stia dietro al logo nel JPG, di solito il bianco, fa parte dell’immagine, e arriva nell’icona come un rettangolo pieno.

Su una scheda bianca del browser di solito sembra a posto. In una barra delle applicazioni con tema scuro, su una barra degli strumenti colorata, o accanto a una barra dei segnalibri in modalità scura, sembra una casella bianca con qualcosa dentro. Se il marchio deve galleggiare, la sorgente deve portare trasparenza: partire da un PNG, o chiedere il logo come PNG o SVG.

Una favicon viene disegnata a circa 16 pixel. Un’icona della barra delle applicazioni è 32. È una tela più piccola del punto fermo alla fine di questa frase, e una fotografia porta migliaia di volte più dettaglio di quanto possa sopravvivere al viaggio fino a quella dimensione, anche partendo da un originale nitido.

Ciò che sopravvive al ridimensionamento è la silhouette e il contrasto: una forma decisa, due o tre colori, bordi netti. Ciò che non sopravvive sono volti, testi, trame, linee sottili e tutto ciò che ha uno sfondo pieno di dettagli. Se si converte una fotografia perché è l’unico file che si ha, aspettarsi una macchia colorata e considerare di ritagliare in modo aggressivo attorno all’elemento più riconoscibile prima di convertire.

Le icone sono quadrate e le fotografie in genere non lo sono. La conversione non ritaglia per conto dell’utente, perché ritagliare significa decidere cosa scartare, e uno strumento che indovina sbaglia proprio sulle immagini in cui la cosa conta. Quello che fa invece è centrare l’immagine su un quadrato e lasciare il resto vuoto, quindi un fotogramma 3:2 arriva con una banda di nulla sopra e sotto, e l’immagine disegnata a due terzi dell’altezza dell’icona. Il risultato è un’icona che sembra circondata da spazio morto, ed è esattamente la cosa da evitare.

Meglio farlo prima, in qualsiasi editor di immagini o anche nella galleria del telefono. Ritagliare stretto intorno al soggetto, non tenendo l’intera inquadratura: un’icona non ha spazio per il contesto, e un’immagine che si legge bene a dimensione piena di solito ha bisogno di essere ritagliata il doppio più stretta per leggersi affatto quando è larga sedici pixel. Un volto riempie meglio una favicon di un paesaggio, ed è la prima regola non scritta del mestiere.

Niente di ciò che un ICO contiene è più grande di 256 pixel su un lato, quindi un JPG più grande viene ridimensionato per adattarsi prima che succeda qualunque altra cosa. Le dimensioni scritte nel file sono poi prese da quello: il set predefinito è 48, 32 e 16, e «Tutte le dimensioni comuni» aggiunge 64, 128 e 256.

Chiedere una dimensione che il JPG non può offrire e l’immagine viene ingrandita anziché rifiutata, quindi un’immagine da 64 pixel convertita con «Solo 256 px» esce più sfocata, non migliore. Il set predefinito è al sicuro da questo per quasi tutte le sorgenti, e copre i due contesti per cui la maggior parte delle persone arriva qui: una scheda del browser e un collegamento Windows. Quello che non è è un sostituto del disegnare a mano le piccole dimensioni, che è ciò che un’icona di applicazione in una barra delle applicazioni affollata vuole davvero; le voci qui sono l’immagine ridotta, non ridisegnata, e la differenza tra le due cose si vede a colpo d’occhio.

L’immagine è decodificata dal JPG e memorizzata nell’ICO come dati PNG, che è lossless. Quindi la conversione di per sé non aggiunge artefatti di compressione sopra quelli che il JPG aveva già. I blocchi e il rumore visibili in un JPG molto compresso vengono trasportati, non peggiorati, il che è già qualcosa.

Quello che non può fare è rimuoverli. Se la sorgente è un JPG pesantemente compresso scaricato da un sito web, i bordi a blocchi e l’alone attorno alle linee scure sono nei pixel, e ridimensionare a 256 li mantiene in proporzione. Partire dalla copia di qualità più alta che si ha vale di più qui di qualsiasi impostazione, ed è un motivo in più per risalire all’originale prima di convertire.

Metterlo alla radice del sito come favicon.ico. I browser hanno richiesto quel percorso esatto per quasi trent’anni e lo fanno ancora, qualunque cosa dichiari l’HTML, quindi averlo lì ferma anche un flusso costante di 404 nel log del server. Su un’installazione Nginx pulita è la prima voce da aggiungere, prima ancora di scrivere il primo blocco `server`.

Se l’icona non cambia quando si ricarica, è la cache invece di una conversione fallita: le favicon vengono memorizzate in modo insolitamente aggressivo. Un ricaricamento forzato, una finestra privata, o aggiungere una stringa di query al collegamento nell’HTML mostrerà quella nuova, ed è di solito il modo più rapido per verificare che la modifica sia arrivata prima di dichiarare chiusa la questione.

ICO è il formato che Windows usa per eseguibili, cartelle e collegamenti, e la shell sceglie la voce che corrisponde alla vista che sta disegnando, quindi «Tutte le dimensioni comuni» è la scelta da fare qui, dato che Explorer disegna icone ovunque dai 16 pixel in una visualizzazione a dettagli ai 256 in una visualizzazione a riquadri grandi. Tasto destro sul collegamento, scegliere Proprietà, quindi Cambia icona, e puntare sul file.

Tenere l’ICO in un posto permanente prima di farlo. Windows memorizza il percorso invece di una copia, quindi un’icona impostata dalla cartella Download sparisce nel momento in cui la cartella viene svuotata. Meglio spostare il file in una cartella stabile prima di associarlo, e ricordare che l’icona si aggiorna solo se Windows la ricarica dal disco. Un refresh dell’icona richiede talvolta un logout, su macchine aziendali con criteri di cache aggressivi.

Si possono caricare fino a 100 file JPG in una volta. Ogni file viene convertito separatamente sul proprio computer, mantiene il nome con l’estensione cambiata, e il lotto torna come un unico ZIP, utile quando un set di strumenti interni o di collegamenti ha bisogno ciascuno della propria icona.

Niente viene caricato in alcun momento. La conversione gira nella scheda del browser sul proprio processore, quindi non c’è coda dietro altre persone né tetto giornaliero da esaurire, ed è una differenza concreta rispetto a un servizio ospitato che chiede un account prima di fare la stessa cosa. Per chi produce volumi di icone per uso interno, è il tipo di dettaglio che fa risparmiare ore nel corso di un mese.