Next.jsのApp Routerでファビコンを設定する方法について解説します。
App Routerは、Next.js 13で導入された新しいルーティングシステムで、より柔軟なルーティングとデータフェッチが可能になりました。
目次
Next.jsのApp Routerでファビコンを設定する方法
1. ファビコンファイルを作成する
- favicon.ico⭐️
- icon.svg⭐️
- apple-icon.png⭐️
- manifest.json⭐️
- icon-192.png
- icon-512.png
⭐️がついているものに関しては、このファイル名で準備すること。
Next.jsがこれらのファイルを検出し、自動的に<head>タグに必要な設定を追加してくれます。
※⭐️以外の２ファイルに関しては、manifest.jsonで定義するのでファイル名は自由でok
ファビコンの種類やサイズについてはこちらを参照してください。
2. ファビコンを設置する
/appディレクトリのトップレベルに画像ファイルを置きます。
src/
├─app/
| ├─favicon.ico
| ├─icon.svg
| ├─apple-icon.png
| └ manifest.json
├─public/
| ├─icon-192.png
| ├─icon-512.png以上！デプロイしてファビコンを確認してみましょう😆
Vercelでファビコンが反映されない場合
ターミナルで下記コマンドを実行します。
vercel --force
vercel --prodブラウザのキャッシュを削除して再度確認してみてください。
