Comment ça marche : Icônes et favicon
Déposez une image. Vous repartez avec une archive contenant le favicon.ico, les icônes de l'onglet, celle de l'écran d'accueil des iPhone, celles de l'application installable, et les lignes exactes à coller dans votre page.
Mettre une icône sur un site web devrait être une affaire de deux minutes. En réalité il faut sept fichiers de tailles différentes, un format ancien que plus aucun logiciel ne sait écrire, une icône particulière pour les iPhone, une autre qu'Android découpe à sa forme, et une demi-douzaine de lignes à coller au bon endroit dans la page. C'est pourquoi tant de générateurs de favicon existent, et pourquoi ils commencent tous par vous demander votre logo.
Celui-ci ne le demande pas. Votre image est lue, redessinée à chaque taille, et l'archive est assemblée dans l'onglet. Le fichier .ico est construit octet par octet, parce qu'aucun navigateur ne sait l'écrire : c'est vérifié, pas supposé.
Si votre source est un SVG, il est REDESSINÉ à chaque taille au lieu d'être agrandi ou réduit. C'est exactement ce qu'il faut faire d'une image vectorielle, et c'est la meilleure source possible pour un jeu d'icônes.
Comment ça marche
- Déposez votre image. Un carré d'au moins 512 pixels de côté est l'idéal ; un SVG est encore mieux, il sera redessiné net à chaque taille.
- Choisissez comment traiter une image qui n'est pas carrée, et si les icônes qui ne gèrent pas la transparence doivent recevoir un fond blanc.
- Cliquez sur « Fabriquer et télécharger ». Une seule archive descend, avec les neuf fichiers et un mémo qui contient les lignes à coller.
Formats acceptés
Ces quatre familles s'ouvrent dans tous les navigateurs à jour. Le SVG a un statut à part et un traitement à part : il est redessiné à chaque taille au lieu d'être mis à l'échelle.
Image PNG (.png)
Le meilleur choix après le SVG : il garde la transparence, ce qui compte beaucoup pour une icône d'onglet. Visez au moins 512 pixels de côté.
Image vectorielle SVG (.svg)
La source idéale : chaque taille est REDESSINÉE à partir du dessin, pas agrandie depuis des pixels. Le SVG doit porter ses propres dimensions ou une zone de dessin, et ne doit référencer aucune police ni aucune image extérieure, sinon le navigateur les ignore.
Photo JPEG (.jpg, .jpeg)
Fonctionne, mais un JPEG n'a pas de transparence : votre icône aura toujours un fond rectangulaire. Pour un logo, préférez un PNG ou un SVG.
Image WebP (.webp)
S'ouvre partout et garde la transparence. Les icônes produites, elles, sont toujours des PNG : c'est le seul format qu'un navigateur soit tenu d'écrire, et le seul que tous les systèmes acceptent dans un .ico.
Ses limites
20 Mo par fichier
Une source d'icône n'a aucune raison d'être lourde : au-delà de vingt mégaoctets, il ne s'agit plus d'un logo mais d'une photographie, et l'archive produite serait la même. La limite évite de faire travailler un téléphone pour rien.
Environ 16,7 millions de pixels par image
Sur iPhone et iPad, la surface d'un canevas a longtemps été plafonnée à 4096 sur 4096 pixels, et l'allocation échoue au-delà. L'outil contrôle la surface AVANT d'allouer et refuse proprement.
Une source trop petite ne peut pas être améliorée
Si votre image fait moins de 512 pixels de côté, les grandes icônes seront un agrandissement, donc floues. Aucun outil ne peut inventer des pixels qui n'existent pas, et celui-ci vous le dit à l'écran plutôt que de vous rendre une icône molle sans commentaire.
Le .ico est assemblé à la main, avec des PNG dedans
Aucun navigateur ne sait écrire un fichier .ico : nous l'avons mesuré, et demander ce format à un canevas rend un PNG. Le conteneur est donc construit octet par octet autour de trois images PNG. Le PNG dans un .ico est accepté depuis Windows Vista et depuis Firefox 9 ; pour les autres navigateurs, nous n'avons trouvé que des preuves d'usage, pas de documentation d'éditeur, et nous préférons l'écrire.
L'archive ne porte aucune date
Un fichier zip enregistre normalement la date et l'heure de chaque fichier. Ce serait la seule information sur vous que l'archive transporterait. Nous y écrivons donc une date fixe, la plus ancienne que le format autorise, et deux archives fabriquées à partir de la même image sont identiques octet pour octet.
Les images animées sont refusées
Une icône est fixe par nature, et un canevas ne contient qu'une seule vue. Plutôt que de garder silencieusement la première image d'une animation, l'outil s'arrête et le dit.
Questions sur cet outil
Est-ce que mon image est envoyée quelque part ?
Non, et vous n'avez pas à nous croire. Ouvrez l'inspecteur de votre navigateur avec la touche F12, allez sur l'onglet « Réseau », videz la liste, puis déposez votre image. Aucune ligne n'apparaît. Vous pouvez aussi couper votre connexion : l'outil continue de fonctionner, l'archive comprise.
Quelle image donner pour un bon résultat ?
Un SVG, si vous en avez un : chaque icône est alors redessinée nette à sa taille définitive. Sinon un PNG carré de 512 pixels de côté au minimum, avec un fond transparent. Évitez une image avec beaucoup de détails fins : à seize pixels de côté, un dessin fin devient une tache. Les bons favicons sont presque toujours une forme simple et un contraste franc.
Pourquoi neuf fichiers, et pas un seul ?
Parce que les systèmes ne demandent pas la même chose. Les navigateurs veulent une petite icône pour l'onglet et cherchent un favicon.ico à la racine du site sans qu'on le leur dise. iOS veut une icône de 180 pixels pour l'écran d'accueil, et il la pose sur du noir si elle est transparente. Android veut une icône masquable, qu'il découpe à la forme du moment. Le manifeste d'une application installable en veut deux autres. Aucun de ces besoins n'est un caprice, et le mémo de l'archive vous dit où poser chacun.
Pourquoi l'archive ne contient-elle aucune date ?
Parce qu'un fichier zip enregistre normalement la date et l'heure de chaque fichier, et que ce serait la seule information sur vous que l'archive transporterait. Nous y écrivons donc une date fixe, la plus ancienne que le format autorise. C'est un détail, mais c'est un détail cohérent : un outil qui ne reçoit rien n'a pas de raison d'écrire quelque chose sur vous dans le fichier qu'il vous rend. Cela a un effet secondaire agréable : deux archives fabriquées depuis la même image sont identiques octet pour octet.
Comment fabriquez-vous le .ico si le navigateur ne sait pas l'écrire ?
À la main. Nous avons commencé par le vérifier plutôt que le supposer : demander le format .ico à un canevas rend un PNG, sans prévenir. Le fichier est donc assemblé octet par octet, avec un en-tête de répertoire d'icônes, un descripteur par taille, et trois images PNG à la suite. C'est une trentaine de lignes de code, et cela évite d'embarquer une bibliothèque pour un format vieux de trente ans.
Mon image n'est pas carrée. Que se passe-t-il ?
L'outil vous prévient et vous laisse choisir. Poser l'image entière garde tout votre dessin et ajoute des marges autour : c'est presque toujours le bon choix pour un logo, parce que rien n'est coupé. Recadrer au centre remplit tout le carré mais taille dans les bords, ce qui convient à une photographie et rarement à un logo.
Les icônes gardent-elles la transparence ?
Oui, sauf deux, et ce n'est pas notre choix. L'icône de l'écran d'accueil des iPhone est posée par iOS sur du noir si elle est transparente, et l'icône masquable est découpée par Android à la forme du système, ce qui donne n'importe quoi sur de la transparence. Ces deux-là reçoivent donc un fond blanc, et vous pouvez le désactiver. Toutes les autres restent transparentes.
Déposez une image. Vous repartez avec une archive contenant le favicon.ico, les icônes de l'onglet, celle de l'écran d'accueil des iPhone, celles de l'application installable, et les lignes exactes à coller dans votre page.
VérifierLa preuve, pas à pasLa vérification par l'inspecteur réseau, expliquée geste par geste, captures à l'appui.
Le coinLe coin imagesUne photo raconte plus que ce qu'elle montre. Ici on la voit, on la nettoie, on l'allège, on la recadre, et on floute ce qui ne regarde personne.