SVG mantiene i bordi nitidi a ogni densità di pixel e può adattare i colori al tema. Questa flessibilità comporta un vincolo: il file deve restare autonomo, semplice e leggibile in uno spazio minuscolo.
Crea un quadrato con viewBox
Usa un viewBox quadrato, per esempio 0 0 64 64, e lascia margine attorno al simbolo. Il viewBox definisce il sistema di coordinate senza imporre una dimensione fisica di visualizzazione.
Riduci il disegno alle sue forme distintive. Dettagli sottili, piccoli spazi interni e parole intere spesso scompaiono a 16 pixel, anche se il file vettoriale resta tecnicamente nitido.
| Elemento | Motivo | Verifica |
|---|---|---|
| viewBox quadrato | Ritaglio prevedibile | Anteprima 16×16 |
| Tracciati semplici | Leggibilità | Schede chiare e scure |
| Nessuna dipendenza | Caricamento autonomo | Rete offline |
| ICO di riserva | Client meno recenti | URL nella radice |
Rendi il file autonomo
Incorpora gli stili necessari nell’SVG. Converti il testo in tracciati quando il simbolo dipende da un carattere tipografico, perché un carattere web esterno non è una dipendenza affidabile in questo contesto.
Rimuovi script, collegamenti remoti e metadati inutili dell’editor. Forme e stili semplici facilitano anche la verifica della sicurezza e riducono il peso del file.
Infine, apri il file da solo in un browser e provalo offline. Se il disegno cambia o scompare, dipende ancora da una risorsa esterna che va incorporata o sostituita.
Dichiara l’SVG con un’alternativa
Aggiungi link rel icon con type image/svg+xml e un URL relativo alla radice. Mantieni anche favicon.ico nella radice per i client che non scelgono l’SVG o richiedono direttamente l’ICO.
SVG non sostituisce l’icona Apple Touch né le icone del manifest. Esporta PNG opachi o maskable per queste interfacce.
Adatta i colori al tema
Una regola prefers-color-scheme all’interno di un elemento style può cambiare fill o stroke in modalità scura. Definisci prima un colore predefinito affidabile, poi aggiungi la variante come miglioramento progressivo.
Prova il file in schede reali e a più livelli di zoom. Controlla anche l’alternativa quando l’SVG non viene scelto: un ICO che scompare su sfondo scuro resta un problema per quei client.
Fonti primarie
Domande frequenti
Un SVG ha bisogno di width e height?
Un viewBox quadrato è l’elemento essenziale per il ridimensionamento. È possibile includere width e height espliciti, ma il browser adatta l’icona al contesto.
Può caricare un carattere esterno?
Non farci affidamento. Converti le lettere in tracciati per ottenere un file autonomo e prevedibile.
SVG basta per iOS?
No. Fornisci un’icona Apple Touch separata in PNG opaco per la schermata Home.