Convertire SVG in ICO

La maggior parte delle conversioni in icona parte da qualcosa già renderizzato una volta — un export PNG, uno screenshot, un JPEG trovato da qualche parte. Ognuno porta la risoluzione e gli artefatti di ciò che lo ha prodotto, e ridurlo a dimensione icona li accumula. Un SVG non porta nulla: sono istruzioni, quindi il renderer disegna il segno da capo esattamente alla dimensione che serve.

Significa che i bordi sono antialiased una volta sola piuttosto che due, le curve sono calcolate piuttosto che ricampionate, e non c’è alone morbido da un export precedente. Se avete il vettore, usatelo.

Un ICO è un contenitore costruito per contenere lo stesso segno a diverse dimensioni, così che Windows possa mostrare una versione nitida a 16 pixel in una barra applicazioni e una nitida a 256 pixel sul desktop senza ridimensionare nessuna delle due. Il controllo “Dimensioni icona” decide l’insieme, il predefinito è 16, 32 e 48, e ognuna è un PNG separato con il canale alfa intatto.

Duecentocinquantasei è il tetto proprio del formato, non una scelta fatta qui. Una voce registra la propria larghezza in un singolo byte, che si ferma a 255, quindi la specifica riserva il valore zero per significare 256 — ed è quel byte a essere scritto per un’icona a piena dimensione. Le voci sono scritte prima le più grandi.

Con l’insieme predefinito, non ridimensiona nulla: legge la directory, trova una voce già a 16 pixel, e la disegna. È la differenza per cui il contenitore fu inventato, ed è visibile — un’immagine a 256 pixel ridotta al volo da un filtro generico di un browser perde ogni allineamento che rendeva nitido il segno, mentre una voce a 16 pixel è stata ridotta una volta, in un passaggio filtrato.

Ciò che nessuna delle due disposizioni può fare è ridisegnare il segno. La voce a 16 pixel qui è il render a 256 pixel ridotto, non l’SVG ridisegnato a 16 con i tratti agganciati alla griglia pixel, quindi un tratto di un pixel si ammorbidisce comunque.

Il vincolo è brutale e vale la pena progettarci sopra piuttosto che combatterlo. Sedici per sedici sono 256 pixel in totale, meno dei caratteri in questa frase. Qualunque cosa richieda più di circa tre forme distinte per leggersi non si leggerà.

Le mosse usuali: eliminate del tutto il wordmark e tenete il simbolo, ispessite i tratti così cadano su pixel interi, aumentate il contrasto contro sfondi sia chiari che scuri, e rimuovete ogni dettaglio più piccolo di un decimo della larghezza. Partendo da un vettore, creare quella variante semplificata significa nascondere alcuni livelli ed esportare un secondo SVG.

L’immagine dentro l’icona è un PNG, quindi il canale alfa attraversa l’intera catena: resvg renderizza il disegno sul nulla, i pixel mantengono la loro trasparenza, e il PNG la memorizza. Un segno arrotondato mantiene i suoi angoli arrotondati invece di guadagnare un quadrato bianco.

Conta più di quanto contasse un tempo. I browser ora renderizzano le strisce di schede in un tema chiaro o scuro a seconda del sistema operativo, e una favicon con uno sfondo bianco incorporato si annuncia su uno scuro. Lasciate fuori lo sfondo dal disegno e lasciate che l’alfa faccia il suo lavoro.

I browser moderni accettano una favicon SVG direttamente, ed è strettamente migliore dove supportata: un file piccolo, nitido a ogni dimensione, e può rispondere a uno schema colore scuro con una media query dentro il disegno stesso. La disposizione usuale ora è un SVG dichiarato nel markup e un ICO alla radice per tutto il resto.

Non è una ragione per saltare l’icona. La richiesta a /favicon.ico viene fatta dai browser indipendentemente da cosa dice l’HTML, e da una lunga coda di lettori feed, anteprime link e crawler che non analizzano alcun HTML. Entrambi i file, pochi kilobyte insieme, e la domanda non si ripresenta.

Mettete il file alla radice come favicon.ico. Quel singolo posizionamento soddisfa la richiesta automatica e non richiede alcun markup — motivo per cui è sopravvissuto a trent’anni di cambiamenti del web.

Poi dichiarate il resto esplicitamente: un elemento link con rel="icon" e type="image/svg+xml" per l’SVG, e un apple-touch-icon PNG a 180 pixel per iOS, che ignora entrambi gli altri. Tre file coprono ogni client attuale, e l’icona è quella che non richiede dichiarazione.

Le favicon sono memorizzate nella cache con insolita determinazione, in uno store separato dalla cache di pagina ordinaria, e un ricaricamento forzato spesso non la svuota. Questo produce alcuni minuti affidabili in cui si crede che la conversione sia fallita quando il file sul server è perfettamente corretto.

Controllate il file direttamente aprendo il suo URL in una scheda, il che aggira del tutto la cache icone. Se l’immagine corretta appare lì, il deploy ha funzionato. Per forzare l’aggiornamento della scheda, aprite il sito in una finestra privata, o aggiungete una query string al link element per un deploy.

Nulla in questa conversione ritaglia. Il disegno viene renderizzato alle sue proporzioni proprie, e ogni voce dell’icona viene poi fatta centrandolo su una tela quadrata alla scala più grande che ci sta — quindi un viewBox largo viene riempito con trasparenza sopra e sotto piuttosto che stirato.

Sistemate nell’SVG. Impostate il viewBox su un quadrato e posizionate il segno al suo interno con qualunque margine sembri giusto. Un simbolo che riempie circa il novanta per cento del quadrato si legge bene a ogni dimensione, e a 16 pixel la differenza tra riempire il fotogramma e riempirne un terzo è quella tra quattro pixel leggibili di tratto e uno.

Trascinate l’intero insieme. Ogni disegno viene renderizzato e avvolto separatamente e i risultati tornano come uno ZIP, la forma usuale di questo lavoro per chi gestisce più siti o prodotti da un unico sistema di marca.

Ogni file riceve lo stesso trattamento e lo stesso insieme di dimensioni, quindi il lotto torna coerente. Ciò che non è coerente è quanto di ogni quadrato riempie il segno: un disegno con un viewBox largo è centrato con spazio trasparente ai lati, e accanto a un fratello correttamente squadrato sembrerà una taglia più piccolo.