Générateur de favicon
Importez une image, téléchargez toutes les tailles de favicon — PNG de 16 à 512 px plus les balises HTML. Fonctionne entièrement dans votre navigateur.
1 148 vues
Impossible de lire l'image — essayez PNG/JPG/WebP
Les tailles qui comptent en 2026
Chaque appareil et chaque contexte attend une taille de favicon différente, car un favicon n'est pas un seul fichier — c'est une famille de fichiers. Les onglets du navigateur utilisent de minuscules PNG de 16×16 et 32×32 pixels. La fonction « Ajouter à l'écran d'accueil » d'iOS utilise un apple-touch-icon de 180×180. Android et les PWA installées récupèrent des icônes de 192×192 et 512×512 pixels depuis le manifeste de l'application web pour l'écran d'accueil et l'écran de démarrage. Une seule image source ne peut pas servir directement à tout cela — un logo de 512 px compressé brutalement dans un onglet de 16 px perd presque tout son détail, et une icône de 16 px agrandie à 512 px paraît floue et pixelisée. La bonne approche consiste donc à redessiner une source haute résolution vers chaque taille cible individuellement, en recalculant les pixels à chaque taille plutôt qu'en mettant à l'échelle une sortie à partir d'une autre.
C'est exactement ce que fait cet outil : il charge votre image source sur un canvas HTML dans votre navigateur et la redimensionne aux six tailles standards — 16, 32, 48, 180, 192 et 512 pixels — chacune dessinée directement à partir de l'original, puis vous fournit les PNG correspondants ainsi que les balises <link> à coller dans le <head> de votre site. Rien n'est téléversé ; le redimensionnement se fait avec l'API Canvas sur votre propre appareil.
Concevoir pour la plus petite taille
Comme tant de détails se perdent à 16 px, la conception d'un favicon se pense à partir de la plus petite taille, pas de la plus grande. Recadrez sur le symbole du logo plutôt que sur le nom complet — le texte devient une tache illisible en dessous d'environ 24 px. Gardez un fort contraste face aux barres d'onglets claires et sombres, puisque les navigateurs basculent entre les thèmes. Un fond de couleur unie se lit généralement mieux que la transparence aux plus petites tailles, où quelques pixels de bord semi-transparents peuvent ressembler à du bruit. De nombreuses marques maintiennent une version « icône d'application » simplifiée de leur logo — une seule lettre, une initiale ou un glyphe — précisément parce que leur logo complet ne survit pas au test des 16 px.
Il est également utile de comprendre le fichier manifeste qui relie les icônes de 192 et 512 pixels pour les sites installables : le manifeste d'application web (manifest.json) référence ces deux tailles par URL afin qu'Android et les installateurs de PWA de bureau sachent quelle icône récupérer pour l'écran d'accueil et le sélecteur d'applications. Les sites qui omettent les icônes du manifeste restent pleinement fonctionnels — l'icône de l'onglet du navigateur et celle de l'écran d'accueil iOS fonctionnent indépendamment — mais l'invite d'installation elle-même peut retomber sur une icône générique ou refuser purement et simplement de proposer l'installation.
Questions fréquentes
Ai-je encore besoin d'un fichier .ico ?
Rarement. Tous les navigateurs modernes acceptent les favicons PNG déclarés via l'attribut sizes d'une balise link. Conserver un /favicon.ico à la racine de votre site n'aide que les très anciens agents utilisateurs et les outils qui demandent directement ce chemin hérité codé en dur.
Quelle image dois-je importer ?
Une image carrée, idéalement de 512 px ou plus, en PNG ou un raster exporté depuis un SVG, avec le symbole centré et suffisamment de marge autour. Les images non carrées sont recadrées au centre en carré avant redimensionnement, afin que rien ne soit étiré.
Pourquoi mon icône paraît-elle floue ou trouble à 16 px ?
Seize pixels ne peuvent physiquement pas contenir de détails fins — traits fins, dégradés et petit texte se dissolvent en une tache floue. Simplifiez le symbole source, augmentez le contraste, ou concevez une version dédiée aux petites tailles si votre logo complet ne survit pas à la plus petite icône d'onglet.
Quelle est la différence entre les icônes de 192 px et 512 px ?
Les deux alimentent les manifestes Android et PWA : le 192 px est utilisé pour l'icône de l'écran d'accueil en densité normale, tandis que le 512 px sert pour les écrans haute densité et l'écran de démarrage affiché pendant le chargement d'une PWA — Android choisit celle qui convient au contexte.
Dois-je ajouter toutes les tailles, ou seulement quelques-unes ?
Pour un site moderne, 32 px plus l'apple-touch-icon de 180 px couvrent la grande majorité des visiteurs. N'ajoutez les icônes de manifeste 192/512 px que si le site est installable en tant que PWA ; les tailles 16 et 48 px aident surtout dans des contextes hérités.
Outils similaires
Signaler un problème
Générateur de favicon
Commentaires
Pas encore de commentaires — soyez le premier à en écrire un !