Convertissez un PNG en ICO pour une favicon nette
Une favicon est la petite image qui donne à un site son identité visuelle. Vous la voyez dans l'onglet du navigateur à côté du titre de la page, dans votre liste de favoris, dans le menu déroulant de la barre d'adresse de votre historique, et parfois aux côtés des résultats de recherche. Elle est petite, mais elle joue un grand rôle : une favicon reconnaissable aide les utilisateurs à retrouver votre onglet parmi une douzaine d'autres et indique qu'un site est abouti et soigné. Le format classique de cette petite icône est l'ICO, et le moyen le plus simple d'en créer une est de partir d'un PNG carré et net puis de le convertir.
Cet outil prend une image PNG et la transforme en favicon ICO directement dans votre navigateur. La conversion s'exécute en local sur votre propre appareil : l'image que vous choisissez n'est donc jamais téléversée vers un serveur. Cela compte lorsque votre icône est un logo ou un actif de marque que vous préféreriez ne pas confier à un tiers. Une fois le fichier prêt, il vous suffit de le télécharger.
Ce qu'est le format ICO et pourquoi il contient plusieurs tailles
L'ICO est un format conteneur d'icônes né sous Microsoft Windows, où il stocke les icônes des programmes, des raccourcis et des dossiers. Sa caractéristique déterminante, et la raison pour laquelle il est devenu le standard des favicons web, est qu'un seul fichier ICO peut contenir la même image à plusieurs résolutions en même temps. Au lieu d'un unique bitmap fixe, le fichier regroupe un petit ensemble d'images carrées et laisse le navigateur ou le système d'exploitation choisir la taille qui convient à l'endroit où il doit dessiner l'icône.
C'est réellement utile. Un onglet de navigateur a besoin d'une icône minuscule, une barre de favoris peut en utiliser une un peu plus grande, et un raccourci épinglé sur le bureau peut en demander une encore plus grande. Avec un ICO multitaille, chaque contexte saisit la version qui lui convient : votre icône reste donc nette plutôt que d'être agrandie à partir d'un seul petit bitmap et de devenir floue. L'ICO préserve aussi la transparence, ce qui garde propres les coins d'un logo rond ou irrégulier sur n'importe quelle couleur d'onglet.
Tailles de favicon recommandées
Pour une favicon de site web, les trois tailles à inclure sont 16x16, 32x32 et 48x48 pixels. La version 16 pixels est celle que la plupart des navigateurs affichent dans l'onglet et la barre d'adresse. La version 32 pixels est utilisée sur les écrans à plus haute résolution et dans certaines vues de favoris et d'historique : elle garde donc les choses nettes sur les écrans modernes. La version 48 pixels couvre les contextes plus grands comme les raccourcis de site Windows. Comme elles vivent toutes dans un même fichier ICO, vous livrez un seul actif et laissez chaque surface choisir ce dont elle a besoin.
Partez d'un PNG carré pour que rien ne soit étiré. Si votre image source est rectangulaire ou surdimensionnée, recadrez-la ou mettez-la d'abord à l'échelle en un carré net avec notre redimensionneur d'images, puis lancez la conversion. Un design simple et très contrasté se lit bien mieux à 16 pixels qu'une illustration détaillée : privilégiez donc les formes franches plutôt que le texte fin.
Comment ajouter la favicon à votre site
Une fois votre fichier ICO obtenu, téléversez-le sur votre site, traditionnellement à la racine sous le nom favicon.ico. De nombreux navigateurs le trouveront là automatiquement, mais la bonne pratique consiste à le déclarer explicitement dans l'en-tête de votre HTML pour ne rien laisser au hasard. Ajoutez une balise link comme celle-ci :
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Placez cette ligne à l'intérieur de la section <head> de vos pages. L'attribut rel="icon" indique au navigateur que cette ressource est l'icône de la page, et le href pointe vers l'endroit où vous avez stocké le fichier. Si vous utilisez un chemin relatif à la racine comme celui ci-dessus, la même déclaration fonctionne sur chaque page de votre site. Après le déploiement, vous devrez peut-être faire un rafraîchissement forcé ou vider le cache avant que la nouvelle icône n'apparaisse, car les navigateurs conservent les favicons avec ténacité.
Conversion privée dans votre navigateur
Tout se passe sur votre appareil. Le PNG que vous choisissez est lu, décodé et ré-encodé en ICO en local, et rien ne quitte votre machine durant le processus. Il n'y a pas de compte, pas de file d'attente et aucun stockage côté serveur, ce qui rend l'outil pratique même pour des logos non publiés ou un travail client soumis à un accord. Pour d'autres façons de préparer et de peaufiner vos graphismes, parcourez l'ensemble de nos outils d'image.
Questions fréquentes
Mon image est-elle envoyée quelque part ?
Non. Le PNG est converti en ICO entièrement dans votre navigateur, sur votre propre appareil. Rien n'est envoyé à un serveur et rien n'est stocké : votre image reste privée.
Quelles tailles ma favicon doit-elle inclure ?
Les tailles les plus utiles sont 16x16, 32x32 et 48x48 pixels. L'image de 16 pixels s'affiche dans les onglets du navigateur, tandis que les plus grandes gardent l'icône nette sur les écrans haute résolution et les raccourcis de bureau.
Pourquoi utiliser l'ICO plutôt qu'un simple PNG ?
L'ICO est le format de favicon de longue date et il peut stocker plusieurs tailles dans un seul fichier. Le navigateur et le système d'exploitation choisissent la résolution qui convient à chaque contexte : l'icône reste donc nette au lieu d'être agrandie à partir d'un unique bitmap.
L'ICO conserve-t-il la transparence de mon PNG ?
Oui. Le format ICO prend en charge la transparence : les zones transparentes de votre PNG sont donc préservées et l'icône se fond proprement avec n'importe quelle couleur d'onglet ou de fond.
Comment ajouter la favicon à mon site web ?
Téléversez le fichier ICO sur votre site, généralement sous le nom favicon.ico à la racine, et ajoutez une balise link dans l'en-tête de votre HTML, du type link rel icon type image x-icon href barre oblique favicon.ico. Videz ensuite le cache de votre navigateur pour la voir.
Mon image source n'est pas carrée. Que dois-je faire ?
Recadrez-la ou mettez-la d'abord à l'échelle en carré pour qu'elle ne soit pas étirée. Vous pouvez utiliser notre redimensionneur d'images pour obtenir un carré net, puis le convertir en ICO pour la plus belle favicon.