Le SVG garde des contours nets à toutes les densités et peut adapter ses couleurs au thème. Cette souplesse vient avec une contrainte : le fichier doit rester autonome, simple et lisible dans un espace minuscule.
Construire un carré avec un viewBox
Utilisez un viewBox carré, par exemple 0 0 64 64, et laissez une marge autour du symbole. Le viewBox définit le système de coordonnées sans imposer une dimension physique au rendu.
Réduisez le dessin à ses formes distinctives. Les détails fins, petites contre-formes et mots complets disparaissent souvent à 16 pixels, même si le fichier vectoriel reste techniquement net.
| Point | Pourquoi | Test |
|---|---|---|
| viewBox carré | Recadrage prévisible | Aperçu 16×16 |
| Tracés simples | Lisibilité | Onglet clair et sombre |
| Aucune dépendance | Chargement autonome | Réseau hors ligne |
| Repli ICO | Clients anciens | URL racine |
Rendre le fichier autonome
Intégrez les styles nécessaires dans le SVG. Convertissez le texte en tracés si le symbole dépend d'une typographie, car une police web externe n'est pas une dépendance fiable dans ce contexte.
Supprimez les scripts, liens distants et métadonnées d'éditeur inutiles. Des formes et styles simples facilitent aussi l'audit de sécurité et réduisent le poids du fichier.
Ouvrez enfin le fichier seul dans le navigateur, puis testez-le hors ligne. Si le dessin change ou disparaît, il dépend encore d'une ressource extérieure qu'il faut intégrer ou remplacer.
Déclarer le SVG avec un repli
Ajoutez link rel icon avec type image/svg+xml et une URL racine. Conservez aussi favicon.ico à la racine pour les clients qui ne sélectionnent pas le SVG ou qui demandent l'ICO directement.
Le SVG ne remplace pas l'icône Apple Touch ou les icônes du manifeste. Exportez des PNG opaques ou maskable adaptés à ces interfaces.
Adapter les couleurs au thème
Une règle prefers-color-scheme dans une balise style peut modifier fill ou stroke en mode sombre. Définissez d'abord une couleur par défaut robuste, puis ajoutez la variante comme amélioration progressive.
Testez le fichier dans de vrais onglets et à plusieurs niveaux de zoom. Vérifiez également le repli lorsque le SVG n'est pas choisi : un ICO invisible sur fond sombre reste un problème pour ces clients.
Sources primaires
Questions fréquentes
Un SVG a-t-il besoin d'une largeur et hauteur ?
Un viewBox carré est l'élément essentiel pour le redimensionnement. Une largeur et une hauteur explicites peuvent être ajoutées, mais le navigateur dimensionne l'icône selon son contexte.
Peut-on charger une police externe ?
Ne comptez pas dessus. Convertissez les lettres en tracés pour obtenir un fichier autonome et prévisible.
Le SVG suffit-il pour iOS ?
Non. Fournissez séparément une icône Apple Touch PNG opaque pour l'écran d'accueil.