Convertir HEIC en ICO

C’est l’étape qui décide si le résultat semble délibéré. Rien dans cette conversion ne recadre : l’image garde ses proportions et est centrée sur un canevas carré à la plus grande échelle qui tient, si bien qu’une frame iPhone 4:3 normale de 4 032 par 3 024 arrive comme une image 4:3 avec un quart de l’icône vide au-dessus et en dessous. Rien n’est étiré, ce qui est la moitié importante — mais un favicon fait 16 pixels de haut et vous venez d’en donner quatre.

Ouvrez la photo dans l’app Photos, touchez Édition, choisissez l’outil de recadrage et prenez le ratio carré, puis positionnez-le sur la partie que vous voulez réellement — les lettres sur l’enseigne, l’emblème, l’objet unique. Enregistrez, partagez la copie recadrée, et convertissez celle-ci. Trente secondes de recadrage valent plus que n’importe quel réglage de cette page.

Un favicon est dessiné à 16 pixels CSS. Sur un écran haute densité, le navigateur peut prendre 32 pixels physiques, et une barre de favoris ou un onglet épinglé peuvent aller un peu plus grand, mais 16 par 16 est la taille à concevoir pour. Cela fait 256 pixels au total, moins qu’il n’y a de mots sur cette page.

Ce qui survit à cette taille est une forme et une ou deux couleurs. Ce qui ne survit pas, c’est le texte en dessous d’environ quatre caractères, les lignes fines, les dégradés, les ombres et tout ce qui a un fond derrière. Une photographie d’une devanture devient une tache brune. Une photographie d’une seule lettre grasse peinte sur un mur, recadrée serrée, devient une icône reconnaissable — la différence est entièrement dans ce qui a été photographié et à quelle distance.

Le fichier est un en-tête de six octets, puis une entrée de répertoire de seize octets par taille, puis un PNG pour chacune — trois d’entre eux avec les réglages par défaut, à 48, 32 et 16 pixels, listés du plus grand au plus petit. Le format autorise aussi une charge utile en bitmap brut et c’est ce qu’il signifiait à l’origine, mais chaque version de Windows depuis Vista lit un PNG dans une icône et le fichier en sort une fraction de la taille, donc c’est ce qui est écrit.

Une bizarrerie est visible dans un éditeur hexadécimal : les champs de largeur et de hauteur dans le répertoire sont d’un octet chacun, donc 256 ne tient pas et la convention du format est d’y écrire zéro à la place. Une icône dont l’entrée dit que sa taille est 0 par 0 est la spécification qui fonctionne comme prévu, pas un fichier corrompu. Vous ne la rencontrerez que si vous choisissez un jeu de tailles qui inclut 256 ; les trois par défaut tiennent toutes dans un octet et se lisent comme elles-mêmes.

Quoi que vous donniez à manger, rien dans le fichier ne dépasse 256 pixels — le plafond est appliqué au passage et il n’y a aucun réglage qui l’augmente. Une photographie de 12 mégapixels est réduite d’un facteur d’environ seize dans chaque direction pour l’atteindre, et une de 48 mégapixels de plus de trente. Les tailles réellement écrites sont tirées de là, donc avec le jeu par défaut la réduction est d’un facteur de quatre-vingt-quatre avant que la plus grande entrée soit atteinte.

Chacune de ces réductions est faite avec un lissage de haute qualité dans un canevas, ce qui est la bonne façon de faire : réduire une grande photographie fait la moyenne d’un grand nombre de pixels dans chaque pixel de sortie et cache le bruit plutôt que de le montrer. Le résultat est une image petite et propre de quelque chose qui n’a jamais été censé être petit, ce qui est un problème différent et pas un que le rééchantillonnage peut résoudre.

Les icônes sont mieux avec un fond transparent, ainsi elles s’asseyent sur un chrome de navigateur clair ou sombre sans boîte visible autour d’elles. Le conteneur ici le supporte, parce que la charge utile est un PNG et qu’un PNG porte l’alpha.

