0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

favicon.ico を設定して表示するまでの手順【Laravel + Xserver】

Last updated at Posted at 2025-05-03

ゴール

スクリーンショット 2025-05-03 20.49.28.png

手順

1. ファビコン画像を作成する

サイズは 32×32px か 48×48px の .ico ファイルが最適。

✅ オススメの作成サイト

・favicon.io(テキストや画像から .ico 作成可能)
・ConvertICO
・RealFaviconGenerator

今回行った方法

① canva で png 作成

✅ 画像を透過させると デザインとして綺麗になる。
スクリーンショット 2025-05-03 20.51.50.png

② favicon.io で PNG → ICO 変換

スクリーンショット 2025-05-03 20.53.57.png

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
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?