Convertir AVIF en ICO

Personne ne dessine un logo en AVIF. Le fichier est arrivé parce que quelque chose l’a converti : une étape de build qui passe sur chaque image d’un dossier d’actifs, un CMS qui ré-encode les téléversements, un CDN qui négocie le format par requête, ou un clic droit sur un site en production parce que les fichiers de design datent de trois agences.

Cela compte parce que vous travaillez depuis un dérivé. Tout ce que la chaîne a fait — un redimensionnement à la plus grande taille dont la page avait besoin, un passage avec pertes à la qualité spécifiée par la configuration, un aplatissement sur un fond — est figé, et cette conversion part de cela plutôt que du visuel. C’est un endroit légitime pour commencer, et cela vaut dix minutes d’abord pour vérifier si l’original a vraiment disparu : un dépôt source, un dossier de marque, un vieux courriel du designer, ou le dossier d’actifs que l’étape de build lit, qui contient souvent encore ce que la chaîne a converti.

Les deux formats se situent aux extrémités de la question d’échelle. AVIF peut contenir une image de 65 536 pixels de côté ; un ICO s’arrête à 256, et 256 est écrit dans l’en-tête sous forme de zéro parce que le champ de taille est un seul octet et que le vrai nombre n’y tient pas.

Donc la perte décisive de cette conversion n’est pas la compression — il n’y a pas de réglage de qualité sur une cible ICO, parce que chaque image à l’intérieur du conteneur est un PNG sans perte et qu’un curseur n’aurait rien sur quoi agir. C’est la réduction d’échelle, et entre les deux plafonds elle peut atteindre un facteur de 256. Tout ce que la chaîne a préservé au-dessus de 256 pixels est jeté ici, et il n’y a aucun réglage qui le garde, parce que le conteneur n’a pas la place. L’implication pratique, c’est qu’une source très grande n’achète rien au-delà d’une réduction propre : tout ce qui dépasse environ 512 pixels est de toute façon jeté, et les qualités qui décident si l’icône fonctionne sont toutes décidées bien en deçà.

Un ICO est un conteneur conçu pour porter un ensemble : la même marque en 16, 32, 48 et 256 pixels, le système prenant celle dont il a besoin plutôt que de mettre à l’échelle une grande à la volée. Ce que cette conversion écrit, c’est cet ensemble. Le contrôle « Tailles d’icône » le choisit, le défaut est 16, 32 et 48, et chaque entrée est un PNG distinct réalisé à sa propre taille.

Cela retire la plus grande moitié du problème — un navigateur qui dessine un onglet à 16 pixels ne réduit plus une image à 256 avec un filtre passe-partout — et laisse la plus petite. Les entrées sont ré-échantillonnées depuis votre visuel, pas redessinées pour leur taille, donc un trait d’un pixel réduit de 256 à 16 reste une tache grise et le seul correctif est d’en dessiner un plus épais à cette taille. C’est un travail pour un éditeur d’icônes comme IcoFX ou GIMP, et c’est désormais une substitution unique dans un fichier qui a déjà la bonne structure plutôt qu’une reconstruction à partir de rien.

L’image n’est pas recadrée. Chaque entrée écrite ici est carrée, et une source oblongue est centrée dessus à la plus grande échelle qui tient avec de la transparence remplissant le reste — rien n’est étiré, ce qui est le bon défaut, mais la marque finit par occuper une bande au milieu d’une icône dont les voisines remplissent la leur bord à bord. À 16 pixels un logo trois fois plus large que haut obtient cinq pixels de hauteur.

Donc cadrez dans ce qui ouvre le fichier — GIMP, Squoosh et ImageMagick lisent tous l’AVIF — en rognant sur le symbole plutôt qu’en paddant un verrou déjà large. Ce que vous voulez que le convertisseur reçoive, c’est une marque à peu près carrée qui remplit son cadre, parce que tout ce qu’il fait ensuite ne fait que rapetisser l’image. Un peu de remplissage sur les quatre côtés vaut la peine d’être gardé, même ainsi, parce qu’une icône dessinée dure au bord paraît plus grande et plus lourde que ses voisines dans une rangée d’onglets.

AVIF stocke jusqu’à douze bits par canal avec un gamut étendu. Un ICO contient huit bits par canal, donc cette marge disparaît.

C’est l’endroit de la grappe AVIF où la réduction ne compte vraiment pas. Une icône à 32 pixels représente 1 024 pixels au total, ce qui est moins qu’une seule ligne d’une photo modeste, et un favicon est dessiné à la merci de la gestion des couleurs que la chrome du navigateur applique autour. Si votre icône dépend de subtilités de couleur, elle échouera pour des raisons qui n’ont rien à voir avec la profondeur de bit — la forme porte une icône et la palette la décore, et à ces tailles cette hiérarchie est absolue.

