BrowserTools
Publicité
Accueil / Images / Générateur de Favicon

Générateur de Favicon

Générez des PNG de favicon dans toutes les tailles standard et un fichier .ico multirésolution à partir de n'importe quelle image, entièrement dans votre navigateur.

Chargement de Générateur de Favicon… Si rien ne se passe, activez JavaScript.

Un favicon est la petite icône qu'un navigateur affiche à côté du titre d'une page dans la barre d'onglets, dans la barre des favoris et dans la liste de l'historique. Le nom est une contraction de favorite icon (icône favorite), un terme qui remonte à Internet Explorer 5 en 1999, lorsque Microsoft a introduit la prise en charge d'un fichier nommé favicon.ico à la racine du site. Deux décennies et demie plus tard, l'humble favicon est devenu une petite famille de ressources : un .ico classique multitaille pour les navigateurs de bureau anciens, un ensemble de PNG pour les navigateurs modernes, un apple-touch-icon de 180x180 pour les écrans d'accueil iOS, et des PNG de 192x192 et 512x512 référencés depuis un manifeste d'application web pour Android et les applications web progressives installables.

Questions fréquentes

Mon image est-elle téléversée quelque part ?
Non. L'image est décodée et redessinée entièrement dans votre navigateur à l'aide des API Canvas et Blob. Rien n'est envoyé à un serveur, il n'y a aucune télémétrie et l'outil fonctionne hors ligne une fois chargé. Cela le rend sûr pour les logos confidentiels et le travail de clients.
Quelles tailles le générateur produit-il et pourquoi ?
Il produit 16x16 et 32x32 pour les onglets et les favoris du navigateur, 48x48 pour Windows et les onglets à plus haute densité, 180x180 pour l'apple-touch-icon d'iOS, et 192x192 et 512x512 pour le manifeste d'application web d'Android et les PWA installables. Ensemble, elles couvrent pratiquement tous les endroits où une icône est affichée sur les plateformes modernes.
Un fichier .ico peut-il vraiment contenir des données PNG ?
Oui. Depuis Windows Vista, le format de conteneur ICO permet de stocker chaque entrée soit comme un BMP non compressé, soit comme une image PNG complète. Tous les navigateurs et systèmes d'exploitation actuels lisent les entrées PNG dans un ICO. Cet outil intègre directement les PNG de 16, 32 et 48 pixels, ce qui garde le fichier petit et les bords nets.
Quelle image source dois-je utiliser pour le meilleur favicon ?
Commencez avec une image carrée de 512x512 pixels ou plus afin que chaque taille réduite reste nette. Utilisez des formes franches et un fort contraste, car les détails fins et les traits minces s'estompent à 16 pixels. Un PNG transparent garde l'icône propre aussi bien sur les thèmes de navigateur clairs que sombres.
Comment ajouter les favicons générés à mon site web ?
Placez les fichiers à la racine de votre site ou dans un dossier de ressources, puis référencez-les dans le head de la page : un link avec rel=icon pointant vers favicon.ico, un link avec rel=icon type=image/png pour le PNG de 32x32, un link avec rel=apple-touch-icon pour le PNG de 180x180, et les PNG de 192 et 512 listés dans votre manifeste d'application web sous icons.
Pourquoi mon favicon paraît-il flou ou pixelisé ?
Le flou vient généralement de l'agrandissement d'une petite image source, donc partez toujours d'une taille plus grande que la plus grande sortie. La pixelisation à 16 pixels est normale et inévitable pour des illustrations détaillées ; la solution est de simplifier le design plutôt que l'export. Cet outil utilise un lissage de haute qualité lors de la réduction d'échelle pour minimiser ces deux problèmes.
L'outil conserve-t-il la transparence de l'image ?
Oui. Toutes les sorties PNG et les entrées PNG à l'intérieur du .ico préservent le canal alpha de votre image source, donc les fonds transparents restent transparents. Si votre source n'a pas de canal alpha, l'icône utilise simplement son fond uni existant.
Pourquoi mon favicon ne se met-il pas à jour dans le navigateur ?
Les navigateurs mettent les favicons en cache de façon agressive, parfois pendant des jours. Après le déploiement d'une nouvelle icône, forcez un rechargement complet, effacez les données du site ou ajoutez une chaîne de requête de version comme favicon.ico?v=2 à la balise link. Le cache se trouve du côté du navigateur, pas dans cet outil, qui génère toujours des fichiers frais.

