Convertire SVG in ICO

Non c’è alcuna impostazione di qualità. Ogni dimensione viene resa dal vettore e memorizzata senza perdita: è il miglior risultato possibile, qualunque sia la sorgente.

Le regole di disegno che contano davvero a 16 pixel

• Una sola idea. Un simbolo, una lettera, una silhouette. Non una scena, non un logotipo, non un logo con il suo slogan.
• Linee spesse almeno 1/16 della larghezza circa. Tutto ciò che è più sottile sparisce alla dimensione più piccola.
• Un contrasto forte su sfondo chiaro come su sfondo scuro. Le schede dei browser esistono in entrambe le varianti, e un’icona che sparisce su una fallisce la metà delle volte.
• Lascia un po’ d’aria: un disegno che tocca i bordi appare stretto accanto alle altre schede.

Provala in piccolo, su entrambi i temi

Guarda la versione da 16 pixel a grandezza reale, su bianco e su un nero quasi pieno. La maggior parte dei difetti di un’icona è invisibile a ogni altra dimensione ed evidente a quella.

Per un sito web, prendi tutto il set

Un ICO da solo non basta più da anni. Il generatore di favicon prende lo stesso SVG e produce il set moderno completo (l’ICO, le dimensioni PNG che cercano Apple e Android, e le voci del manifest): è ciò di cui un sito ha davvero bisogno.

È sicuro caricare un SVG?

La domanda è legittima, perché l’SVG è l’unico formato immagine che in realtà è un programma: può contenere script e riferimenti a risorse esterne.

Ogni SVG viene controllato prima che qualsiasi cosa lo analizzi. I file che dichiarano tipi di documento o entità, contengono script o fanno riferimento a risorse esterne vengono rifiutati subito invece che ripuliti, e il motore di rendering ignora inoltre i riferimenti esterni. Poiché il risultato è un bitmap reso, nulla del tuo file potrebbe mai essere eseguito da nessuna parte.

Dove mettere il file

Chiamalo favicon.ico e mettilo nella radice del tuo sito (/favicon.ico), non in una cartella di risorse. I browser chiedono quel percorso preciso senza che glielo si dica, così come i lettori di feed, le app di messaggistica che costruiscono anteprime dei link e i gestori di preferiti.

Puoi anche dichiararlo nel tuo HTML, ma è il file nella radice a servire tutti i client che non leggono prima il tuo codice.

Perché non usare semplicemente una favicon SVG?

Si può, e i browser moderni la supportano: <link rel="icon" href="/icon.svg"> funziona in Chrome, Firefox e Safari, e resta nitida a tutte le dimensioni, anche su schermi che ancora non esistono.

Ciò che non copre è tutto ciò che non è un browser moderno: collegamenti di Windows, installatori, client datati e la richiesta automatica a /favicon.ico. La risposta abituale è fare entrambe le cose: un’icona SVG dichiarata nell’HTML e un ICO nella radice come riserva. Questo strumento crea il secondo a partire dalla prima.

Recuperare il disegno di una vecchia icona

Nella direzione opposta, la conversione ICO in PNG estrae l’immagine più grande da un’icona esistente. Otterrai un bitmap, non vettori (un ICO non contiene alcuna informazione sulle forme da recuperare), ma spesso basta per ridisegnare.

Cosa succede al tuo file

I browser non sanno scrivere il contenitore ICO: la conversione avviene quindi sul nostro server. Il file caricato viene eliminato non appena la conversione è terminata, il risultato viene eliminato nel momento in cui lo scarichi, e tutto ciò che viene abbandonato viene cancellato automaticamente.