Du PNG au favicon (ICO)

Comment ça marche

Choisissez votre logo — idéalement un PNG carré à fond transparent —, prenez le jeu de tailles et appuyez sur Créer l'ICO. Un logo.png de 512 sur 512 devient par exemple un unique favicon.ico contenant trois versions, à 16, 32 et 48 pixels ; le navigateur prend ensuite de lui-même la version de 16 pour l'onglet et une plus grande pour les favoris ou la barre des tâches. Placez ce fichier à la racine de votre site sous le nom favicon.ico et le travail est fait. Une image qui n'est pas carrée n'est pas rognée sur les bords : les proportions sont conservées, l'image est centrée et la surface restante est laissée transparente. L'outil ne produit que les tailles du jeu choisi, sans jamais en ajouter d'autres, et il fabrique le fichier sur votre appareil : votre logo n'est envoyé à aucun serveur, ce qui compte lorsqu'il s'agit d'une identité qui n'a pas encore été rendue publique.

Cet outil est aussi connu sous le nom de creer un favicon, png en ico, convertir png en ico, favicon ico pour site web, icone de site en ico.

Qu'est-ce que favicon ?

Le favicon est la petite icône affichée à côté de votre site dans l'onglet du navigateur, dans les favoris, dans l'historique et parfois dans les résultats de recherche. Elle s'affiche à des tailles qui descendent jusqu'à 16 sur 16 pixels : elle doit donc être simple, reconnaissable et pauvre en détails, car un logo travaillé cesse tout bonnement d'être lisible à cette échelle. En ajouter un fait plus que décorer : cela rend votre onglet repérable parmi une dizaine d'autres et évite au navigateur d'enregistrer une erreur 404 pour l'icône qu'il va chercher tout seul à la racine du site.

Qu'est-ce que ICO ?

L'ICO est un format conteneur d'icônes venu du monde Windows : un seul fichier y contient la même icône à plusieurs tailles à la fois, typiquement 16 sur 16, 32 sur 32 et 48 sur 48. Le navigateur ou le système d'exploitation choisit lui-même, à l'intérieur du fichier, la taille dont il a besoin ; l'icône reste ainsi nette à chaque échelle au lieu d'être rééchantillonnée depuis une seule image. L'adresse /favicon.ico à la racine d'un site est l'une des plus anciennes conventions du web, et un grand nombre de systèmes la sollicitent encore automatiquement, sans qu'aucune balise ne le leur demande.

Quelle est la différence entre un favicon ICO et un favicon PNG ?

Les navigateurs actuels acceptent aussi un favicon PNG ; la différence tient à la couverture. Un PNG ne porte qu'une seule taille, si bien que chaque taille réclame son fichier et sa balise, alors qu'un ICO les rassemble dans un fichier unique qui satisfait en plus les navigateurs anciens, les robots des moteurs de recherche et les nombreux outils qui sollicitent /favicon.ico de leur propre initiative, sans lire le code de la page. L'installation la plus solide utilise les deux : un favicon.ico multi-tailles à la racine, accompagné d'un jeu de PNG déclarés pour les pages modernes. Cet outil produit la moitié ICO de ce dispositif en une seule étape.

Transparence et qualité de la source

Un PNG distinct est incrusté dans l'ICO pour chaque taille, si bien que la transparence survit. Une source JPG, en revanche, ne porte aucune information de transparence : l'icône apparaît alors comme un carré plein, et cela se remarque surtout dans les navigateurs en thème sombre, où le fond blanc du JPG forme une pastille visible autour du logo.

Si la source est plus petite que la plus grande taille demandée, elle est agrandie, et un agrandissement n'invente aucun détail : l'icône devient simplement floue. Partez d'une source d'au moins 48 pixels pour le jeu courant et d'au moins 64 pixels pour le jeu large.

Quel jeu de tailles prendre ?

Le jeu courant convient à la plupart des sites : 16 pixels servent dans l'onglet, 32 dans les favoris et la barre d'adresse, 48 dans les raccourcis Windows.

Si vous voulez alléger la page au maximum, 16 + 32 suffit. Si vous vous attendez à ce que des visiteurs épinglent le site sur leur bureau, prenez le jeu large qui contient aussi la version de 64 pixels. Les trois jeux produisent le même fichier unique ; seule change la liste des tailles qu'il contient, et donc son poids.

• Site ordinaire → 16 + 32 + 48
• Fichier le plus léger possible → 16 + 32
• Les raccourcis de bureau comptent → 16 + 32 + 48 + 64

Dessinez pour 16 pixels, pas pour l'affiche

Une icône se juge à la taille où elle s'affiche, et c'est le plus souvent un carré de 16 pixels. Un logotype composé de mots, un tracé fin ou une illustration détaillée s'y réduisent à une tache ; une seule lettre, une forme simple ou une silhouette franche y survivent.

Regardez le fichier téléchargé à sa taille réelle avant de le publier. S'il est illisible à 16 pixels, la correction appartient au dessin et non au jeu de tailles : aucun réglage de cet outil ne rendra lisible un motif trop chargé.

Questions fréquentes

Que se passe-t-il si mon image n'est pas carrée ?

Elle n'est ni étirée ni rognée : les proportions sont conservées, l'image est centrée dans une zone carrée et les bords restants sont laissés transparents.

Les navigateurs actuels lisent-ils un ICO contenant du PNG ?

Oui. L'incrustation de données PNG dans un ICO est prise en charge depuis Windows Vista, et les navigateurs et systèmes d'exploitation actuels la lisent.

J'utilise déjà un favicon SVG : l'ICO reste-t-il utile ?

C'est recommandé. Beaucoup de clients et de systèmes de favoris demandent directement /favicon.ico, et ces requêtes renvoient une erreur 404 si aucun ICO ne se trouve à la racine.

Quelle taille doit faire l'image de départ ?

Au moins celle de la plus grande taille demandée : 48 pixels pour le jeu courant, 64 pixels pour le jeu large. Une source plus petite est agrandie et paraît floue.

Puis-je obtenir des tailles plus grandes, comme 128 ou 256 pixels ?

Non : cet outil produit exactement les tailles des trois jeux proposés, jusqu'à 64 pixels. Les grandes icônes destinées aux écrans mobiles se déclarent séparément, en PNG, et ne passent pas par le favicon.ico.

Un grand logo perd-il ses détails à 16 pixels ?

Passer de 512 à 16 pixels, c'est une réduction de 32 fois : un redimensionnement grossier ne lit presque aucun pixel de la source et il ne reste qu'une tache. Aux petites tailles, cet outil rééchantillonne en préservant les détails (méthode Lanczos) : chaque pixel de l'icône est la moyenne pondérée de tous les pixels de la source qui tombent à cet endroit. Malgré cela, un trait très fin ou un petit texte ne survit pas à 16 pixels ; gardez l'icône épaisse et simple.