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 |
Conseils
- 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.
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.