Mode d’emploi
- Collez la chaîne Base64 ou le data URI d’une icône, ou de l’image que vous voulez transformer en icône.
- Vérifiez l’aperçu et les dimensions. Une image source carrée donne l’icône la plus nette.
- ICO est présélectionné. Dans « Taille de l’icône », choisissez une taille unique (16, 32, 48, 64, 128 ou 256 pixels) ou l’option « Multi-tailles ».
- Téléchargez le fichier .ico. Si l’entrée est déjà un ICO et que vous voulez conserver toutes ses images telles quelles, choisissez « Fichier d’origine ».
Les fichiers ICO en Base64
Un fichier ICO est un petit conteneur : un en-tête, un répertoire d’entrées et une image par entrée, chacune stockée sous forme de données BMP ou PNG. L’en-tête commence par les octets 00 00 01 00 : le Base64 d’une icône débute donc par AAABAA. Vous croiserez des icônes en Base64 dans les data URI de favicon comme <link rel="icon" href="data:image/x-icon;base64,...">, dans les pages HTML en un seul fichier et dans les API qui renvoient les icônes de sites web.
Le type MIME officiellement enregistré est image/vnd.microsoft.icon, mais image/x-icon est bien plus répandu et fonctionne partout.
Quelle taille d’icône choisir
| Taille | Usage courant |
|---|---|
| 16 × 16 | Onglet du navigateur et favoris sur les écrans standard |
| 32 × 32 | Onglet du navigateur sur les écrans haute densité |
| 48 × 48 | Icônes du Bureau et de l’Explorateur Windows |
| 64, 128 | Aperçus plus grands et listes d’applications |
| 256 × 256 | Affichages Grandes icônes et Très grandes icônes de Windows |
L’option multi-tailles regroupe 16, 32, 48 et 256 dans un seul fichier, afin que chaque système choisisse la meilleure correspondance. Les images qu’il contient sont compressées en PNG, ce qui préserve la transparence et est pris en charge par Windows Vista et les versions ultérieures, ainsi que par tous les navigateurs modernes.
Utiliser l’icône comme favicon
Les navigateurs demandent automatiquement /favicon.ico à la racine du site : y enregistrer le fichier fonctionne donc même sans aucun balisage. Un data URI Base64 dans le href économise cette requête, mais l’icône est alors téléchargée à nouveau avec chaque page au lieu d’être mise en cache séparément. Les navigateurs modernes acceptent aussi les icônes PNG et SVG, et une configuration courante combine les deux :
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">Partez d’une image carrée aux formes simples et bien contrastée ; les détails fins disparaissent à 16 pixels. Pour obtenir une version PNG destinée à d’autres usages, essayez Base64 en PNG.
Questions fréquentes
Quelle taille doit avoir favicon.ico ?
Une icône multi-tailles contenant des images de 16, 32 et 48 pixels couvre les navigateurs et Windows. L’option multi-tailles proposée ici ajoute aussi 256 pour les grands affichages d’icônes.
Puis-je convertir un PNG ou un SVG Base64 en ICO ?
Oui. Collez-le, laissez ICO dans « Télécharger en » et choisissez une taille. Toute image que votre navigateur sait afficher peut être convertie.
Pourquoi l’aperçu n’affiche-t-il qu’une seule taille de mon icône ?
Un fichier ICO peut contenir plusieurs images, mais un aperçu n’en montre qu’une. Téléchargez avec « Fichier d’origine » pour conserver toutes les images du fichier.
L’ICO conserve-t-il la transparence ?
Oui. Les icônes sont stockées sous forme de données PNG avec un canal alpha complet : les coins arrondis et les bords doux restent transparents.
Comment placer une icône dans un data URI ?
href de votre balise <link rel="icon">.