Utiliser un emoji comme favicon
Vous pouvez définir un emoji comme favicon en pointant le lien d'icône vers un URI de données SVG en ligne qui contient l'emoji sous forme de texte, sans aucun fichier image. Cela fonctionne instantanément dans les navigateurs modernes. C'est un excellent placeholder, mais l'emoji est dessiné par la propre police du système d'exploitation, donc il a un aspect différent sur Windows, macOS, Android et iOS, et il ne satisfait pas /favicon.ico ni les icônes d'écran d'accueil. Pour tout ce qui va au-delà d'un démarrage rapide, exportez un vrai ensemble.
Une ligne, aucun fichier
L'astuce est un URI de données SVG en ligne : le href du lien est un SVG qui dessine l'emoji comme élément de texte, donc il n'y a pas d'image séparée à héberger. Les navigateurs modernes l'affichent immédiatement dans l'onglet, ce qui en fait un placeholder parfait pendant que vous construisez.
L'emoji lui-même est dessiné par la police d'emoji fournie par le système d'exploitation du visiteur, donc le même favicon a un aspect subtilement (ou pas si subtilement) différent sur chaque plateforme.
L'astuce en une ligne
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦊</text></svg>"
/>Remplacez par n'importe quel emoji. En production, encodez en URL les caractères spéciaux : certains navigateurs sont pointilleux sur les chevrons bruts dans un URI de données.
FAQ sur le favicon emoji
Puis-je utiliser un emoji comme favicon ?
Oui, via un URI de données SVG en ligne qui rend l'emoji sous forme de texte. Cela fonctionne dans les navigateurs modernes sans fichier image, ce qui en fait un placeholder rapide bien pratique.
Pourquoi mon favicon emoji a-t-il un aspect différent sur chaque appareil ?
Parce que l'emoji est dessiné avec la propre police d'emoji du système d'exploitation. Apple, Google et Microsoft dessinent chacun le même emoji différemment, donc votre favicon hérite de cette variation.
Un favicon emoji est-il suffisant pour la production ?
Comme unique icône, non. Il ne couvre pas /favicon.ico ni les écrans d'accueil, et il a un aspect incohérent d'une plateforme à l'autre. Utilisez-le pour démarrer, puis exportez un ensemble complet pour le lancement.