Favicon et ICO en Base64

Comment convertir un favicon en Base64

1. Déposez favicon.ico, un PNG ou un SVG dans la zone, ou choisissez-le avec le sélecteur de fichiers.
2. Pour un PNG, réglez Largeur max. sur 32 (ou 48) pour ne pas intégrer par mégarde une icône d’application de 512 pixels. Les fichiers ICO et SVG sont encodés tels quels.
3. Sortie en est réglé sur Data URI. Copiez-la et collez-la dans le href :

<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">

L’aperçu montre l’icône avec sa taille en pixels : vous voyez si un PNG fait vraiment 32×32 avant de le coller.

ICO, PNG ou SVG

Un favicon.ico regroupe souvent des images de 16×16, 32×32 et 48×48, et toutes se retrouvent dans le Base64, ce qui explique une chaîne plus longue que prévu. Convertir un seul PNG de 32×32 suffit généralement pour un onglet de navigateur.

Un favicon SVG peut réagir au mode sombre grâce à une media query prefers-color-scheme à l’intérieur du SVG. Gardez un PNG en solution de repli si vous prenez en charge d’anciennes versions de Safari.

Quand un favicon intégré a du sens

• HTML en un seul fichier : rapports exportés, documentation hors ligne, tableau de bord enregistré dans un seul fichier. Un chemin relatif vers favicon.ico ne pointerait plus nulle part une fois le fichier déplacé.
• Outils internes et serveurs locaux, où ajouter une route pour un fichier statique demande plus de travail qu’une ligne de HTML.
• Favicons dynamiques : un badge de notification ou une couleur d’état dessinés sur un canvas et appliqués avec link.href = canvas.toDataURL("image/png").

Sur un site web classique, un fichier d’icône séparé est le meilleur choix. Le navigateur le télécharge et le met en cache une fois, alors qu’un favicon intégré est répété dans chaque page HTML servie.

Dessiner un favicon en JavaScript

Pour un indicateur d’état, aucun fichier n’est nécessaire. Dessinez sur un canvas de 32×32 et affectez la data URI au lien d’icône existant :

const canvas = document.createElement("canvas");
canvas.width = canvas.height = 32;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#e33";
ctx.beginPath();
ctx.arc(16, 16, 14, 0, Math.PI * 2);
ctx.fill();
document.querySelector('link[rel="icon"]').href = canvas.toDataURL("image/png");

Quand l’icône ne change pas

• L’ancienne icône reste affichée. Les navigateurs mettent les favicons en cache de façon tenace, et séparément de la page. Rechargez sans le cache ou ouvrez la page dans une fenêtre privée pour voir la nouvelle.
• Rien ne s’affiche du tout. Vérifiez que le href commence par le bon type : data:image/png;base64,, data:image/x-icon;base64, ou data:image/svg+xml;base64,. Une icône SVG a aussi besoin de l’attribut xmlns sur son élément racine.
• Plusieurs balises <link rel="icon">. Les navigateurs choisissent parmi elles selon le type et la taille : une icône intégrée peut donc perdre face à une autre icône déclarée. Supprimez celles dont vous ne voulez pas.

Revenir à un fichier

Pour retrouver favicon.ico à partir d’une data URI, utilisez Base64 en ICO. Pour les icônes SVG, SVG en data URI peut aussi produire une version encodée en URL, souvent plus courte que le Base64.

FAQ