Favicon emoji : une ligne, sans fichier image
Aucun fichier, aucun générateur, aucun téléversement. Collez une ligne et votre onglet a une icône.
La ligne unique
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">Remplacez la fusée par n'importe quel emoji. Les séquences %22 sont des guillemets doubles encodés en URL, pour que tout le SVG survive à l'intérieur du href.
Comment ça marche
Il n'y a aucune image ici. Le href est un data URI contenant un SVG minuscule, et le SVG est un unique élément <text> avec l'emoji dedans. Le navigateur rend le SVG directement dans l'onglet, ce qui vous évite tout le cycle générer-télécharger-téléverser.
Le viewBox et le font-size gèrent le dimensionnement. L'ajustement y=".9em" abaisse le glyphe pour qu'il se loge dans la boîte au lieu d'être rogné en haut. C'est là toute l'astuce.
Les limites
Il est rendu avec la police d'emoji du système d'exploitation, si bien que le même emoji apparaît différemment sur macOS, Windows et Android. Vous ne maîtrisez pas le graphisme.
Il ne couvre que l'onglet. Ce n'est pas un vrai /favicon.ico : les crawlers et les clients plus anciens qui demandent ce chemin ne trouvent rien, et il ne fait rien pour les écrans d'accueil iOS ni les launchers Android, qui réclament de vrais fichiers PNG.
En production, encodez les caractères spéciaux en URL. Un < et un > et des guillemets bruts à l'intérieur d'un href peuvent casser le parsing ou se heurter à des politiques de contenu strictes. Les encoder, comme dans le snippet ci-dessus, rend la solution robuste.
Questions fréquentes
Comment utiliser un emoji comme favicon ?
Affectez au href du link du favicon un data URI contenant un petit SVG inline avec l'emoji dans un élément <text>. Cela tient en une ligne de HTML et ne nécessite aucun fichier image.
Pourquoi mon favicon emoji apparaît-il différemment sur d'autres appareils ?
Il est rendu avec la police d'emoji propre à chaque appareil, si bien que le graphisme diffère entre macOS, Windows et Android. Si vous avez besoin d'un rendu cohérent, utilisez plutôt une véritable icône image.
Un favicon emoji fonctionne-t-il pour les icônes d'écran d'accueil ?
Non. Il ne couvre que l'onglet du navigateur. Les écrans d'accueil iOS et les launchers Android réclament de vrais fichiers PNG référencés par l'apple-touch-icon et le manifest.