1. バグ内容
以下のような流れでデプロイをしたのですが、「Nuxtのデフォルトアイコンがファビコンとして表示されるエラー」が起こりました。
nuxt.js (vue.js)でプロジェクトを作成（SPA / PWAで作成）favicon.icoとicon.pngをカスタムのアイコンファイルに変更npm run devでファビコンが変わっていることを確認npm run buildして、npm run generateして、静的フォルダ（dist）を生成firebase hostingへデプロイ
ホスティングしたサイトのタブを見ると以下のようになりました。
変えたはずのファビコンがなぜかNuxtのデフォルトアイコンのままになっていました、、、。
ちなみに、npm run devで立てたローカルサーバーでは、変更後のファビコンが表示されました。
この記事では、このような場合のシンプルな対処法を紹介します。
2. サクッと対処する方法
① 以下のようにpwa: {icon: false},をnuxt.config.jsに追記
...modules:[// https://go.nuxtjs.dev/axios'@nuxtjs/axios',// https://go.nuxtjs.dev/pwa'@nuxtjs/pwa',],// ===== 以下のコードを追加 =====pwa:{icon:false},...② distフォルダを削除（rm -rf dist）
③ 再び以下のコマンドでdistフォルダを生成して、デプロイ
% npm run build
% npm run generate
% firebase deploy --only hosting
すると、以下のようにfavicon.icoのデータが無事表示されるようになりました！
3. バグの原因
調べてみたところ、PWAのバグによるものっぽかったです。
私のプロジェクトには、以下のように@nuxtjs/pwaのモジュールを追加していました。
...modules:[// https://go.nuxtjs.dev/axios'@nuxtjs/axios',// https://go.nuxtjs.dev/pwa'@nuxtjs/pwa',],...そして、その結果、以下のようにdist/nuxt/iconsの中にPWA対応用の画像が生成されていました。
さらに、これらのファイルが「nuxtデフォルトのアイコン」になっていました。
公式ページによると、デフォルトではstatic/icon.pngを参照して生成されるっぽいのですが、どうやらそこのパスがうまく一致していないみたいでした。
そのため、とりあえずの策としてPWAのiconを無効にするコマンドを追加すると、このフォルダが生成されなくなり、PWAのアイコンではなく、favicon.icoの方のアイコンが優先して表示されるようになりました。
4. しっかりと対処する方法
あくまでここまで紹介したのは、サクッと対処する方法でしたが、「PWAのアイコンをしっかりと設定したい！」という方は、以下のような方法で対処すればいいかと思います。
A. faviatorを使用した対処法
B. headを編集する対処法
5. 補足（開発環境）
% node -v
v14.12.0
% npm -v
6.14.8
% npm list --depth=0
sample@1.0.0 ~/Documents/sample
├── @nuxt/types@2.14.6
├── @nuxt/typescript-build@2.0.3
├── @nuxt/typescript-runtime@2.0.0
├── @nuxtjs/axios@5.12.2
├── @nuxtjs/pwa@3.0.2
├── @nuxtjs/style-resources@1.0.0
├── @nuxtjs/vuetify@1.11.2
├── core-js@3.6.5
├── nuxt@2.14.6
├── nuxt-webfontloader@1.1.0
├── prettier@2.1.2
├── sass-loader@7.1.0
└── vuex-persistedstate@3.1.0
% firebase --version
8.11.2