Générateur de Favicon | ICO et PNG en plusieurs tailles
Importez une image, recadrez-la en carré et générez un favicon.ico regroupant plusieurs tailles (16, 32, 48px et plus) ainsi qu'un jeu complet de PNG. Réduction de haute qualité par Lanczos et code HTML prêt à coller, le tout traité dans votre navigateur.
Comment déclarer un favicon (par modèle)
La façon de déclarer un favicon dépend du niveau de prise en charge visé. Voici les modèles nécessaires, du strict minimum jusqu'au support complet des PWA et du mode sombre. Tous les extraits supposent que les fichiers générés se trouvent à la racine du site.
Modèle 1 : le minimum (déposer simplement favicon.ico)
Sans écrire la moindre ligne de HTML : il suffit de placer /favicon.ico à la racine du document. Les navigateurs recherchent ce chemin implicitement, l'icône apparaît donc sans aucune balise.
your-site/
└── favicon.ico ← il suffit de le placer ici (aucun HTML requis)
<!-- Si vous préférez le déclarer, cette seule ligne suffit -->
<link rel="icon" href="/favicon.ico" sizes="any">| Recommandé pour | Sites personnels, outils internes et tous les cas où l'affichage suffit |
|---|---|
| Remarques | Ajouter sizes="any" permet aux navigateurs de traiter correctement l'ICO comme dernier recours lorsque vous ajouterez plus tard des icônes SVG ou PNG. Il est conseillé d'y regrouper 16, 32 et 48px. |
Modèle 2 : configuration standard (recommandée)
En plus de l'ICO, des fichiers PNG et un Apple Touch Icon : de loin la configuration la plus répandue aujourd'hui. Elle couvre tout, des navigateurs de bureau à l'ajout du site à l'écran d'accueil iOS.
<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">| Recommandé pour | Sites d'entreprise, blogs, médias — des sites web classiques |
|---|---|
| Remarques | Les zones transparentes d'un apple-touch-icon sont remplies en noir : exportez toujours un PNG opaque avec une couleur de fond. iOS arrondit également les angles, donc une marge d'environ 10% évite que les bords soient rognés. |
Modèle 3 : configuration PWA complète
Pour une PWA qui se lance comme une application depuis l'écran d'accueil, les icônes se déclarent dans site.webmanifest. Sans les tailles 192px et 512px, Chrome ne considérera pas l'application comme installable.
<!-- HTML (dans head) -->
<link rel="icon" href="/favicon.ico" sizes="any">
<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">
<!-- site.webmanifest -->
{
"name": "My Site",
"short_name": "Site",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}| Recommandé pour | PWA, applications web et services utilisés principalement sur mobile |
|---|---|
| Remarques | iOS ne consulte pas les icônes déclarées dans le manifeste : un apple-touch-icon reste donc nécessaire à côté. display: "standalone" masque l'interface du navigateur pour que le site se lance comme une application native. |
Modèle 4 : favicon SVG avec prise en charge du mode sombre
Un favicon SVG est indépendant de la résolution, et le CSS placé dans le SVG peut changer les couleurs en mode sombre. Déclarez à côté les fichiers ICO et PNG pour les navigateurs qui ne le prennent pas en charge.
<!-- HTML (dans head). Le premier format lisible par le navigateur l'emporte -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- favicon.svg (inversion de la couleur en mode sombre) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
</style>
<path d="M4 4h24v24H4z"/>
</svg>| Recommandé pour | Sites disposant d'un logo vectoriel, ou si vous souhaitez que l'icône change en mode sombre |
|---|---|
| Remarques | Chrome, Firefox et Edge prennent en charge les favicons SVG. Safari ignore actuellement le SVG dans rel="icon", les solutions de repli PNG et ICO sont donc indispensables. |
Modèle 5 : sous-répertoires et renouvellement du cache
Ce qu'il faut écrire lorsque les icônes ne sont pas à la racine, ou lorsque l'ancienne icône persiste après un remplacement. Les favicons sont fortement mis en cache : changer l'URL reste la solution la plus fiable.
<!-- Indiquez le chemin complet lorsque les fichiers sont dans un répertoire dédié -->
<link rel="icon" href="/assets/icons/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png?v=2">
<!-- Attention au chemin absolu si le site est servi depuis un sous-répertoire (ex. /docs/) -->
<link rel="icon" href="/docs/favicon.ico" sizes="any">| Recommandé pour | Diffusion via CDN, sites à gestion centralisée des ressources, remplacement d'icône |
|---|---|
| Remarques | La recherche implicite de /favicon.ico à la racine est le seul chemin que l'on ne peut pas modifier : même en servant les icônes depuis un sous-répertoire, garder une copie à la racine ne laisse aucun angle mort. |
Quel fichier est utilisé et où
Un aide-mémoire indiquant où chaque fichier est réellement utilisé. Il n'est pas nécessaire de tous les fournir : choisissez selon les environnements que vous souhaitez couvrir.
| Fichier | Taille | Lieu d'utilisation |
|---|---|---|
| favicon.ico | 16 / 32 / 48px | Onglets du navigateur, favoris et barre des tâches Windows. Recherché à la racine même sans aucune balise |
| favicon-16x16.png | 16×16 | Onglet du navigateur sur les écrans à résolution standard |
| favicon-32x32.png | 32×32 | Onglet du navigateur sur les écrans Retina et autres écrans haute résolution, ainsi que la barre de favoris |
| apple-touch-icon.png | 180×180 | L'icône affichée lors de l'ajout du site à l'écran d'accueil iOS ou iPadOS. La transparence est remplie en noir |
| android-chrome-192x192.png | 192×192 | Icône de l'écran d'accueil Android (via le manifeste) |
| android-chrome-512x512.png | 512×512 | Écran de démarrage de la PWA et listes d'applications (via le manifeste) |
| site.webmanifest | — | Le fichier de configuration de la PWA déclarant les icônes, la couleur de thème et le mode de lancement |
| favicon.svg | Variable | Chrome, Firefox et Edge. Permet de changer de couleur en mode sombre |
Qu'est-ce qu'un générateur de favicon ?
Un générateur de favicon est un outil qui permet de produire en une seule fois, à partir d'une seule image, un fichier favicon.ico ainsi que des PNG dans plusieurs tailles. Le format favicon.ico est particulier : il peut regrouper plusieurs résolutions (16px, 32px, 48px et davantage) au sein d'un même fichier, et le navigateur choisit automatiquement la taille la plus adaptée selon l'endroit où l'icône s'affiche — onglet, barre de favoris ou barre des tâches. Sans un tel outil, il faudrait exporter chaque taille séparément à la main et régler à chaque fois le cadrage, les marges et les couleurs ; ici, tout le parcours, du recadrage carré jusqu'aux réglages de sortie, se fait uniquement par quelques clics dans le navigateur.
Le chargement de l'image, le recadrage, la réduction ainsi que la conversion en ICO et en PNG sont entièrement traités en JavaScript, directement dans votre navigateur. L'image importée ne quitte jamais votre appareil et n'est à aucun moment envoyée à un serveur, ce qui est particulièrement rassurant pour un logo qui n'a pas encore été rendu public ou pour un visuel de marque soumis à une charte de confidentialité. La réduction elle-même repose sur l'algorithme de Lanczos, qui préserve au mieux le contraste des contours de l'image d'origine : même pour une taille aussi réduite que 16px, le texte et les traits fins d'un logo restent bien plus lisibles qu'avec une réduction linéaire simple.
Comment créer un favicon
- Importer une image Faites glisser votre logo ou votre image d'icône dans la zone prévue, ou cliquez dessus pour choisir un fichier. Les formats PNG, JPEG, SVG, WebP, GIF et BMP sont tous pris en charge, ce qui permet d'utiliser directement presque n'importe quel visuel déjà existant.
- Recadrer en carré Faites glisser le cadre affiché pour ajuster sa position, puis utilisez les quatre coins pour agrandir ou réduire la zone sélectionnée. Un favicon devant obligatoirement être carré, le rapport du cadre reste verrouillé en permanence à 1:1 et ne peut pas être déformé.
- Choisir les paramètres de sortie Définissez selon vos besoins les tailles à regrouper dans favicon.ico, les tailles de PNG supplémentaires à produire, l'algorithme de réduction ainsi qu'une éventuelle marge intérieure ou couleur de fond. Les valeurs proposées par défaut conviennent déjà à la plupart des sites.
- Générer puis vérifier l'aperçu Un clic sur « Générer les favicons » produit toutes les tailles choisies en une seule opération. L'aperçu en taille réelle permet de juger précisément le rendu du minuscule format 16px avant toute mise en ligne.
- Télécharger et mettre en place Téléchargez les fichiers un par un ou choisissez le téléchargement groupé en ZIP, puis collez le code HTML fourni dans la balise de votre site. L'ensemble de l'intégration se règle ainsi d'un seul coup.
Astuces pour en tirer le meilleur parti
- Partez d'une image carrée d'au moins 512×512px et le contour restera lisible jusqu'à 16px. Si votre image n'est pas carrée, l'outil de recadrage intégré vous laisse choisir exactement la zone carrée souhaitée.
- Lanczos3 calcule une moyenne pondérée des pixels voisins tandis que les lobes négatifs de son noyau relèvent les contours. Il préserve davantage le tracé que le redimensionnement interne du navigateur, et la différence se voit sur les logos et le texte.
- La grande particularité du format ICO est qu'un seul fichier peut contenir plusieurs tailles. En y plaçant 16, 32 et 48px, l'onglet, la barre de favoris et la barre des tâches de Windows choisiront chacun l'image conçue pour eux.
- Les Apple Touch Icon voient leurs zones transparentes remplies en noir : un PNG opaque avec une couleur de fond est donc le choix sûr. Une marge d'environ 10% évite en outre que le masque arrondi d'iOS ne rogne les bords.
- Les navigateurs conservent les favicons en cache de façon tenace. Si le remplacement n'apparaît pas, ajoutez un paramètre comme
?v=2à l'URL ou forcez un rechargement complet.
Cas d'usage
Création du favicon lors du lancement d'un nouveau site
Avant la mise en ligne, tout l'ensemble ICO et PNG ainsi que le code HTML correspondant peuvent être préparés en une seule fois, ce qui évite d'oublier une taille au moment de compléter le
.Génération groupée des tailles d'icônes pour une PWA
Les PNG en 192px et 512px nécessaires pour l'ajout à l'écran d'accueil et l'écran de démarrage peuvent être produits en même temps que le fichier site.webmanifest, plutôt que de traiter chaque taille séparément.
Conversion groupée à partir d'un logo de marque
Un logo existant peut être importé puis converti directement en un ensemble d'icônes adaptées aux différents appareils, en ajustant au passage la marge intérieure et la couleur de fond sans repartir de zéro pour chaque format.
Remplacement sur un CMS ou un générateur de site statique
Lors du renouvellement du favicon d'un site géré avec WordPress, Hugo ou un outil similaire, il devient possible de rassembler sans en oublier aucun tous les formats de fichiers requis.
Renouvellement complet des icônes lors d'un rebranding
Au moment d'un changement de logo, les icônes d'onglet, de favoris et d'écran d'accueil peuvent être mises à jour ensemble, tout en vérifiant à l'avance dans l'aperçu le rendu propre à chaque contexte d'affichage.
Glossaire
- favicon.ico
- Le nom de fichier que les navigateurs recherchent implicitement à la racine d'un site, même en l'absence de toute balise dans le HTML. Il est enregistré au format ICO, capable de regrouper plusieurs résolutions dans un seul fichier, si bien que la taille adaptée est choisie automatiquement selon le contexte d'affichage.
- Apple Touch Icon
- L'icône affichée lorsqu'un site est ajouté à l'écran d'accueil sous iOS. Les zones transparentes de l'image étant alors remplies de noir, il est recommandé de définir explicitement une couleur de fond opaque pour cette icône plutôt que de compter sur la transparence.
- Algorithme de Lanczos
- Un algorithme de réduction qui utilise un noyau dérivé de la fonction sinc, tronqué à un intervalle fini. Il préserve mieux le contraste des contours que les méthodes plus simples, ce qui le rend particulièrement adapté au texte et aux logos, où les traits fins disparaissent facilement.
- PWA (Progressive Web App)
- Le nom générique des technologies qui permettent d'ajouter un site web à l'écran d'accueil comme une application native et de l'utiliser en partie hors ligne. Elles nécessitent généralement des icônes en 192px et 512px ainsi qu'un fichier site.webmanifest.
- site.webmanifest
- Un fichier de configuration qui définit le nom, les icônes, la couleur de thème et d'autres métadonnées d'une PWA. Il est déposé à la racine du site et référencé depuis le HTML afin que le navigateur et le système d'exploitation le retrouvent automatiquement.
- Plus proche voisin
- Un algorithme de réduction qui reprend simplement, pour chaque pixel de destination, la couleur du pixel source le plus proche, sans jamais mélanger les teintes. Les contours nets et tranchés propres au pixel art restent ainsi parfaitement intacts, sans effet d'adoucissement.
Questions fréquentes
/favicon.ico reste un chemin que les navigateurs cherchent implicitement, même sans aucune balise. Les lecteurs de flux, les services de favoris et certains robots récupèrent cet ICO à la racine sans jamais analyser votre HTML : le fournir en complément des PNG ne laisse aucun angle mort.<link rel="icon" type="image/svg+xml">. Déclarer à côté les fichiers ICO et PNG générés ici vous donne une solution de repli fiable pour les navigateurs qui ignorent les icônes SVG.
Anecdote — Le défi de dessiner sur seize pixels
En 1999, Internet Explorer 5 a fait apparaître une petite icône à côté des entrées de la liste des Favoris. Le mécanisme était d'une simplicité charmante : déposer un fichier nommé favicon.ico à la racine du site suffisait à ce qu'il soit repéré. Le nom lui-même est une contraction de « favorite icon ». L'élément <link rel="icon"> n'a été formalisé dans la spécification HTML que plus tard, et la recherche implicite d'un ICO à la racine survit aujourd'hui uniquement par souci de rétrocompatibilité.
Le fait qu'ICO ait emprunté le format d'icônes de Windows s'est révélé lourd de conséquences. Un seul fichier ICO peut héberger plusieurs résolutions, ce qui signifie que l'onglet en 16px et la barre des tâches en 48px peuvent afficher des dessins véritablement différents. Ce n'est pas qu'une commodité : sur une toile de 16×16 pixels, réduire mécaniquement un dessin conçu pour 48px fait disparaître les traits fins et rend le texte illisible. Les concepteurs d'icônes dessinaient chaque taille à la main parce que c'était la seule façon de résoudre ce problème.
La génération moderne de favicons remplace ce travail manuel par une autre question : avec quelle intelligence peut-on réduire ? Une simple moyenne (bilinéaire) perd le contraste des contours, tandis que l'échantillonnage brut (plus proche voisin) supprime purement et simplement les traits fins. Le rééchantillonnage Lanczos utilise une fonction sinc tronquée à un nombre fini de lobes : le lobe principal préserve l'information d'origine tandis que les lobes négatifs latéraux relèvent les contours. Cette légère accentuation du tracé est exactement ce dont les icônes minuscules ont besoin.
Les exigences n'ont fait que croître depuis. L'iPhone est arrivé en 2007 avec l'Apple Touch Icon (57px au début, 180px aujourd'hui), les PWA ont rendu nécessaires les 192px et 512px, et les favicons SVG avec prise en charge du mode sombre sont désormais sur la table. Cela semble bien compliqué comparé au dépôt d'un unique fichier, mais l'autre facette est que ces quelques dizaines de pixels dans l'onglet du navigateur sont vues par un nombre considérable de personnes.