Emoji Favicon with badge

EmojiFavicon.tsx

import React from 'react'

export interface EmojiFaviconProps {
  emoji: string
  badgeEmoji?: string
}

export const EmojiFavicon: React.FC<EmojiFaviconProps> = ({ emoji, badgeEmoji }) => {
  const inlineSvg = React.useMemo(() => {
    return `
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
  <text y=".9em" font-size="90">${emoji}</text>
  ${
    badgeEmoji
      ? `<text x="1.5em" y="2.5em" font-size="35">${badgeEmoji}</text>`
      : ''
  }
</svg>
    `
      .replace(/\"/g, '%22')
      .split('\n')
      .map(line => line.trim())
      .join('')
  }, [emoji, badgeEmoji])

  return <link rel="icon" href={`data:image/svg+xml,${inlineSvg}`} />
}