dynamic emoji favicon + vue + composition-api

index.vue

<template>
  <div class="container">
    <div>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          rel="noopener noreferrer"
          class="button--green"
          @click.prevent="changeEmoji"
        >
        Change favicon
        </a>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, useMeta } from '@nuxtjs/composition-api'

export default defineComponent({
  head: {},
  setup() {
    const faviconTemplate = (icon: string) => {
      return `
        <svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22>
          <text y=%22.9em%22 font-size=%2290%22>
            ${icon}
          </text>
        </svg>
      `.trim();
    }

    const emojiImage = (icon: string) => `data:image/svg+xml,${faviconTemplate(icon)}`

    const emojis = ['💩', '🌵', '🦠', '🚀', '🐼']

    const randomEmoji = () => emojis[Math.floor(Math.random() * emojis.length)]

    const emoji = ref<string>(emojis[0])

    const changeEmoji = () => {
      emoji.value = randomEmoji()
    }

    useMeta(() => ({ link: [{ rel: 'icon', type: 'image/x-icon', href: emojiImage(emoji.value) }]}))

    return {
      changeEmoji,
    }
  },
})
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.links {
  padding-top: 15px;
}
</style>