🍉
【Next.js15】favicon設定方法
ファビコンとは？
webサイトのアイコンです、githubなどwebサイトを開くと上のツールバーに表示されます
他のサイトを閲覧した後、再びアクセスする時の目印になります
手順
appディレクトリ配下に
favicon.ico
icon.png
apple-icon.png
を用意する
ファイル規則 サポートされているファイル形式 有効な場所
favicon .ico app/
icon .ico、、、、、.jpg.jpeg.png.svg app//*
apple-icon .jpg、、.jpeg.png app//*
png形式でファビコンにしたい画像を用意
canvaや生成aiを利用して作成
pngをファビコンに変換する
専用のサイトがあるのでそれを使って変換する
ファイルがいくつかできるのでリネームする
site.webmanifestは不要です
apple-touch-icon.pngをapple-icon.png
favicon.icoとsite.webmanifest以外をicon.pngに連番で変更icon.png1``icon.png2...
画像を全てapp直下に貼り付ける
これでファビコンを無事に設定出来ました！
ちなみにapple-iconはiosのホーム画面に追加時のアイコンにもなります
最後に
app直下に入れるだけでファビコンを設定できるのは非常に楽ですね♪
この情報がお役に立てば幸いです！
Discussion