Convertir PNG en ICO

Presque tous ceux qui convertissent un PNG en ICO fabriquent un favicon. Depuis bientôt trente ans, les navigateurs demandent /favicon.ico à la racine de chaque site, et ils continuent de le faire quoi que déclare votre HTML. Un fichier posé là met donc fin à un filet continu de 404 dans vos journaux et couvre les outils qui ne regardent nulle part ailleurs.

Les déclarations modernes peuvent tout aussi bien pointer vers un PNG ou un SVG, et la plupart des sites servent les deux. L’ICO, lui, est le filet de sécurité qu’on n’a jamais besoin de déclarer.

Un contenant, et non un format de compression — c’est pourquoi cette conversion ne perd rien de notable. Votre image y est rangée en PNG, une par taille, canal alpha compris, et un logo aux angles arrondis ou une marque à coins transparents les conserve exactement.

Cela explique aussi pourquoi le fichier reste si léger. Rien n’est recalculé : on pose devant les images un répertoire qui annonce les tailles qu’elles couvrent.

Une limite vient du format lui-même, et elle est ferme : une icône s’arrête à 256 pixels, et tout ce qui dépasse est réduit. Le champ de taille d’une entrée du répertoire ICO tient sur un seul octet, et 256 s’y écrit zéro parce qu’il n’y entre pas.

Sous ce plafond, c’est vous qui choisissez. Le réglage « Tailles d’icône » décide de ce qui entre dans le répertoire, et la valeur par défaut écrit trois entrées — 48, 32 et 16 pixels, la plus grande d’abord — chacune rangée comme son propre PNG. C’est l’arrangement qu’un favicon réclame depuis toujours : le navigateur lit le répertoire et prend l’entrée la plus proche de la taille qu’il s’apprête à dessiner, au lieu de réduire une grande image à la volée avec un filtre à tout faire.

Chaque entrée écrite ici est carrée, parce qu’une icône est carrée. Une image qui ne l’est pas n’est ni recadrée ni étirée : elle est centrée sur le carré à la plus grande échelle qui tienne, et le reste demeure transparent. Rien n’est déformé, mais un logo tout en longueur n’occupe alors qu’une moitié du cadre et paraît plus petit que ses voisins dans une rangée d’onglets.

Remettez-le donc au carré dans le logiciel qui l’a produit, à 256 pixels ou plus, et laissez la marque remplir environ quatre-vingt-dix pour cent du cadre. C’est une seule retouche à la source, et elle décide de la lisibilité de l’icône plus que tout le reste de cette page.

16 et 32 pixels sont celles qui comptent en pratique : 16 pour l’onglet et la liste des favoris, 32 pour la barre des tâches et l’essentiel des usages sur le bureau. Windows dessine en plus certaines vues en 48 et en 256.

Ce sont précisément les trois que le réglage par défaut écrit, et c’est pourquoi il est celui par défaut. Partez grand malgré tout : chaque entrée est réduite depuis l’image que vous déposez. Un modèle de 256 pixels donne un 48, un 32 et un 16 nets ; un modèle de 32 pixels agrandi à 256 donne exactement ce que cela laisse imaginer.

Ce qui piège les gens n’est pas le format, c’est le calcul. À 16 pixels, une lettre fait une dizaine de pixels de haut, et cela ne suffit ni pour un nom écrit en toutes lettres, ni pour une baseline, ni pour le moindre trait plus fin que le reste.

En français, une difficulté de plus se présente à cette taille : l’accent. Sur une initiale É, À ou Ç, le signe diacritique fait un ou deux pixels et disparaît le premier, ce qui laisse un E là où le nom commence par un É. Ce qui marche, c’est une forme, un fort contraste, peu de couleurs — l’initiale plutôt que le nom, le symbole plutôt que le logotype complet. Vérifiez-le en réduisant votre PNG à 16 pixels avant de convertir : si vous ne reconnaissez pas ce que c’est, aucun format ne le sauvera.

Placez-le sous le nom favicon.ico à la racine du site. Ce seul emplacement couvre les navigateurs qui le demandent directement, les lecteurs de flux et les outils anciens qui ne cherchent nulle part ailleurs.

Le déclarer en plus dans l’en-tête du HTML vaut la peine, à côté d’un PNG pour les navigateurs récents et d’un apple-touch-icon pour l’écran d’accueil iOS. L’ICO est le plancher, pas toute la stratégie.

Presque toujours du cache, et les favicons sont mis en cache avec un acharnement inhabituel — par le navigateur, par le CDN placé devant le site et parfois par le système lui-même.

Appelez directement l’URL de l’icône pour confirmer que le nouveau fichier est bien servi, puis effacez les données de site pour cette seule origine au lieu de vider tout le navigateur. S’il y a un CDN devant, purgez-le aussi. Une fois le fichier confirmé correct, le reste est une affaire de patience.

Déposez autant de PNG que vous voulez. Chacun devient son propre ICO et ils reviennent ensemble dans un ZIP — ce qu’il faut pour une application ou pour une série de sites qui réclament chacun leur symbole.

La conversion se fait dans votre navigateur : pas de téléversement, pas de file d’attente et pas d’autre limite que votre propre machine. Des icônes sont assez petites pour que ce ne soit jamais la contrainte.