À propos de Générateur de Favicon

Ce générateur prend une seule image source et produit toutes ces tailles d'un coup. Il dessine votre image sur des canevas HTML à 16, 32, 48, 180, 192 et 512 pixels, en conservant le rapport d'aspect et en centrant l'illustration à l'intérieur de chaque carré, puis encode chacune en un PNG net que vous pouvez télécharger individuellement. Il assemble aussi un véritable fichier .ico qui regroupe les versions de 16, 32 et 48 pixels dans un seul conteneur, afin qu'un navigateur puisse choisir la résolution dont il a besoin. Les fichiers .ico modernes peuvent intégrer des entrées compressées en PNG plutôt que des bitmaps bruts, et c'est exactement ce que cet outil écrit, produisant une icône plus petite et plus nette que l'ancien format BMP non compressé.

Tout se passe localement dans votre navigateur à l'aide de l'API Canvas et de l'API Blob. Votre image n'est jamais téléversée vers un serveur, il n'y a aucun compte à créer et aucune file d'attente. Cela rend l'outil sûr pour les logos non publiés, le travail de clients sous accord de confidentialité et toute illustration que vous préférez ne pas confier à un service tiers. Une fois la page chargée, il fonctionne aussi hors ligne, et les fichiers générés sont produits instantanément sur votre propre appareil.

Pour un résultat optimal, partez d'une source carrée et en haute résolution, idéalement de 512x512 ou plus, avec un fond transparent ou uni et des formes franches et simples. Les détails fins et les lignes minces disparaissent à 16 pixels, donc les favicons qui se lisent bien sont presque toujours des versions simplifiées d'un logo complet. Testez les aperçus de 16 et 32 pixels à leur taille réelle avant la mise en ligne, car c'est ainsi que la plupart des utilisateurs verront réellement votre icône dans une rangée d'onglets de navigateur encombrée.

D'un simple fichier caché à tout un écosystème d'icônes

Le favicon est né en mars 1999 avec Internet Explorer 5. La mise en oeuvre de Microsoft était discrètement ingénieuse et un peu intrusive : le navigateur demandait automatiquement un fichier nommé favicon.ico à la racine de tout site que vous ajoutiez aux favoris, sans aucun balisage requis. Les webmasters ont découvert la fonctionnalité en remarquant de mystérieuses requêtes pour ce nom de fichier dans les journaux de leur serveur. Comme la requête ne se produisait qu'au moment de l'ajout aux favoris, une métrique officieuse précoce de la popularité d'un site consistait à compter les accès à favicon.ico.

La spécification d'origine liait les favicons au conteneur ICO de Windows, un format hérité de Windows 3.0 qui peut contenir plusieurs images de différentes tailles et profondeurs de couleur dans un seul fichier. Pendant des années, ces entrées étaient des bitmaps BMP non compressés, ce qui rendait les icônes haute résolution étonnamment volumineuses. Windows Vista a changé cela en autorisant des entrées compressées en PNG dans le même conteneur, et le web s'est standardisé sur des favicons PNG référencés via des balises link rel=icon, libérant les concepteurs des contraintes de l'ancien format tout en gardant le .ico en vie pour la rétrocompatibilité.

L'ère mobile a multiplié les exigences. Apple a introduit l'apple-touch-icon pour qu'une page ajoutée aux favoris puisse se placer sur l'écran d'accueil iOS en ressemblant à une application native. Android et la spécification du manifeste d'application web ont ajouté des icônes de 192 et 512 pixels pour les applications web progressives installables et les écrans de démarrage. Ce qui a commencé comme un seul fichier caché de 16x16 est devenu un petit système de design à part entière, et générer l'ensemble complet à la main dans un éditeur d'images est exactement la tâche fastidieuse et répétitive qu'un outil basé sur le navigateur est censé vous épargner.

Publicité
Publicité
Publicité