Nuxt3でfaviconを設定する方法

とうとう公開されたNuxt3、待ちに待っていた人も多いのではないでしょうか。
今回はNuxt3でfaviconを設定する方法について見ていきたいと思います。

Nuxt：3.0.0

まずはfaviconを作成する

まずはfaviconを作成します。拡張子は一般的なfavicon.icoで大丈夫です。

publicディレクトリ内にfaviconを置く

/public/favicon.ico

Nuxt3のプロジェクトのルートディレクトリにpublicフォルダを作成し、そこにfaviconを置きます。

Nuxt2の時のようなstaticディレクトリはNuxt3にはないので注意です。

nuxt.config.tsにfaviconの読み込みを記述する

nuxt.config.tsにfaviconを読み込む記述を記載します。
ディレクトリからのルートでパスを通します。

export default defineNuxtConfig({
  app: {
    head: {
      charset: 'utf-16',
      viewport: 'width=device-width',
      title: 'My App',
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ],
      htmlAttrs: {
        lang: 'ja',
        prefix: 'og: https://ogp.me/ns#'
      },
    }
  },
});

後はbuildして終わりです。

favicon以外のアップルタッチアイコンなども同様に設定ができます。