Générateur de favicon

Qu’est-ce qu’un générateur de favicon ?

Un générateur de favicon transforme une image ou un simple caractère en la petite icône affichée dans l’onglet du navigateur, les favoris et l’écran d’accueil d’un téléphone. Celui-ci propose deux points de départ : téléverser une image existante, ou taper une lettre ou un emoji et laisser l’outil dessiner l’icône directement à partir de ce caractère. En mode texte, un champ de texte court, un sélecteur de couleur de fond, un sélecteur de couleur pour le texte et un choix de forme — carré, arrondi ou cercle — suffisent à produire un dessin cohérent sans ouvrir un logiciel de dessin.

Un aperçu en direct affiche le résultat à 16, 32, 48 et 180 pixels, les quatre tailles auxquelles un favicon est réellement montré : onglet, barre de favoris, raccourci et icône Apple touch. Un champ pour le nom du site alimente en parallèle le fichier site.webmanifest, celui que les navigateurs lisent pour proposer l’ajout à l’écran d’accueil.

Les téléchargements couvrent les deux usages courants du web : un vrai favicon.ico qui contient les versions 16, 32 et 48 pixels dans un seul fichier, et des PNG séparés en 16, 32, 180 — nommé apple-touch-icon.png —, 192 et 512 pixels. Deux boutons de copie fournissent ensuite les balises HTML à coller dans le head de la page et le JSON du site.webmanifest, pour éviter de retaper ces déclarations de mémoire.

Comment l’utiliser

1. Choisissez votre point de départ. Téléversez une image, ou basculez sur le mode texte et tapez une lettre ou un emoji ; réglez alors la couleur de fond, la couleur du texte et la forme — carré, arrondi ou cercle.
2. Vérifiez l’aperçu aux tailles réelles. Regardez le rendu à 16, 32, 48 et 180 pixels — c’est la taille de l’onglet, pas celle du grand aperçu, qui décide si le dessin tient encore debout — et renseignez le nom du site pour le manifest.
3. Téléchargez et intégrez. Récupérez le favicon.ico et les PNG, puis copiez les balises HTML et le JSON du site.webmanifest pour les coller dans le head de votre page.

Ce qu’il y a vraiment dans un fichier .ico

Un fichier ICO n’est pas vraiment un format d’image : c’est une petite archive. Il commence par six octets d’en-tête, suivis d’une entrée de répertoire de seize octets pour chaque image qu’il contient, puis des images elles-mêmes mises bout à bout. C’est cette structure qui permet à un favicon de porter plusieurs tailles à la fois : le navigateur choisit dans l’archive celle dont il a besoin, si bien que l’icône de 16 pixels d’un onglet et celle de 48 pixels d’un raccourci peuvent être des dessins différents plutôt que le même dessin simplement écrasé.

Chaque entrée de répertoire stocke sa largeur et sa hauteur sur un seul octet, ce qui plafonne la valeur codable à 255 — 256 s’écrit donc zéro. Ce n’est pas une curiosité de spécification : ce cas apparaît dans des fichiers réels, y compris dans le favicon que ce site utilise lui-même. En le lisant directement, on trouve quatre entrées, en 16, 32, 48 et 256 pixels, et le fichier mélange des charges utiles bitmap et des charges utiles PNG dans une seule et même archive.

Depuis Windows Vista, la charge utile d’une entrée peut être un PNG entier plutôt qu’un bitmap brut, et c’est précisément ce qui rend possible d’écrire un ICO depuis un navigateur : un canvas produit déjà du PNG, l’outil n’a donc qu’à indexer ces PNG dans le répertoire plutôt qu’à réinventer un encodage bitmap. La taille déclarée dans l’entrée et les dimensions réelles en pixels de la charge utile sont deux champs distincts, et rien dans le format n’oblige à ce qu’ils concordent ; cet outil dessine chaque charge utile exactement à la taille que son entrée déclare.

La sortie a été contrôlée avec deux lecteurs indépendants livrés avec macOS : file(1) l’identifie comme une MS Windows icon resource avec le bon nombre d’icônes et les bonnes tailles écrites, et sips reconnaît le format. Au total, 41 vérifications ont été menées, dont le fait que chaque PNG intégré revient identique octet pour octet après avoir été écrit puis relu, que les entrées sont ordonnées de la plus petite à la plus grande, et qu’une entrée de 256 pixels survit à l’aller-retour par l’octet zéro.

Limites assumées

Une icône de 16 sur 16 pixels, c’est 256 pixels en tout, et le détail n’y survit pas. Le conseil honnête n’est pas d’espérer qu’un algorithme de réduction sauve un logo complexe, mais de simplifier la marque avant de la réduire — c’est pour cela que l’aperçu montre la version 16 pixels et pas seulement une grande image rassurante.

L’outil écrit des ICO à charges utiles PNG, ce qui couvre tout navigateur et système récents ; un logiciel assez ancien pour précéder Windows Vista peut en revanche attendre des bitmaps bruts et ne pas savoir lire ces PNG intégrés. Et l’outil réduit ce que vous lui donnez, il ne le redessine pas : il ne peut pas savoir de quoi votre logo devrait avoir l’air une fois ramené à la taille d’un onglet.

La transparence est conservée dans les fichiers produits, mais ce qu’une plateforme en fait ensuite — coins arrondis automatiques, composition sur un fond clair ou sombre — relève de cette plateforme et sort du fichier lui-même. Par ailleurs, réencoder l’image via un canvas efface toutes les métadonnées que le fichier source pouvait porter, le même compromis que fait le convertisseur d’images.

Pourquoi est-ce gratuit ?

Tout tourne dans le navigateur du lecteur : le décodage de l’image, le dessin du texte ou de l’emoji, l’assemblage de l’archive ICO et l’écriture des PNG se font sur l’appareil, sans jamais envoyer l’image vers un serveur. C’est ce qui rend l’outil gratuit sans compte à créer, sans filigrane à retirer et sans limite de nombre de fichiers.

FreeToGenerate.com réunit des outils qui fonctionnent selon ce même principe : chacun vit sur sa propre page, sans inscription, avec le traitement fait localement chaque fois que c’est possible.