daikiojm’s diary

ブログを書くときがやってきたどん！

Nuxt.jsでEmojiをfaviconに設定する

NuxtJS TypeScript vuejs

適当なサイトを作るとき、サイト自体のレイアウトやインタラクションはコンポーネントライブラリやCSSフレームワークがあって開発者一人でも割と迷いなく作業を進められたりする。
最近自分はVueを触ることが多いので、前者だと vuetify、後者だと、tailwindcssを使ったりしている。
折角公開するなら、主要なmetaタグは一通り設定しておきたいと思い、最終的にどうするか迷うのがfaviconだったりする。
何も指定しないよりは、適当なEmojiを指定しておいたほうが見た目が映えるだろうとうのがことの発端。

faviconにはSVGが使える

faviconを用意するとき、適当な.png画像を.icoに機械的に変換していたが、Chromeだと80以降ではsvg画像をfaviconとして指定できるらしい。

caniuse.com

faviconにEmojiを指定する

「favicon emoji」とかでググると以下のツイートが出てくる。
このツイートがそのまんま答えで、faviconにSVGを指定できることを利用してインラインのSVGにEmojiを埋め込むことで、faviconにEmojiを表示させることができるとのこと。

Nuxt.jsのfaviconを固定でEmojiにする

NuxtはSSRの場合、文字列結合で、SPAの場合 vue-meta を使って、head内のmetaタグを構築するようになっている。
どちらにせよ、nuxtConfigのhead内にmetaタグやlinkタグに関する設定を記述してあげれば良い。今回のfaviconの設定も例にもれず、head.link に書けば良い。 この例では、共通の設定になっているが、ページごとに指定したい場合には同様に、pageの head に設定すればよさそう。

create-nuxt-app で作成した直後のプロジェクトでは以下のようになっているはず

const nuxtConfig: NuxtConfig = {
  head: {
    // 略
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  // 略
}

それを、こんな感じで使いたいEmojiを含むSVGをインラインで指定する

const nuxtConfig: NuxtConfig = {
  head: {
    // 略
    link: [
      { rel: 'icon', type: 'image/x-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>' }
    ]
  },
  // 略
}

Nuxt.jsのfaviconを動的にEmojiにする

runtimeで切り替えるのもページからmetaの操作がきでれば特に特別なことはない。
以下に例のgistを貼った。この例では、 composition-apiを使っていて、useMetaでmetaの操作をしている。

dynamic emoji favicon + vue + composition-api