「npm run generate」してもfaviconが変わらない時の対処法【nuxt.js】

はじめまして、ますみです！

[![自己紹介.png](https://www.umi-mori.jp/wp-content/uploads/2023/02/introduction_banner_2-2048x533.png)](https://bit.ly/banner_intro_masumi_creator_qiita)


# 1. バグ内容
以下のような流れでデプロイをしたのですが、「**Nuxtのデフォルトアイコンがファビコンとして表示されるエラー**」が起こりました。

1. `nuxt.js (vue.js)`でプロジェクトを作成（`SPA / PWA`で作成）
2. `favicon.ico`と`icon.png`をカスタムのアイコンファイルに変更
3. `npm run dev`でファビコンが変わっていることを確認
4. `npm run build`して、`npm run generate`して、静的フォルダ（`dist`）を生成
5. `firebase hosting`へデプロイ

ホスティングしたサイトのタブを見ると以下のようになりました。
変えたはずのファビコンがなぜかNuxtのデフォルトアイコンのままになっていました、、、。
<img alt="default_favicon.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/ebe24c0c-13bc-c97b-9b6e-d269c36c96a7.png" width="300" />
ちなみに、`npm run dev`で立てたローカルサーバーでは、変更後のファビコンが表示されました。
この記事では、このような場合のシンプルな対処法を紹介します。

# 2. サクッと対処する方法
① 以下のように`pwa: {icon: false},`を`nuxt.config.js`に追記

```js: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フォルダを生成して、デプロイ

```zsh:
% npm run build
% npm run generate
% firebase deploy --only hosting
```

すると、以下のように`favicon.ico`のデータが無事表示されるようになりました！
<img alt="custom_favicon.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/03482703-803e-f554-b98e-e75879e331f1.png" width="500" />

# 3. バグの原因
調べてみたところ、[PWAのバグ]()によるものっぽかったです。
私のプロジェクトには、以下のように`@nuxtjs/pwa`のモジュールを追加していました。

```js:nuxt.config.js
...
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
  ],
...
```

そして、その結果、以下のように`dist/nuxt/icons`の中にPWA対応用の画像が生成されていました。
<img alt="dist.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/3db1825e-4ce9-79a5-a9a7-d523d27e8e29.png" width="500" />
さらに、これらのファイルが「nuxtデフォルトのアイコン」になっていました。
[公式ページ](https://pwa.nuxtjs.org/icon/)によると、デフォルトでは`static/icon.png`を参照して生成されるっぽいのですが、どうやらそこのパスがうまく一致していないみたいでした。

そのため、とりあえずの策としてPWAのiconを無効にするコマンドを追加すると、このフォルダが生成されなくなり、PWAのアイコンではなく、`favicon.ico`の方のアイコンが優先して表示されるようになりました。

# 4. しっかりと対処する方法
あくまでここまで紹介したのは、サクッと対処する方法でしたが、「PWAのアイコンをしっかりと設定したい！」という方は、以下のような方法で対処すればいいかと思います。

## A. `faviator`を使用した対処法
- [PWAに対応するときにiconを速攻で作成する](https://tech.sumainoiroha.com/articles/pwa-icon)

## B. `head`を編集する対処法
- [How to set icon on PWA app on home screen and Bookmark using nuxt.config.js (Safari) - stack overflow](https://stackoverflow.com/questions/54779643/how-to-set-icon-on-pwa-app-on-home-screen-and-bookmark-using-nuxt-config-js-saf)

# 5. 補足（開発環境）

`zsh:version.txt
% 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

# 最後に
最後まで読んでくださり、ありがとうございました！
いかがだったでしょうか？

この記事を通して、少しでもあなたの学びに役立てば幸いです！

:::note info
【仕事の相談はこちら】
お仕事の相談のある方は、下記のフォームよりお気軽にご相談ください。

[問い合わせフォームはこちら](https://forms.gle/G5g1SJ7BBZw7oXYA7)

もしもメールでの問い合わせの方がよろしければ、下記のメールアドレスへご連絡ください。

info*galirage.com（*を@に変えてご送付ください）

🎁 「生成AI活用の無料相談券」もしくは「生成AIの社内ガイドライン（無料PDF）」を『公式LINE』で配布中 🎁
『生成AIを業務に活用したいけど、どうしたらいいかわからない』といった声を多くいただきます。

Galirageでは公式LINEにて、チャットやオンライン会議で「完全個別の生成AI活用無料相談会」を実施しております！
（期間限定で実施しているため、ご興味ある方はお早めに以下のLINE公式アカウントをご登録ください^^）
https://lin.ee/rvz6lMN

※ 予告なく、キャンペーンを終了する可能性がございますが、ご了承ください。

【業務内容】
具体的には、以下のお仕事を中心に受け付けております！（[詳しくはこちら](https://galirage.notion.site/Galirage-AI-c2f3945fafb0433d8d2fd03e56927fd8)）
1. 受託開発（例：生成AIを使った社内システムの開発）
2. コンサルティング（例：技術戦略のアドバイス）
3. 講演（例：社内研修、イベント登壇）

※ 特に「生成AIを使ったシステム開発のご依頼」が多く、ご好評いただいております。

【これまでの相談事例】
以下のようなご相談が多くあります。

🔑 機密情報を漏洩させないための、生成AIのシステム構築をお願いしたい。
🤖 自社データを用いたFAQチャットボットの作り方を知りたい。
💡 ChatGPTを、自分たちの事業にどのように活かせるか、アドバイスやアイデアが欲しい。
:::
# おまけ
エンジニアの仲間（データサイエンティストも含む）を増やしたいため、公式LINEを始めました🎉

「**一緒に仕事をしてくれる方**」「**友だちとして仲良くしてくれる方**」は、友だち追加をしていただけますと嬉しいです！（仲良くなった人たちを集めて、「ボードゲーム会」や「ハッカソン」や「もくもく会」もやりたいなと考えています😆）

とはいえ、みなさんにもメリットがないと申し訳ないので、特典を用意しました！

友だち追加後に、アンケートに回答してくれた方へ「**エンジニア図鑑（職種20選）**」のPDFをお送りします◎

https://lin.ee/hFUN4TL

[![](https://www.umi-mori.jp/wp-content/uploads/2023/10/line_banner_v2.png)](https://lin.ee/hFUN4TL)