Une photo d’appareil n’a aucune transparence, donc ce que vous obtenez est un carré entièrement opaque. Si la marque que vous avez photographiée est sombre sur un mur clair, le mur clair devient le fond de l’icône et il apparaîtra comme un rectangle contre un thème de navigateur sombre. Retirer ce fond est un travail d’éditeur avant la conversion, pas quelque chose que la conversion peut deviner.

Si vous allez photographier quelque chose spécifiquement pour cela, prenez-le aussi plat et aussi près que l’objectif le permet : l’emblème seul, remplissant le cadre, de face, en lumière égale sans ombre dessus. Évitez l’enseigne entière, la devanture entière et le produit entier. Un motif, une couleur dominante, des bords francs.

Cela vaut aussi la peine de photographier la marque sur un fond uni que vous pourrez détourer plus tard — une feuille de papier, un mur uni — parce que cela vous donne l’option d’une icône transparente sans reconstruire les bords à la main. Si l’activité a un vrai fichier de logo quelque part dans un courriel d’un designer, c’est un meilleur point de départ que n’importe quelle photographie, et cela vaut dix minutes de recherche avant la conversion.

L’image est décodée et réencodée sur le chemin vers la charge utile PNG, donc rien des métadonnées du HEIC n’atteint l’icône : pas de date de capture, pas de modèle d’appareil, pas de coordonnée GPS. C’est sans ambiguïté bon ici, puisqu’un favicon est servi à chaque visiteur du site et publierait autrement où la photo a été prise.

Le profil Display P3 qu’un iPhone attache ne voyage pas non plus, donc les couleurs saturées s’afficheront un peu plus ternes que sur le téléphone. À 16 pixels ce n’est pas quelque chose que quiconque remarquera, et cela retire une variable de l’apparence de l’icône selon les navigateurs.

Deux choses valent la peine d’être faites avec le résultat. Téléversez-le là où votre constructeur de site l’a demandé, et veillez aussi à ce qu’une copie se trouve à la racine du domaine comme favicon.ico, parce que les navigateurs, les robots d’indexation et les aperçus de liens demandent ce chemin de leur propre initiative que la page le déclare ou non.

Puis vérifiez-le dans un vrai onglet plutôt que dans l’aperçu du constructeur, à la taille où il sera réellement vu, à la fois sur un thème de navigateur clair et sombre. La mise en cache est agressive avec les favicons — un rechargement forcé ou une fenêtre privée est souvent nécessaire avant que le nouveau apparaisse, et plus d’une personne a reconverti un fichier trois fois à cause de cela plutôt qu’à cause de quoi que ce soit qui n’allait pas avec.

Tout le travail se fait dans le navigateur : libheif décode le HEIC, un canevas le redimensionne, l’encodeur PNG tourne et le conteneur d’icône est écrit par quelques dizaines de lignes de JavaScript. Rien n’est transmis, ce que vous pouvez vérifier dans l’onglet réseau ou en débranchant d’abord.

Cela veut aussi dire pas de file d’attente et pas d’attente. Faire une icône est un travail itératif — recadrez plus serré, essayez l’autre photo, essayez-la sans le fond — et pouvoir lancer six tentatives en une minute sur votre propre machine est ce qui rend l’itération praticable.

La recommandation honnête, si la photo ne se réduit pas bien, n’est pas d’utiliser une photo. Un favicon dessiné comme une forme — une initiale dans une police forte, une silhouette simple, une couleur unie avec une lettre en réserve — se lira à 16 pixels là où une photo ne le fera jamais, et il peut être fait dans n’importe quel outil vectoriel en quelques minutes.

Si vous allez dans cette direction, produisez-le en SVG et convertissez plutôt ce SVG en ICO : il entre dans le même conteneur avec le même jeu de tailles, mais les pixels dont il part sont rendus depuis le dessin plutôt que capturés à travers un objectif, donc les bords sont francs là où ceux d’une photo sont doux. Cette page existe parce que parfois la photo est tout ce qu’il y a, et elle produira un fichier utilisable — mais elle ne rendra pas une devanture lisible dans un onglet de navigateur.