Mode d’emploi
- Déposez un fichier .ico sur la zone de dépôt, cliquez pour en choisir un ou collez une image.
- Gardez « Conserver l’original » pour que toutes les tailles stockées dans l’icône figurent dans la sortie.
- Vérifiez la « Taille Base64 » : une icône contenant de nombreuses tailles peut être plus volumineuse que prévu.
- Copiez le data URI pour une balise link de favicon, ou copiez la sortie balise img, CSS ou Markdown.
Le format ICO
ICO est le format d’icône de Windows et le format de favicon d’origine. C’est un conteneur : un court répertoire liste une ou plusieurs images avec leur largeur, leur hauteur et leur profondeur de couleur, et chaque image est stockée sous forme de données bitmap ou, pour les grandes tailles comme 256 × 256, sous forme de PNG intégré. Un favicon.ico typique contient des versions de 16, 32 et 48 pixels afin que le navigateur puisse choisir la plus nette.
Le type MIME enregistré est image/vnd.microsoft.icon, mais image/x-icon est bien plus répandu, et les navigateurs acceptent les deux. Les données ICO en Base64 commencent par AAABAA, l’en-tête de fichier encodé.
Un favicon en data URI
<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBA...">Intégrer le favicon est pratique pour les documents HTML en un seul fichier, comme les rapports exportés, les tableaux de bord enregistrés sur disque et la documentation hors ligne, ainsi que pour les prototypes ou les outils internes pour lesquels vous ne voulez pas déployer de fichier séparé. Sur un site comportant de nombreuses pages, un /favicon.ico classique est généralement préférable : il est téléchargé une seule fois puis mis en cache, alors qu’un data URI est répété dans chaque réponse HTML.
Si vous ne voulez aucune icône, <link rel="icon" href="data:,"> empêche le navigateur de demander /favicon.ico.
Favicons ICO, PNG ou SVG
Les navigateurs actuels acceptent aussi les favicons PNG et SVG, par exemple <link rel="icon" type="image/png" href="data:image/png;base64,...">. Un seul PNG de 32 × 32 est souvent plus petit qu’un ICO multi-tailles ; utilisez pour cela PNG en Base64 ou SVG en Base64.
Convertir ici un ICO en PNG, JPEG ou WebP ne conserve qu’une seule image : celle que le navigateur choisit d’afficher. Pour faire l’inverse et créer un fichier ICO, encodez un PNG et collez le résultat dans Base64 en ICO, qui produit des icônes de 16 à 256 pixels.
Questions fréquentes
Faut-il utiliser image/x-icon ou image/vnd.microsoft.icon ?
image/vnd.microsoft.icon est le type officiellement enregistré, tandis que image/x-icon est celui qu’utilisent la plupart des sites. Si un système en attend un en particulier, modifiez le préfixe après la copie.Toutes les tailles d’icône sont-elles conservées dans la sortie Base64 ?
Oui, si vous conservez le format d’origine. Le fichier entier est encodé, et le navigateur peut toujours choisir la taille dont il a besoin. Une conversion vers un autre format ne conserve qu’une seule image.
Les favicons en data URI fonctionnent-ils dans tous les navigateurs ?
Les navigateurs de bureau actuels les affichent dans l’onglet. Les favoris, les raccourcis sur l’écran d’accueil et certains navigateurs plus anciens peuvent ignorer une icône intégrée : les sites publics doivent donc toujours fournir un fichier favicon.