Nuxt.js初心者がhead内にFaviconの設定を追加してみる

シェアする:

この記事をおすすめしたい人

  • WordPressしか知らないのにNuxt.jsを始めようとしてる人
  • Nuxt.jsでheadにFavicon設定を追加したい人
  • つまりオレ

何も知らない超初心者が脱WordPressしたくてNuxt.jsでサイト構築していくシリーズです。

今回はheadタグ内にFaviconの設定を追加していくお話をしたいと思います。

WordPressの上でな!

※ このブログはWordPress製です

Faviconって?

ブラウザで開いた時にこの↓ように表示されるやつです。

ブラウザのタブやお気に入りに小さなアイコンが表示されて、サイト名やページ名だけでなく視覚的にも「何のサイトなのか?」が分かりやすくなる仕組み。

Wikipediaによると元々はMicrosoftが始めた機能だったようで、その後、他社ブラウザが対応したり、スマホの普及でさらに機能拡大していったらしい。

Nuxt.js標準のFavicon

Nuxt.jsでページを出力すると、デフォルトでFaviconを読み込むようになっています。


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

「static」フォルダにある「favicon.ico」がFaviconとしてビルドされます。

この設定がされているのは「nuxt.config.js」。


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

これまでtitle、descriptionと設定してきましたが、今回は新しい「link」プロパティが登場しました。

書き方的には「meta」が「link」に変わっただけで、metaタグの書き換えと同じっぽいですね。

ICOファイルのみでいいなら、この辺りのコードを書き換えていくだけで対応できそうです。

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が使える」というのは有益な情報な気がします。

Faviconの設定を追加する

みなさんFavicon関連の記述、どれくらい追加してますか?

僕はですね、以前見つけた海外のFaviconジェネレータが「コピペしてね」って言ってくるものを追加しています。

他のジェネレータ使ったことないので分かんないですが、このジェネレータは最後にコピペ用のHTMLタグをずらずらっと出力してくれるのでチョー便利です。

当サイトで使っている設定はこんな↓感じ。


<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#d86011">
<meta name="msapplication-TileColor" content="#d86011">
<meta name="theme-color" content="#d86011">

内訳について詳しく勉強したかったんですが…。

解説サイトばっかり出てきて一次情報(公式)が見つけられていないんですよね。

なので、今回は「内容はよくわかんねーけど、上の7行をFavicon設定として追加するよ!」というスタンスでいきます。

ジェネレータサイトによると、以下の6種類を含んでいるようです。

  • 汎用的なブラウザ用
  • Googleの検索結果用
  • iOSのウェブクリップ用
  • AndroidのChrome用
  • Windows Metro用
  • macのSafari用

それぞれが何のFaviconなのかはまた機会があれば勉強しておきます。

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

追加するには「何をすればいいのか」を分かりやすくするために先ほどの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と重複していないこと)

まとめ

Nuxt.jsでFaviconの設定を追加するには、「nuxt.config.js」内に以下のコードを参考に追記すればいいみたいです。


export default {
  head: {
    meta: [
      { name: 'theme-color', content: '#333333' },
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    ]
  },
}

metaタグなのかlinkタグなのかで分けて、上の書き方を真似してみてください。

以上、WordPressからお届けしました!

Nuxt.js HEADタグ操作編の目次

シェアする: