Générateur de favicons
Une image pour tous les favicons, avec aperçu réel 16px
Déposer votre logo ici
ou cliquez pour choisir un fichier — PNG, JPG ou WebP. Une image carrée de 512 px ou plus donne les meilleurs résultats.
Aucun envoi : dessin/codage dans le navigateur.
Avant de commencer avec Générateur de favicons
Générer depuis une image favicons multitailles, Apple, Android et HTML prêt à copier.
Idéal pour
- Créer les favicons et icônes mobiles courants
- Vérifier la lisibilité réelle du logo à 16px
- Intégrer les extraits head et manifeste dans un site
À savoir avant de commencer
- Le générateur part d’une source matricielle et ne redessine pas un logo
- Les marques très détaillées peuvent devenir illisibles à 16px
- Un favicon modifié peut rester en cache après déploiement
Poursuivre le flux
Comment l'utiliser
1. Charger votre marque
Déposez un PNG, JPG ou WebP. Une image carrée d’au moins 512 px donne les meilleurs résultats, car 512 est la plus grande taille produite et l’agrandissement ne crée aucun détail. Une image non carrée reçoit un cadre de recadrage carré que vous pouvez déplacer sur son côté le plus long, ou vous pouvez choisir Ajuster pour ajouter des bandes. Dans les deux cas, elle n’est jamais étirée. Le panneau indique les dimensions et la présence de transparence, et vous avertit si la source fait moins de 512 px, car le fichier de 512 px sera alors agrandi et flou. Ajuster est l’option fidèle lorsqu’aucune partie ne peut être coupée, mais mesurez-en le coût : un logo large devient un petit symbole avec des bandes vides au-dessus et au-dessous, soit beaucoup d’espace inutilisé dans un onglet de 16 px.
2. Vérifier l'aperçu en taille réelle
Les trois carrés sont dessinés à 16, 32 et 180 pixels réels sur fonds clair et sombre ; l’onglet fictif dessous place la version 16 px près d’un titre, son contexte habituel. La plupart des générateurs omettent cette étape, pourtant essentielle : si le carré 16 px est une tache, aucun export ne le corrigera et le symbole doit être simplifié. Les curseurs de taille et rayon alimentent ces mêmes aperçus : marges et arrondis sont visibles avant téléchargement.
Deux détails de ce panneau méritent d’être connus. Le contour pointillé de chaque carré indique les limites réelles de l’icône. Sans lui, une icône entourée de bandes ou réduite par le curseur de taille d’image ne se distingue pas d’une icône plus petite, puisque la zone vide prend simplement la couleur de l’échantillon. Les échantillons clair et sombre montrent tous deux la transparence qui subsiste après le choix de fond : un halo clair intégré au dessin apparaît ainsi sur le fond sombre, et un halo sombre sur le fond clair. L’onglet de navigateur simulé est un habillage CSS autour du même canevas de 16 px, pas un vrai navigateur. Il est utile parce que 16 px vus seuls paraissent encore plus grands qu’ils ne le semblent à côté d’un titre de page.
3. Choisir un ensemble et télécharger
Choisissez l’ensemble minimal ou l’ensemble pour systèmes anciens, appuyez sur Générer, puis téléchargez chaque fichier ou le ZIP. Copiez l’extrait head et le manifeste dans le panneau inférieur : ils listent exactement les fichiers générés, sans ajout. Le bloc de manifeste est un objet JSON complet que vous pouvez enregistrer directement dans site.webmanifest; il exige toujours un theme_color et un background_color, à votre choix. Le nom de l'application apparaît comme apple-mobile-web-app-title dans l’en-tête et comme name dans le manifeste. Laissez-le vide et aucune des deux lignes ne sera émise : iOS utilise alors le titre de votre page, généralement le bon choix.
De quelles tailles avez-vous réellement besoin ?
| Taille | Fichier | Utilisé pour |
|---|---|---|
| 16 × 16 | favicon.ico | L’onglet du navigateur et la liste de favoris sur un écran à densité standard. |
| 32 × 32 | favicon.ico | L’onglet sur écran haute densité, ainsi que la barre des tâches Windows et les raccourcis. 48 est inclus pour la même raison. |
| 180 × 180 | apple-touch-icon.png | La tuile de l’écran d’accueil iOS lorsque quelqu’un enregistre votre site. Elle doit être opaque. |
| 192 × 192 | android-chrome-192x192.png | Écran d'accueil Android et petite icône du manifeste web. |
| 512 × 512 | android-chrome-512x512.png | L’écran de démarrage de l’application installée et la grande icône du manifeste exigée par les invites d’installation. |
Le .ico est ce qui permet de garder cette liste courte : ce conteneur contient plusieurs images dans un fichier, pour que les tailles 16, 32 et 48 voyagent ensemble et que le navigateur choisisse celle dont il a besoin. C’est pourquoi un seul favicon.ico à la racine couvre tous les cas d’onglets sans balises supplémentaires. Les PNG séparés de 16 et 32 ne sont nécessaires que pour les anciens navigateurs ignorant ICO : c’est le rôle de l’ensemble pour compatibilité ancienne.
Deux ensembles vus ailleurs sont volontairement absents. Les tuiles Windows Metro — browserconfig.xml et le mstile-*.png images — appartiennent à l’écran d’accueil de Windows 8 et à sa fonctionnalité de sites épinglés ; Edge a cessé de les lire il y a des années. Le favicon de la Touch Bar du MacBook a disparu avec ce matériel. Générer l’un ou l’autre aujourd’hui ajoute seulement des fichiers que personne ne demande et des balises que personne ne lit : exactement l’encombrement que l’ensemble Minimal cherche à éviter.
Pourquoi votre logo peut ne pas fonctionner à 16px
Une icône de 16 × 16 ne compte que 256 pixels. Un logo textuel parfaitement lisible sur une carte de visite n’a plus assez de pixels à cette échelle. Le réflexe d’agrandir le texte ne résout rien, car la contrainte n’est pas la taille de police, mais la densité de lignes : combien de traits et d’espaces distincts doivent tenir sur seize pixels. Chaque trait exige au moins un pixel, et l’espace voisin aussi ; plus de quelques détails par côté deviennent donc une masse grise.
Ce qui reste lisible est une forme unique avec une ou deux couleurs et beaucoup d’espace intérieur : une lettre plutôt qu’un mot, une silhouette plutôt qu’un contour, une forme pleine plutôt qu’un trait fin. Les dégradés subtils s’aplatissent, les traits très fins disparaissent ou deviennent des pointillés par crénelage, et les détails proches du bord sont les premiers perdus. Dessinez une version simplifiée de votre marque pour l’icône et vérifiez-la dans l’aperçu ci-dessus : comparer le carré de 16 px à celui de 180 px rend généralement le choix évident. Si la marque est illisible dans le premier carré, elle le sera aussi dans un onglet, et aucun réglage d’exportation ne pourra la sauver.
Le curseur de taille d’image fait partie du même compromis. Une marge autour d’un symbole proche des bords paraît plus propre à 180 px, mais à 16 px chaque pourcentage de marge est prélevé sur les 256 pixels disponibles : à 80%, l’illustration utilise environ 164 pixels. Employez-le si le symbole touche vraiment le cadre, puis vérifiez le carré 16 px au lieu de faire confiance au grand.
Questions
Mon image est-elle envoyée à un serveur ?
Non. L’image est décodée par votre navigateur, dessinée sur des canevas puis encodée en PNG par l’API Canvas. Le fichier ICO est assemblé à partir de ces PNG en JavaScript. Il s’agit d’un site statique, sans point d’entrée de téléversement ni compte : vous pouvez charger la page, déconnecter le réseau et continuer à utiliser le générateur.
Pourquoi apple-touch-icon est-il opaque ?
iOS ne respecte pas la transparence des icônes d’écran d’accueil : il compose l’alpha sur du noir, transformant un logo transparent en tuile sombre. Le générateur remplit le canevas de 180 × 180 bord à bord avec la couleur choisie avant le dessin, coins compris, même avec un rayon de coins, car iOS applique son propre masque. Les autres fichiers suivent le réglage Fond et conservent leur alpha lorsqu’il est sur Transparent, car les onglets et les lanceurs Android le gèrent.
Quel effet le rayon des coins a-t-il sur la couleur de fond ?
Le rayon découpe le carré : les coins d’une icône arrondie sont retirés et restent transparents. La couleur remplit la forme dans la courbe, pas les coins extérieurs. C’est adapté aux onglets et lanceurs Android, qui dessinent l’icône sur leur propre surface. L’apple-touch-icon est l’exception : il est rempli bord à bord avant découpe, coins compris, car iOS applique son propre masque arrondi et une icône déjà arrondie laisserait des vides aux quatre coins.
Faut-il encore favicon-16x16.png ?
Généralement non. Tous les navigateurs actuels lisent les images de 16 et 32 px dans favicon.ico, les PNG séparés font donc doublon. Ils servent aux navigateurs anciens ignorant ICO, couverts par l'ensemble historique. En cas de doute, le minimum est plus sûr : moins de fichiers et un extrait head plus court.
Et les favicons SVG ?
Une source matricielle ne peut pas devenir un véritable SVG. Vectoriser un PNG crée une approximation aux contours différents, pas votre dessin original : cet outil ne prétend donc pas proposer cette conversion. Pour un favicon SVG, exportez-le depuis le fichier vectoriel où le logo a été créé et ajoutez-le à côté de l’ICO. Les navigateurs compatibles utilisent le SVG, les autres se rabattent sur l’ICO. Conservez toujours l’ICO, car la compatibilité SVG n’est pas universelle.
Connexe
Pour tailles, balises, manifeste et pièges de cache du favicon, lisez le guide des tailles de favicon — le guide complet de cet outil. Si votre source est au mauvais format ou doit d’abord être aplatie sur un fond, le Convertisseur d'images gère cela par lot.