Le canal alpha passe intact, et il porte plus du résultat visuel que quoi que ce soit d’autre ici. Un onglet de navigateur est une bande claire dans un thème et une bande sombre dans un autre, et une icône avec une vraie transparence paraît juste dans les deux ; une avec un carré blanc cuit ressemble à une erreur dans l’un d’eux.

Si l’AVIF a été aplati quelque part en amont — les chaînes le font quand elles émettent aussi un repli JPEG et traitent toutes les images de la même façon — la transparence est déjà partie et cette conversion ne peut pas la ramener. Vérifiez les coins de la source avant de convertir en ouvrant sur un fond sombre, parce qu’un carré blanc est bien plus facile à corriger à l’étape du visuel qu’après avoir été livré et mis en cache partout.

AVIF est un format de diffusion web et ce que le web diffuse est en immense majorité des photos, donc le fichier moyen qui arrive sur cette page est le mauvais matériau pour une icône de loin. À 16 pixels une photo est une tache ; à 32 c’est une tache un peu plus grande.

Ce qui survit à cette taille, c’est une forme, un contraste élevé, deux ou trois couleurs : l’initiale plutôt que le mot-sigle, le symbole plutôt que le verrou complet. À 16 pixels une lettrine fait environ dix pixels de haut, ce qui suffit pour un caractère et pas pour un mot, et tout trait plus fin que les autres disparaît entièrement. Le test ne coûte rien — ramenez l’AVIF à 16 pixels dans n’importe quel visualiseur et regardez-le à distance normale. S’il est méconnaissable là, le problème est le visuel et aucun conteneur ne le réglera.

Si le vectoriel existe encore, utilisez-le. Les deux pages écrivent les mêmes tailles dans le même conteneur, donc la différence est entièrement dans ce à partir de quoi les tailles sont faites : un SVG est rendu en pixels ici, une fois, à la pleine résolution de l’icône, alors qu’un AVIF arrive en portant déjà ce que la chaîne lui a fait.

L’écart est visible aux petites tailles et il n’est pas subtil. Un vectoriel rendu proprement puis réduit à 16 garde un bord net ; un AVIF avec pertes qui a lui-même été redimensionné par un CDN a des bords mous et résonnants avant même que cette conversion ne commence, et le réduire davantage les étale sur deux lignes de pixels et divise le contraste. La route AVIF est la réponse quand le vectoriel n’est vraiment pas disponible, et cela vaut une recherche dans le dépôt avant d’accepter que c’est le cas — une source de favicon SVG est souvent dans le même dossier que celui que la chaîne a lu.

Mettez-la à la racine du site comme favicon.ico. Les navigateurs ont demandé ce chemin depuis près de trente ans indépendamment de ce que le HTML déclare, donc un fichier là arrête un flot de 404 dans le journal d’accès et couvre les lecteurs de flux, les aperçus de liens et les outils plus anciens qui ne regardent nulle part ailleurs. Cela coûte quelques kilo-octets et c’est le seul placement de favicon qui ne demande aucun balisage.

Ne laissez pas la chaîne qui a produit votre AVIF approcher ce fichier. La négociation de contenu qui échange des images contre de l’AVIF est exactement ce qu’il faut pour le contenu de page et mauvais pour l’icône, parce que la requête pour /favicon.ico est souvent faite par quelque chose qui n’est pas du tout un navigateur moderne. Servez l’ICO en tant qu’ICO, et déclarez un PNG ou un SVG à côté pour les navigateurs qui en prendront un.

Déposez jusqu’à 100 fichiers AVIF d’un coup et chacun devient son propre ICO, renvoyés ensemble en un ZIP. Cela correspond à la situation pour laquelle cette page est écrite, où une étape de build a déjà converti tout un dossier d’icônes et où l’ensemble complet doit revenir.

Tout cela tourne dans votre navigateur, donc il n’y a pas de téléversement, et le plafond de 100 Mo par fichier du gratuit n’est jamais la contrainte — les icônes sont assez petites pour que ni le plafond ni la machine ne soient ce qui vous arrête. La contrainte est de savoir si chacune se lit à 16 pixels, et c’est une question de visuel plutôt que de débit. Un lot est aussi le moment d’être honnête sur le nombre d’icônes dont un projet a besoin : la plupart des sites veulent une marque bien faite plutôt qu’une douzaine de variantes, et un dossier de quarante est en général le signe que c’est le dossier d’actifs qui est converti au lieu de l’icône.