Générateur de favicon

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

Un favicon est la petite icône qui apparaît dans un onglet du navigateur, dans une liste de favoris, dans l’aperçu « ajouter à l’écran d’accueil » d’un téléphone et dans une tuile Windows. Le problème, c’est qu’« un favicon » n’est pas un fichier — les différentes plateformes attendent des tailles et des noms de fichiers différents. Un navigateur de bureau veut un favicon.ico classique, iOS veut un apple-touch-icon.png en 180×180, une PWA installable veut du 192 et 512 dans un site.webmanifest, et les navigateurs modernes récupèrent aussi des PNG autonomes. Générer tout cela à la main, plus les balises <head> qui les câblent, est exactement le genre de tâche fastidieuse qu’il ne faut jamais faire deux fois à la main.

Cette page produit le jeu complet à partir d’une seule source : soit une image que vous fournissez, soit une lettre sur un fond uni (pratique pour une marque rapide « première lettre »). Cochez les tailles voulues et elle regroupe tout dans un .zip — un ICO multi-images, les PNG autonomes, le webmanifest et un extrait HTML listant les balises exactes <link> et <meta> à coller. Toute la rasterisation se fait dans votre navigateur.

Comment l’utiliser#

1. Choisissez une Source :
   • Image — faites glisser (ou choisissez) n’importe quelle image à peu près carrée. Elle est dessinée dans chaque taille sélectionnée.
   • Lettre — saisissez un ou deux caractères (par défaut A), choisissez une Couleur de fond (par défaut bleu ciel) et une Couleur du texte (par défaut blanc). La lettre est centrée sur le fond à chaque taille.
2. Cochez les Tailles voulues parmi 16, 32, 48, 180, 192, 512. Les six sont cochées par défaut. Le 48 ne vit jamais que dans favicon.ico (pas de PNG autonome), il est donc inclus automatiquement quand 16 et 32 le sont.
3. Observez le canevas d’Aperçu — il affiche la plus grande taille sélectionnée sur un damier de transparence afin que vous puissiez voir les éventuelles zones transparentes.
4. Cliquez sur Télécharger .zip. L’archive contient, pour la sélection par défaut de toutes les tailles :
   • favicon.ico — un ICO multi-images regroupant 16, 32 et 48 sous forme de PNG embarqués (le format Vista+ que tout navigateur moderne accepte).
   • favicon-16x16.png, favicon-32x32.png — des PNG autonomes.
   • apple-touch-icon.png — l’icône iOS 180×180.
   • android-chrome-192x192.png, android-chrome-512x512.png — les icônes du manifeste PWA.
   • site.webmanifest — référençant les icônes 192/512, avec les couleurs de thème et de fond.
   • html-snippet.html — les balises <link rel="icon">, <link rel="apple-touch-icon">, <link rel="manifest"> et <meta name="theme-color">.
5. Décompressez à la racine de votre site, collez l’extrait dans votre <head>, et les icônes se résolvent depuis /.

Caractéristiques principales#

• Un jeu complet aux noms conventionnels, dans un seul zip. Les noms de fichiers (favicon.ico, apple-touch-icon.png, android-chrome-512x512.png, site.webmanifest) correspondent à ce que les navigateurs et les outils de build cherchent à la racine du site par défaut.
• Encodeur ICO écrit maison. Un vrai ICO multi-images Vista+ (ICONDIR + table ICONDIRENTRY + charges utiles PNG embarquées), écrit de zéro — pas un stub 32×32 à image unique.
• Mode lettre pour des marques instantanées. Deux caractères, deux sélecteurs de couleur, c’est fini — utile pour les outils internes et les démos qui ont besoin d’une icône reconnaissable en trente secondes.
• Uniquement les fichiers réellement nécessaires. Décochez une taille et ni son PNG ni son entrée de manifeste ne sont produits ; l’extrait HTML est régénéré en conséquence.
• Extrait d’en-tête prêt à coller. Les lignes exactes <link> et <meta>, limitées aux seules ressources présentes, pour ne pas coller de références vers des fichiers que vous n’avez pas générés.
• 100 % local. L’image source ou la lettre est rasterisée dans le navigateur ; le zip est assemblé dans le navigateur. Aucun téléversement.

Exemple commenté#

Vous voulez un favicon pour un projet parallèle appelé « Glide ». Choisissez Source : Lettre, saisissez G, réglez la Couleur de fond sur #0ea5e9 et la Couleur du texte sur #ffffff, laissez les six tailles cochées et cliquez sur Télécharger .zip. La décompression donne :

favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
html-snippet.html

Le html-snippet.html contient exactement :

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

Déposez ces huit fichiers à la racine de votre site, collez les six lignes dans votre <head>, et chaque plateforme — onglet du navigateur, écran d’accueil iOS, PWA Android — résout la bonne icône.

FAQ#

Pourquoi n’y a-t-il pas de PNG autonome 48×48 ?#

Le 48 n’est consommé qu’à l’intérieur du favicon.ico (certains outils anciens lisent l’entrée 48 de l’ICO). Produire un favicon-48x48.png autonome ne serait que du poids mort qu’aucun navigateur ne récupère, donc l’outil regroupe le 48 dans l’ICO et zappe le fichier autonome.

Ai-je vraiment besoin des six tailles ?#

Pour une couverture complète, oui. Si seul l’onglet du navigateur vous importe et pas iOS ni la PWA, décochez 180, 192 et 512 et vous n’obtenez que l’ICO plus les PNG 16/32 — un bundle bien plus léger. L’extrait ne contient alors que les liens icon, sans manifeste ni lignes apple-touch.

L’ICO est décrit comme « PNG embarqué » — est-ce valide ?#

Oui. Depuis Windows Vista, un ICO peut embarquer des charges utiles PNG (au lieu de l’ancien format BMP), et tout navigateur moderne lit cette forme. Cela évite un encodeur BMP séparé et produit des fichiers plus légers pour la taille 48.

Ma lettre semble décentrée sur une taille.#

La lettre est centrée sur le canevas à chaque taille avec une police cohérente ; les lettres très carrées (comme M) et celles avec hampes ou descendantes peuvent paraître légèrement hautes ou basses à cause des métriques de police. Si un centrage au pixel près compte, dessinez la marque dans un éditeur d’image et utilisez Source : Image à la place.