Générateur de favicon
Importez une image et obtenez en un clic toutes les tailles de favicon standard, prêtes à télécharger, avec le code HTML et l'extrait de manifest correspondants.
Pourquoi plusieurs tailles de favicon ?
Un favicon n'est pas une seule image : selon le contexte, le navigateur ou le système d'exploitation demande une taille différente. Un onglet de navigateur affiche une icône minuscule de 16 ou 32 pixels, tandis qu'un raccourci ajouté à l'écran d'accueil d'un iPhone utilise une icône bien plus grande, 180×180 pixels, appelée apple-touch-icon. Les applications web progressives (PWA) déclarent quant à elles leurs icônes dans un fichier site.webmanifest, généralement en 192×192 et 512×512 pixels pour couvrir les différentes densités d'écran. Fournir uniquement une petite image de 16×16 pixels partout donnerait un résultat flou ou pixelisé dès qu'un contexte demande une taille plus grande.
Cet outil part d'une seule image source et génère, directement dans votre navigateur via l'API Canvas, les sept tailles les plus couramment demandées : 16×16, 32×32, 48×48, 96×96, 180×180, 192×192 et 512×512 pixels. Si l'image que vous importez n'est pas carrée, un recadrage centré est appliqué automatiquement pour éviter toute déformation lors du redimensionnement.
Utiliser les fichiers générés
Une fois les tailles générées, téléchargez chaque PNG individuellement en cliquant sur son bouton dédié. Placez ensuite ces fichiers à la racine publique de votre site (le dossier servi directement, par exemple public/ dans la plupart des générateurs de site statique), et collez le bloc de balises <link rel="icon"> fourni dans la section <head> de vos pages HTML. Si votre projet utilise déjà un fichier site.webmanifest pour une application web progressive, ajoutez ou fusionnez le tableau icons proposé avec les entrées existantes plutôt que de remplacer tout le fichier.
Après une mise en ligne, les navigateurs mettent parfois en cache l'ancien favicon pendant plusieurs jours : si la nouvelle icône n'apparaît pas immédiatement, videz le cache du navigateur ou testez dans une fenêtre de navigation privée avant de conclure à un problème côté fichiers.
Pensez également à vérifier le rendu sur un fond sombre : un logo tout en traits fins ou avec une transparence importante peut devenir peu lisible une fois réduit à 16×16 pixels. Si votre image source contient du texte, celui-ci disparaîtra généralement dans les petites tailles ; privilégiez un symbole simple et contrasté plutôt qu'un logo complet pour les formats destinés aux onglets de navigateur.
Ce choix est délibéré : un .ico multi-résolution est un format binaire spécifique (plusieurs images empaquetées dans un même conteneur), et cet outil ne l'implémente pas. Il génère uniquement des fichiers PNG, taille par taille. Tous les navigateurs modernes acceptent un PNG comme favicon via <link rel="icon" type="image/png">, donc ce n'est pas un problème pour un usage courant. Si vous avez besoin d'un .ico pour des logiciels très anciens ou certains outils Windows, utilisez un convertisseur dédié à partir d'un des PNG générés ici.
L'outil détecte que la largeur et la hauteur diffèrent et applique un recadrage centré en carré (il conserve le plus grand carré possible au centre de l'image, en coupant les bords qui dépassent) avant de générer les différentes tailles. Un avertissement s'affiche pour vous le signaler. Si le sujet important de votre image n'est pas centré, recadrez-la vous-même avant import pour un résultat plus fidèle.
Non. Tout le traitement (chargement, recadrage, redimensionnement) se fait dans votre navigateur via l'API Canvas. Aucun fichier n'est envoyé à un serveur.
16×16 et 32×32 pour l'onglet du navigateur, 48×48 pour certains raccourcis Windows, 96×96 pour les favoris de bureau, 180×180 comme apple-touch-icon (icône iOS quand le site est ajouté à l'écran d'accueil), et 192×192 / 512×512 pour les icônes d'application PWA au format site.webmanifest.
Non : si votre image source est plus petite qu'une taille cible (par exemple une image de 64×64 px redimensionnée en 512×512), le résultat sera flou car le canvas ne fait qu'agrandir les pixels existants, il n'invente pas de détail. Pour un rendu net sur toutes les tailles, partez d'une image source d'au moins 512×512 px.
Téléchargez chaque taille, renommez-les si besoin selon les noms utilisés dans le code fourni (par exemple favicon-32x32.png), placez-les à la racine de votre site (ou dans le dossier public de votre projet), puis collez le bloc de balises HTML dans la section <head> de vos pages et, si vous utilisez un site.webmanifest, fusionnez le tableau icons fourni avec le vôtre.