Next.jsでファビコンを設定する際、App Routerを使っている場合、基本はかなりシンプルです。
app/favicon.ico は自動で認識される
Next.jsのApp Routerには、ファビコンなどを扱うための特殊なメタデータファイルがあります。
プロジェクトを次のような構成にします。
app/
├── favicon.ico
├── layout.tsx
└── page.tsx
app/favicon.ico を配置すると、Next.jsがファビコンとして認識します。
Next.js側がメタデータとして扱ってくれるので、ファビコンのためだけに <head> を手動編集する必要はありません。
まとめ
ファビコン設定で「public？ app？ layout.tsx？」と迷いましたが、App Routerなら自動認識で手間が省けて簡単だなと思いました。