ゴール
手順
1. ファビコン画像を作成する
サイズは 32×32px か 48×48px の .ico ファイルが最適。
✅ オススメの作成サイト
・favicon.io(テキストや画像から .ico 作成可能)
・ConvertICO
・RealFaviconGenerator
今回行った方法
① canva で png 作成
② favicon.io で PNG → ICO 変換
2. Laravelプロジェクトにファビコンを追加する
作成した favicon.ico を Laravel プロジェクトの public/ ディレクトリ直下に配置します。
すでにある場合、置き換えOK。
your-laravel-project/
├── public/
│ └── favicon.ico ←★これを配置!
Gitで管理している場合はコミットしておきます。
git add public/favicon.ico
git commit -m "Add favicon.ico"
git push origin main
3. Xserver に配置する(※Git pull だけではNG)
❗️重要ポイント
Xserverでは Laravel の public/ ディレクトリは自動で公開されません。
ブラウザは /favicon.ico に直接アクセスするため、public_html/ に手動コピーが必要です。
まずは、 GitHub 上の最新変更をエックスサーバーに取り込む
cd プロジェクト
git pull origin main
メインドメインの場合
✅ コマンド例(本番サーバーで実行)
cp /home/ユーザー名/akkun1114.com/プロジェクト名/public/favicon.ico /home/ユーザー名/akkun1114.com/public_html/favicon.ico
サブドメインの場合
cp /home/ユーザー名/akkun1114.com/プロジェクト名/public/favicon.ico /home/ユーザー名/akkun1114.com/public_html/サブドメイン/favicon.ico
4. 表示確認する
https://自分のドメイン/favicon.ico
その後、アプリページでスーパーリロード:
Mac:Cmd + Shift + R