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