SVG vers Favicon

SVG vers Favicon : générer toutes les tailles et favicon.ico en une seule fois

Les sites web ont généralement besoin d’un ensemble complet d’icônes : les navigateurs utilisent 16 et 32, les raccourcis Windows peuvent utiliser un favicon.ico multirésolution, iOS utilise 180 pour l’écran d’accueil et les manifestes PWA utilisent souvent 192 et 512. Exporter chaque taille manuellement est fastidieux et peut entraîner des dimensions incohérentes. Cet outil génère l’ensemble à partir d’un seul SVG source, avec .ico et code de référence. Tout est traité localement dans le navigateur et les fichiers ne sont pas envoyés au serveur.

Deux méthodes d’entrée et validation immédiate

Vous pouvez importer un fichier .svg ou coller directement le code source SVG dans la zone de texte, par exemple du code copié depuis un outil de conception. L’entrée est validée immédiatement : l’outil vérifie si le code SVG est valide, s’il contient un viewBox, indique ses dimensions et vérifie s’il s’agit d’un carré 1:1. Un icône 1:1 est recommandé pour Favicon. Les images non carrées déclenchent un avertissement mais peuvent tout de même être traitées. Le SVG est rendu en étant chargé comme une image et les scripts présents dans le fichier ne sont pas exécutés.

Sélection des tailles

Les tailles sont regroupées par usage. Les tailles courantes sont 16, 32, 48, 180, 192 et 512, toutes sélectionnées par défaut. Les tailles supplémentaires 64, 128 et 256 peuvent être sélectionnées selon les besoins, et une taille personnalisée peut également être saisie. La page propose trois boutons prédéfinis : Icônes de site recommandées, Toutes et Effacer. L’utilisation de chaque taille est également expliquée : 16 pour les onglets du navigateur, 32 et 48 pour les navigateurs et raccourcis Windows, 180 pour l’écran d’accueil iOS, 192 et 512 pour les manifestes PWA, et 64 et 128 pour les icônes générales.

Arrière-plan et marge intérieure

L’arrière-plan est transparent par défaut, ce qui convient aux icônes déjà carrées ou disposant d’un espace intérieur. Si l’image source est trop proche des bords ou doit être utilisée sur un fond sombre, vous pouvez choisir une couleur de remplissage et définir la couleur d’arrière-plan. La marge intérieure ajoute de l’espace autour de l’icône sous forme de pourcentage, avec des valeurs rapides comme 0, 5%, 10%, 15% et 20%, afin d’éviter que l’icône touche le bord du canevas. Tous les formats utilisent les mêmes paramètres de fond et de marge pour conserver une apparence cohérente.

Résultats générés et téléchargements

Après la génération, les résultats sont regroupés par usage. En haut se trouve un aperçu semblable à un onglet de navigateur, affichant l’icône à sa taille réelle de 16 pixels. Le groupe Favicon liste les tailles inférieures à 180 et explique la composition de favicon.ico. Le groupe Site et PWA liste les tailles supérieures ou égales à 180. Chaque taille affiche un aperçu, le poids du fichier et un bouton de téléchargement individuel. Quatre méthodes de téléchargement sont proposées : télécharger une taille individuelle, télécharger tous les PNG successivement, télécharger favicon.ico contenant plusieurs résolutions standard, ou télécharger un ZIP contenant tous les PNG et favicon.ico.

Code HTML de référence

La page génère automatiquement le code HTML de référence et la section d’icônes du webmanifest selon les tailles sélectionnées. Le code contient les références à favicon.ico, à chaque taille PNG et à apple-touch-icon. Il suffit de le copier dans votre projet. Les chemins sont organisés à partir de la racine du site.

Questions fréquentes et gestion des erreurs

Pourquoi le ico généré ne contient-il pas 512 ? Les conteneurs ICO offrent une compatibilité limitée avec les entrées PNG supérieures à 256. L’outil écrit donc automatiquement uniquement les tailles jusqu’à 256 dans le fichier ico. Le PNG 512 est toujours fourni séparément et la page indique les tailles réellement incluses dans le ico.
Que faire si les polices du SVG ne sont pas rendues ? Lorsqu’un navigateur rend un SVG autonome, il ne charge pas les fichiers de polices système externes. Convertissez le texte en tracés dans le SVG.
Que se passe-t-il si aucune taille n’est sélectionnée ? L’outil demande de sélectionner au moins une taille de sortie.
Que faire si le SVG est invalide ou si le rendu échoue ? Cela est généralement dû à un code incomplet ou à des balises invalides. Réexportez le SVG depuis l’outil de conception et réessayez.

Cas d’utilisation et confidentialité

Convient à la configuration des icônes d’onglet pour les sites web et systèmes d’administration, des icônes d’écran d’accueil pour les sites mobiles, des icônes de manifestes PWA et à la conversion rapide de Logos vectoriels en un ensemble complet de ressources d’icônes. Le rendu SVG, l’encodage PNG et la création du fichier ICO sont entièrement effectués localement dans le navigateur. La page ne possède aucune interface d’envoi, les fichiers ne sont ni envoyés au serveur ni enregistrés.