hid指定がないけど大丈夫なの？

metaタグの時は「hid」という値を指定することにより、「nuxt.config.js」と「index.vue」で二重指定した場合にもひとつに統合される機能がありました。

Favicon…というか、linkプロパティのサンプルにはhid指定がありません。

index.vueでもFaviconを指定するとどうなるのか？

index.vueで「test.ico」というFaviconを設定してみました。

export default {
  head: {
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/test.ico' }
    ]
  },
}

HTMLの出力結果はこう↓。

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/x-icon" href="/test.ico">

ダメですね、これ。
「nuxt.config.js」と「index.vue」の設定が両方読み込まれちゃってます。

linkプロパティでもhidが使えるのか分かりませんが、試しに書き足してみます。

//nuxt.config.js
{ hid: 'favicon', rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }

//index.vue
{ hid: 'favicon', rel: 'icon', type: 'image/x-icon', href: '/test.ico' }

出力結果はこう↓。

<link data-hid="favicon" rel="icon" type="image/x-icon" href="/test.ico">

後から追加した方(index.vue)の設定で無事に上書きされました。

linkプロパティでもhidは使えるようですね。

まぁFaviconをページ毎にころころ変えるようなことはないと思いますが「linkプロパティでもhidが使える」というのは有益な情報な気がします。

追加していく前に中身の整理を

追加するには「何をすればいいのか」を分かりやすくするために先ほどのHTMLコードを整理してみます。

<link rel="apple-touch-icon" (略)>
<link rel="icon" (略)>
<link rel="icon" (略)>
<link rel="manifest" (略)>
<link rel="mask-icon" (略)>
<meta name="msapplication-TileColor" (略)>
<meta name="theme-color" (略)>

こうやって見てみると、「link」タグが5つ、「meta」タグが2つあるだけです。

linkタグはデフォルトのFavicon設定のサンプルがあり、metaタグはdescriptionの時に書き換え方を勉強しました。

真似すれば両方いけそうですね。

Favicon設定追加の例

全ページ共通の設定にする予定なので「nuxt.config.js」内に以下のコードを追加します。

export default {
  head: {
    meta: [
      { hid: 'msapplication-TileColor', name: 'msapplication-TileColor', content: '#333333' },
      { hid: 'theme-color', name: 'theme-color', content: '#333333' },
    ],
    link: [
      { hid: 'icon', rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { hid: 'apple-touch-icon', rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
      { hid: 'icon32', rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
      { hid: 'icon16', rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
      { hid: 'manifest', rel: 'manifest', href: '/site.webmanifest' },
    ]
  },
}

既にあった「head」プロパティ内の「meta」「link」プロパティにそれぞれ追記しました。

あと、せっかくなのでhid指定もしてみました。

HTMLの出力結果↓。

<meta data-hid="msapplication-TileColor" name="msapplication-TileColor" content="#333333">
<meta data-hid="theme-color" name="theme-color" content="#333333">

<link data-hid="icon" rel="icon" type="image/x-icon" href="/favicon.ico">
<link data-hid="apple-touch-icon" rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link data-hid="icon32" rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link data-hid="icon16" rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link data-hid="manifest" rel="manifest" href="/site.webmanifest">

期待通りの動作です。

その他の設定を追加する場合

「link」タグなのか、「meta」タグなのか。

それさえ分かれば、linkタグであれば「linkプロパティ」の中へ、metaタグであれば「metaプロパティ」の中へ追記するだけで、これ以外の設定も追加可能です。

書き方は上のサンプルを参考にしてもらえばいいですが、元のHTMLタグの属性を「(属性名): '(値))'」の格好で追加してやるだけ。

ページ毎にFaviconを変更する場合

それぞれのページのvueファイル内のscriptタグにて、以下のように追加するだけです。

export default {
  head: {
    link: [
      { hid: 'icon', rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    ]
  },
}

metaタグの場合も同様に。

「nuxt.config.js」内でも設定している場合は重複出力を避けるために共通の「hid」を指定しておいた方がいいでしょう。

hidの値はnuxt.config.jsとindex.vueで統一されていれば好きに決めていいみたいです。
(あと他のhidと重複していないこと)