Convertire WebP in ICO

Chi arriva a questa pagina di solito sta lavorando a ritroso: i file originali del logo sono presso un’agenzia che non risponde più, su un account chiuso, o su un computer sostituito da tempo, e l’unica copia rimasta è quella che il sito stesso serve, in WebP perché una pipeline di build o un servizio di immagini l’ha convertita così in uscita.

È un punto di partenza ragionevole, ma vale la pena cercare per trenta secondi qualcosa di migliore prima di procedere: provate /favicon.svg sul dominio, cercate ".svg" nel codice sorgente della pagina, o controllate se lo stesso logo è servito anche in PNG dentro un elemento picture di riserva. Se una di queste esiste, le pagine SVG in ICO o PNG in ICO daranno un risultato migliore di questa.

L’ICO scritto qui è limitato a 256 pixel sul lato più lungo, il tetto stesso del formato. Su molte pagine di conversione in ICO quel tetto è il problema principale, perché il sorgente è un file di stampa o una fotografia di migliaia di pixel.

Qui di solito non lo è: i siti servono i loghi alla dimensione richiesta dal layout, spesso tramite un servizio di ridimensionamento, e 240-400 pixel di larghezza sono normali per un marchio di intestazione — più che sufficiente per i 48 pixel a cui arriva il set predefinito di dimensioni. Il rischio corre nell’altra direzione solo se chiedete misure che il sorgente non può dare: un logo di 120 pixel richiesto in tutte le taglie viene ingrandito per riempire le voci più grandi, aggiungendo peso e nessun dettaglio.

Il WebP esiste in due varianti e l’estensione non dice quale. Un WebP senza perdita di un logo piatto è pulito quanto un PNG. Uno con perdita ha subito una trasformazione che ammorbidisce le aree piatte e crea un leggero alone lungo i bordi netti; invisibile a 400 pixel, non lo è più dopo che l’icona è stata ridotta a 32 e messa accanto al titolo di una scheda del browser.

Nulla su questa pagina rimuove quell’effetto, perché l’informazione persa non torna indietro. Aiuta partire da un sorgente più grande — un file con perdita a 400 pixel ridotto a 256 attenua parte dell’alone, mentre uno già a 128 pixel non ha nulla da mediare — e ritagliare attorno al solo simbolo così che il dettaglio rimasto sia leggibile.

L’ICO prodotto qui contiene un PNG, non una bitmap grezza: è la convenzione moderna, ogni Windows da Vista in poi la legge, e il file pesa una frazione di quello che peserebbe con una bitmap. Soprattutto porta con sé un vero canale alfa a 8 bit, e il WebP ne ha uno, quindi un logo ritagliato arriva ritagliato, con bordi anti-aliasati morbidi.

Un favicon ne ha bisogno più di altre immagini: siede sulla barra delle schede, che cambia colore fra tema chiaro e scuro e ancora fra un browser e l’altro. Un marchio fissato su un quadrato bianco opaco sembra un errore in modalità scura e un adesivo in modalità chiara. Se il WebP non ha sfondo trasparente ma il logo poggia su bianco pieno, togliere quello sfondo prima di convertire è la modifica più utile disponibile.

Il WebP può contenere un’animazione, e il decodificatore usato qui legge solo immagini fisse. Un file animato viene respinto con un messaggio leggibile invece di essere ridotto silenziosamente al primo fotogramma — il comportamento più corretto tra i due, e coerente con il resto del sito.

In questo caso specifico non è nemmeno una vera perdita: i browser non animano i favicon ICO, quindi un sorgente animato non avrebbe comunque prodotto un’icona animata. Se vi serve un solo fotogramma, aprite il file in un browser, mettetelo in pausa, catturate lo schermo e convertite quell’immagine.

È un problema di grafica, non di conversione, e decide gran parte del risultato. Un favicon si vede nella pratica a 16 o 32 pixel, e a quella dimensione uno slogan diventa una macchia grigia, un carattere con contorno si riempie, una linea sottile scompare, e un marchio con più di tre elementi distinti diventa una macchia informe.

Ritagliate il WebP al solo simbolo prima di convertire: via lo slogan, via il margine, via qualunque tratto più sottile di un quarantesimo della larghezza. Se il marchio è solo testo senza simbolo, una singola lettera nel carattere del brand è quello che fanno quasi tutti i siti conosciuti, e si legge a 16 pixel dove il nome intero non ci riesce.

Il contenitore ICO è nato per contenere più dimensioni della stessa immagine insieme, ed è ciò che viene scritto qui: una voce di directory per ogni misura, tre per impostazione predefinita a 48, 32 e 16 pixel. Un browser che disegna una scheda legge la voce a 16 pixel invece di ridurre al volo una da 256, che è proprio la differenza per cui il formato esiste. Nessuna delle voci ridisegna il marchio: un’icona disegnata apposta a 32 pixel resta più nitida di una ridotta dal vostro logo.

I metadati non fanno il viaggio: ogni conversione di immagine su questo sito decodifica in pixel grezzi e ricodifica da capo, quindi qualunque EXIF, XMP o profilo ICC presente nel WebP viene perso, indipendentemente da qualunque impostazione. Per un favicon è del tutto benvenuto, e il set di tre misure di solito pesa meno del singolo file a 256 pixel.

Mettete il file alla radice del sito come /favicon.ico. I browser richiedono esattamente quel percorso da soli, che l’HTML lo indichi oppure no, ed è il motivo per cui l’errore 404 compare nei log anche su siti che dichiarano già un’icona nell’intestazione. Aggiungere comunque un elemento link nella pagina rende esplicita l’intenzione.

Poi aspettate, e svuotate la cache prima di giudicare: i favicon vengono messi in cache in modo aggressivo da ogni browser e spesso da un proxy intermedio, e uno nuovo può richiedere un giorno o un ricaricamento forzato per apparire.

Il file viene decodificato, ridimensionato e ricodificato come PNG interamente nel vostro browser: non viene caricato niente, non c’è un account e non c’è una quota giornaliera da consumare. Vale la pena dirlo esplicitamente su questa pagina, perché il file è spesso un logo che qualcun altro possiede — magari di un cliente, magari non ancora pubblico.

Il limite gratuito è di 100 MB per file, ben oltre quanto un logo può pesare. Se dovete convertire più marchi in una volta, potete trascinare una cartella intera e riprenderla come un unico archivio ZIP.