Pacchetto favicon da SVG o PNG

No. La conversione avviene interamente nel tuo browser. Il file non lascia mai il tuo dispositivo – non c'è alcun server che possa vederlo. Una volta caricata la pagina, lo strumento funziona persino offline.

favicon.ico (16, 32 e 48 px), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), icon-192.png e icon-512.png per Android e le web app installabili, site.webmanifest con nome e colori dell'app, snippet.html con i tag <link> e <meta> – e, se sei partito da un SVG, favicon.svg per i browser che preferiscono i vettori.

Estrai tutto nella cartella principale del sito, in modo che /favicon.ico sia raggiungibile, e incolla il contenuto di snippet.html nell'<head> delle tue pagine. Se i file stanno in una sottocartella, adatta i percorsi nello snippet e in site.webmanifest.

SVG, quando ce l'hai: ogni dimensione viene renderizzata dal vettoriale e resta nitida, e il pacchetto include la favicon SVG. Anche un PNG va bene, ma dovrebbe avere almeno 512 × 512 px: le immagini più piccole vengono ingrandite e appaiono sfocate nelle dimensioni grandi. Le immagini non quadrate vengono centrate con margine trasparente.

iOS mostra il nero dietro le aree trasparenti dell'icona nella schermata Home, quindi apple-touch-icon.png viene appiattita sul colore di sfondo scelto. Tutti gli altri file mantengono la trasparenza.

Il renderer funziona nel tuo browser senza font e quindi non può disegnare testo. Invece di produrre un'immagine in cui il testo manca silenziosamente, i file con <text> vengono rifiutati. Converti prima il testo in tracciati nel tuo editor (Inkscape: Tracciato → Da oggetto a tracciato; Illustrator: Testo → Crea contorni) e riprova.