Nuxt3でfaviconを設定する方法。staticフォルダにおいても認識されない！
faviconを設定するだけなのに、数時間かかってしまいました汗
記事通りにやってもうまくいかず、vite公式ドキュメントを見てようやく解決しました。
（上手くいかなかった原因は、設定方法が書かれた記事の多くはnuxt2用（webpackを使用）の設定方法だからです。Nuxt3はデフォルトでviteを使っているので、viteのドキュメントを見て解決したというわけです。）
詰まっている人の助けになったら幸いです。
favicon設定方法
STEP 1
favicon.pngを作成する
16px x 16px もしくは 32px x32pxをファイルを用意する
STEP 2
publicディレクトリを作成し、favicon.pngを配下に置く
STEP 3
nuxt.config.jsに追記する
favicon設定は「link」の部分です。
export default defineNuxtConfig({
app:{
head: {
title: "My Site",
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
],
link: [
{ rel: "icon", type: "image/png", href: "/favicon.png" }, // これを追記する
],
},
}
})
href: "/favicon.png" ←この記述だけでpublicフォルダ内のfaviconファイルが参照されます。
head設定について詳しく知りたい人は、Nuxt3公式ドキュメントを見てみてください。
STEP 4 おまけ（GitHub Pagesデプロイ用設定）
GitHub Pagesにデプロイする場合は、favicon.pngの前にレポジトリ名を入れておく必要があります。（例：レポジトリ名がsampleだったら、/sample/favicon.pngにします。）
ただ、ローカルと本番用でコードを分けるのは面倒なので、環境変数で判断して切り替わるように設定します。
const isProduction = process.env.NODE_ENV == "production"; //環境判定
const href = isProduction ? "/<reponame>/favicon.png" : "/favicon.png";
export default defineNuxtConfig({
app:{
head: {
title: "My Site",
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
],
link: [
{ rel: "icon", type: "image/png", href },
],
},
}
})
よく紹介されている設定方法（これだと動きません）
需要あるか分りませんが、一応書いておきます。
- faviconファイルを作成する
- staticフォルダを作成し、配下にfaviconファイルを置く
- nuxt.config.jsに設定を追記する
favicon.icoをstaticにおいて、このコードで設定書いたけどダメだった。。
export default defineNuxtConfig({
head: {
title: "basicactor's Portfolio",
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }, // ここを変更する
],
},
})
上の手順でダメだったので、いろいろ試しました↓↓
- キャッシュクリア
- faviconをpngファイルに変更
- faviconサイズを32 x 32に変更
- faviconをassetsに移動し、nuxt.config.jsのhrefを"@/assets/image/favicon.ico"に変更
でも無駄でした.. 狂いそうになりました....><..
faviconをあまくみてました...
よく紹介されている記事の通りに設定して、npm run devすると、
headには表示されていたので、余計混乱していました。
TIPS
上手く表示されない時は、ひとまずfaviconファイルがバンドルされているかを確認することをおすすめします。
generateして、faviconファイルがdistフォルダに入っていない場合は、viteに認識されていない証拠です。
npm run generate
バンドルされてれば、このようにdist直下にfaviconファイルが入ります。
また、↓の記事では.pngでも.icoでもどっちてもOK的なことが書いてありましたが、
実際icoだと表示されなかったので、nuxt2用の記事だったかもしれません。
つぶやき（無視してください）
faviconにこんなに詰まると思っていませんでした..
詰まったときは公式ドキュメントを見るのが最適解だと実感しました。
先人がまとめた記事のほうが読みやすいので、ついをそっちを見てしまうんですよね..
特にNuxt3は大きな変更があったみたいで（vue2 → vue3、webpack → vite）、
詰まることが多い気がします。
でもいい勉強になるので、これからも続けたいと思います！
参考
2年前の記事（おそらくNuxt2用の設定方法）
Discussion