Utiliser un emoji comme favicon

Maintenant que quelques navigateurs supportent le SVG pour les favicons, on peut utiliser les emoji directement avec cette balise :

<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>">

Source : https://css-tricks.com/emoji-as-a-favicon/

C’est gadget et surement pas une bonne idée de l’utiliser alors que Safari ne le gère pas encore mais pour mon site ça sera très bien 😎.

Comme aujourd’hui je m’amuse avec Quartz pour générer ce site, j’en ai fait un plugin :

import { QuartzEmitterPlugin } from "../types"
 
const defaultOption = "🪴"
 
export const FaviconEmoji: QuartzEmitterPlugin<String> = (opts) => {
  const emoji = opts || defaultOption
 
  return {
    name: "FaviconEmoji",
    async *emit() {},
    externalResources: () => {
      return {
        additionalHead: [
          <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>${emoji}</text></svg>`}
          />,
        ],
      }
    },
  }
}

Disponible sur Github