Convertir SVG en ICO

L’ICO est un répertoire de tailles : 16, 32, 48, 256 pixels de la même image, dans un fichier qu’un navigateur ou un système d’exploitation choisit selon le contexte. Toutes ces tailles dérivent d’un seul artwork, et la seule manière sensée de produire cet artwork est depuis un vecteur, parce qu’un raster redimensionné à chaque taille est flou à au moins certaines d’elles.

Le SVG est rendu une fois par taille à la résolution exacte dont le fichier a besoin, avec un antialiasing correct et des bords nets. C’est la raison pour laquelle cette conversion est la voie standard pour produire un favicon, et la raison pour laquelle tant d’autres formats sources (PNG, JPG, TIFF) sont des contournements d’une situation où le SVG n’était pas disponible.

Le contrôle « Tailles d’icône » sur cette page est la seule décision. Chaque taille est écrite comme sa propre image dans l’ICO, ce que veut un navigateur pour un favicon. Le défaut est 16, 32 et 48, ce qui couvre l’onglet, le raccourci sur le bureau et la barre des tâches. Ajouter 64, 128 et 256 produit un ICO convenable pour une icône d’application Windows.

Moins de tailles font un fichier plus petit, ce qui peut importer pour un site dont le favicon est très demandé. Un favicon de 16, 32 et 48 fait en général moins de 2 Ko. La taille 256 à elle seule peut faire la moitié de cela, parce que chaque taille ajoutée est une image PNG complète dans le conteneur.

Le dessin est rendu à sa plus grande taille, puis réduit à chaque taille d’icône par un filtre de haute qualité. resvg dessine le SVG une fois à 256 pixels, le maximum que le format ICO stocke dans un seul octet de son en-tête (256 est enregistré comme zéro parce qu’il ne tient pas dans un octet ; chaque Windows depuis Vista lit cette convention correctement).

Chaque taille est ensuite composée sur un canevas carré avec un arrière-plan transparent, ce qui préserve le rapport d’aspect par letterboxing plutôt que par étirement. Pour un logo qui n’est pas carré, le résultat est centré avec de l’espace transparent plutôt que déformé, ce qui est ce que la plupart des contextes d’affichage attendent.

Un ICO peut contenir soit des bitmaps bruts, soit des PNG, et celui-ci contient un PNG par taille. C’est la convention moderne, cela produit un fichier qui est une fraction de la taille de l’alternative bitmap brut, et cela apporte avec lui un véritable canal alpha 8 bits — donc un logo détouré de son fond reste détouré, avec des bords anti-aliasés doux plutôt qu’un masque 1 bit crénelé.

C’est la raison la plus solide pour convertir un logo plutôt qu’une photographie en icône. Un favicon se pose sur la couleur que la barre d’onglets du navigateur se trouve avoir, et cela change entre les thèmes clair et sombre ; une marque sur un carré blanc opaque ressemble à une erreur en mode sombre. Si le SVG n’a pas de fond transparent mais que l’artwork est sur du blanc plat, supprimer ce fond avant la conversion vaut la peine d’être fait.

Le réglage d’échelle décide de la taille à laquelle le SVG est rendu avant que les tailles d’icône n’en soient extraites. Le défaut est 1,0, ce qui rend 256 pixels de large, la taille maximale d’ICO. L’échelle va de 0,1 à 10, ce qui donne 26 à 2 560 pixels en interne, avant la mise à l’échelle finale vers chaque taille d’icône.

L’habitude qui vaut le coup est de laisser l’échelle par défaut sauf si le dessin a du détail fin qui se perd à 32 pixels. Pour un logo simple, 1,0 produit un ICO net à toutes les tailles. Pour un dessin avec de petits détails, rendre à 2,0 ou 3,0 (512 ou 768 pixels) avant la mise à l’échelle finale améliore les bords des plus petites tailles, au prix d’un peu plus de travail d’antialiasing.

Si le dessin est destiné à un site web comme contenu visible (et non comme favicon), le SVG est presque toujours la bonne réponse livrée directement. Un navigateur rend un SVG à n’importe quelle taille, ce qui supprime le besoin d’un ICO, d’un srcset et d’une logique de repli. La conversion en ICO n’a de sens que lorsqu’un composant système attend ce conteneur précis.

Pour une icône d’application Windows, l’ICO est nécessaire, mais vérifiez si le système cible accepte aussi un PNG ou un SVG via un manifeste. De plus en plus d’environnements de bureau le font, ce qui rend la conversion ICO obsolète dans ces cas-là. Le format ICO est aussi en train d’être remplacé pour de nombreuses utilisations web par le SVG directement servi via `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`.

Le SVG stocke le texte comme texte et désigne une police par son nom. Si la police n’est pas embarquée dans le fichier, le moteur de rendu en choisit une autre, et un motmarque soigneusement espacé revient avec des caractères et un espacement différents. À 16 pixels cela est catastrophique, parce que la substitution peut décaler le glyphe de plusieurs pixels et le rendre méconnaissable.

La correction appartient à l’outil de design, pas ici : convertissez le texte en contours ou en chemins avant d’exporter le SVG, et les lettres deviennent des formes que rien ne peut remplacer. Pour un favicon qui ne contient que du texte, c’est indispensable. Pour un favicon qui n’est qu’un symbole, ce n’est pas un problème.

Pour un site web, placez-le à la racine sous /favicon.ico. Les navigateurs demandent ce chemin que quelque chose dans le balisage le pointe ou non, et un 404 pour lui est l’une des lignes les plus communes dans un journal de serveur. Ajouter un élément link dans le head ne fait pas de mal et rend l’intention explicite.

Pour un raccourci Windows, faites un clic droit sur le raccourci, choisissez Propriétés, puis Changer d’icône, et pointez vers le fichier. Pour une application, l’outil de build veut en général un ICO multi-tailles et le dira — choisissez « Toutes les tailles courantes » et il en obtient un, de 256 à 16, depuis cette page plutôt que depuis un outil d’icône séparé. Les navigateurs modernes acceptent aussi un PNG ou un SVG comme favicon via un élément link, ce qui vaut la peine d’être su : l’ICO n’est requis que pour la requête /favicon.ico nue et pour Windows lui-même.

Déposez le dossier. Chaque SVG est rendu au même ensemble de tailles et chaque ICO est écrit séparément, le tout renvoyé en ZIP. Pour une suite de marques, cela produit un jeu d’icônes cohérent avec les mêmes tailles et le même niveau de qualité.

Chaque ICO garde ses propres paramètres de taille, donc si le jeu contient des marques qui veulent des tailles différentes, configurez avant de convertir. Pour un site qui veut des favicons distincts pour des sections différentes, ou pour un jeu d’icônes d’application, le batch est la voie normale.

resvg dessine chaque SVG en WebAssembly et l’ICO est assemblé dans cet onglet, sans moteur de plus à télécharger, sans téléversement, sans compte et sans quota quotidien. Ouvrir l’onglet réseau pendant une conversion est la vérification.

Pour un asset non sorti, une marque client ou un logo sous embargo, c’est la propriété qui compte. Une conversion qui ne quitte jamais le navigateur supprime la question de savoir si le service de conversion a vu le fichier, ce qui est différent d’y répondre avec une politique de confidentialité.