【Nuxt.js】Nuxt.jsでfaviconの設定が更新されない時の対応

favicon.icoをオリジナルのものにしたくて、/staticフォルダのfavicon.icoを差し替えたけど、ブラウザのタブを見るとNuxtデフォルトのアイコンのままだった。

キャッシュかと思い、nuxt.config.jsのfavicon.icoの箇所にパラメータ?v=1.0.0を追加した。

head: {
...
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico?v=1.0.0' },
    ],
...

それでもNuxtデフォルトのままだった。

Chromeのデベロッパーツールでソースを見ると、以下の３つが反映されていて、下の２つがNuxtデフォルト画像だった。 Firefoxでは更新されてたので、favicon.icoを優先的に見るブラウザだと問題ないけど、Chromeとかの主要なブラウザはpngのほうを優先的に読んでるっぽいので、修正する必要がある。

<link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico?v=1.0.0">
<link data-n-head="1" data-hid="shortcut-icon" rel="shortcut icon" href="/_nuxt/icons/icon_64x64.3c27b8.png">
<link data-n-head="1" data-hid="apple-touch-icon" rel="apple-touch-icon" href="/_nuxt/icons/icon_512x512.3c27b8.png" sizes="512x512">

対応

• 以下の様なmanifest.jsonを作成する。

{
  "name": "name",
  "short_name": "name",
  "description": "description",
  "icons": [
    {
      "src": "/icon_64x64.png",
      "sizes": "64x64",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon_120x120.png",
      "sizes": "120x120",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon_144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon_152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon_192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon_384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon_512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "start_url": "/?standalone=true",
  "display": "standalone",
  "background_color": "#ffffff",
  "lang": "ja"
}

• /staticフォルダに、manifest.jsonとオリジナルアイコンを入れる。 favicon.ico apple-touch-icon.png icon_64x64.png icon_120x120.png icon_144x144.png icon_152x152.png icon_192x192.png icon_384x384.png icon_512x512.png

• nuxt.config.jsを以下の様に追記する。

head: {
...
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico?v=1.0.0' },
      { rel: 'shortcut icon', hid: 'shortcut-icon', href: '/icon.png?v=1.0.0' },
      { rel: 'apple-touch-icon', hid: 'apple-touch-icon', href: '/apple-touch-icon'.png?v=1.0.0' },
      { rel: 'manifest', hid: 'manifest', href: '/manifest.json?v=1.0.0' }
    ],
...

すると、オリジナルの画像のアイコンが反映された。