CodeKitHubEn quoi consiste cet outil ?
Un favicon.ico n'est pas juste une petite image : c'est un format conteneur capable de stocker plusieurs tailles de la même icône dans un seul fichier, afin que le navigateur, la barre des tâches ou la barre de favoris choisisse la résolution la plus nette pour l'endroit où elle s'affiche. Renommer un PNG en favicon.ico ne produit pas cela : ça reste une image unique avec la mauvaise extension, et si certains navigateurs le tolèrent, beaucoup d'outils, de robots d'indexation et de navigateurs plus anciens lisant les octets bruts attendent la vraie structure de conteneur ICO — et échoueront ou afficheront une icône vide.
Cet outil construit un véritable conteneur ICO : il restitue votre SVG en 16×16, 32×32 et 48×48, encode chacun en interne au format PNG, puis empaquette les trois dans un favicon.ico valide en utilisant le même format « PNG dans ICO » que tout navigateur et système d'exploitation prend en charge depuis Windows Vista. En plus, vous obtenez des fichiers PNG séparés en 180×180 (la taille utilisée par iOS quand quelqu'un ajoute votre site à l'écran d'accueil) et en 192×192 / 512×512 (les tailles que les invites d'installation Android et PWA récupèrent depuis votre manifeste d'application web).
Pourquoi l'utiliser ?
- Produit un favicon.ico multi-résolution réellement valide, pas un PNG renommé.
- Couvre en une seule fois toutes les tailles d'icône nécessaires à un vrai déploiement : 16, 32, 180, 192, 512px.
- HTML prêt à coller dans le <head> — plus besoin de deviner les attributs rel/sizes/type.
- Les SVG non carrés sont centrés sur un carré transparent plutôt qu'étirés.
- Tout est restitué localement dans votre navigateur ; le SVG n'est jamais envoyé.
Mode d'emploi
- Cliquez sur le cadre ou déposez-y votre fichier de logo SVG.
- L'outil le restitue automatiquement dans toutes les tailles de favicon — aucun réglage à faire.
- Téléchargez favicon.ico pour la racine de votre site, ainsi que les icônes PNG individuelles.
- Copiez l'extrait HTML et collez-le dans le <head> de votre page.
Exemple
Entrée
logo.svg — le logo d'une entreprise, un vecteur de 3 KoRésultat
favicon.ico (16/32/48px combinés), plus favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.pngUn SVG en entrée, tous les fichiers d'icône dont un vrai déploiement a besoin en sortie.
Quelle taille d'icône est utilisée où
| Fichier | Taille | Utilisé pour |
|---|---|---|
| favicon.ico | 16/32/48px (combiné) | Onglet du navigateur, barre de favoris, barre des tâches |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Solution de repli pour les navigateurs préférant les favicons PNG |
| apple-touch-icon.png | 180×180 | Icône d'écran d'accueil iOS lors de l'ajout du site |
| icon-192.png | 192×192 | Icône d'écran d'accueil Android, manifeste d'application web |
| icon-512.png | 512×512 | Invite d'installation PWA, icône d'écran de démarrage Android |
Pourquoi la source SVG est importante
Comme SVG stocke des formes sous forme mathématique plutôt qu'en pixels, la restitution en 16px et en 512px repart à chaque fois exactement des mêmes données de tracé — pas d'artefact d'agrandissement côté grand format, ni de compromis forcé sur l'alignement des pixels côté petit format. Si vous n'avez qu'un logo en PNG, cet outil ne peut pas vous aider ; convertissez ou recréez d'abord le logo en SVG, car agrandir un petit PNG jusqu'à 512px ne produirait qu'un résultat flou.
Foire aux questions
Pourquoi ne pas simplement renommer un PNG en favicon.ico ?
Un fichier .ico possède son propre format de conteneur binaire (un en-tête ICONDIR indiquant combien d'images il contient, suivi d'une entrée de répertoire par image) — un PNG renommé en .ico reste un simple PNG avec la mauvaise extension à l'intérieur. La plupart des navigateurs modernes sont tolérants et l'afficheront quand même, mais cet outil construit un vrai conteneur ICO hébergeant trois résolutions distinctes, ce pour quoi le format a été conçu et ce qu'attendent les lecteurs plus stricts.
Pourquoi ai-je besoin d'icônes PNG si j'ai déjà favicon.ico ?
favicon.ico ne couvre que l'usage classique onglet de navigateur / favori. Le PNG 180×180 est celui utilisé par iOS quand un utilisateur ajoute votre site à l'écran d'accueil (apple-touch-icon), et les PNG 192×192 / 512×512 sont ceux que les invites d'installation Android et PWA récupèrent depuis votre manifeste d'application web. Sans eux, l'icône sur l'écran d'accueil d'un téléphone se réduit à une capture générique ou à un carré vide.
Mon logo n'est pas carré — qu'est-ce qui lui arrive ?
Il est centré sur un carré transparent à chaque taille cible plutôt qu'étiré, donc un logo large ou haut conserve ses proportions correctes au lieu d'être écrasé dans un carré.
Où dois-je placer les fichiers téléchargés ?
Placez favicon.ico, apple-touch-icon.png, icon-192.png et icon-512.png dans le dossier racine de votre site (à côté d'index.html), puis collez les balises <link> générées dans le <head> de votre page.
Mon SVG est-il envoyé quelque part ?
Non. Le SVG est restitué sur des éléments <canvas> locaux et les fichiers ICO/PNG sont assemblés dans votre navigateur. Rien n'est envoyé à un serveur.