登録日： 2025-01-31   最終更新日： 2025-03-19

Laravel でファビコン（Favicon）を設定

ファビコン（Favicon）とは？

ファビコン（favicon） は、「favorite icon」 の略で、ウェブサイトのシンボルとなるアイコン のことです。ブラウザのタブ、ブックマーク、アドレスバーなどに表示されます。

ファビコンの表示場所

ファビコンは、以下のような場所で表示されます。

• ブラウザのタブ
• ブックマーク（お気に入り）
• スマホのホーム画面
• アドレスバー（URLバー）

ファビコンの形式と推奨サイズ

形式	推奨サイズ	備考
.ico	16x16px, 32x32px	古いブラウザでも対応、汎用的
.png	32x32px, 64x64px, 512x512px	透明背景が使える、最新のブラウザ向け
.svg	任意	ベクター画像なので高解像度対応
.jpg	32x32px 以上	背景透過なし

Laravel でファビコン（favicon）を設定する

Laravel でファビコン（favicon）を設定する手順を説明します。

ファビコン画像を用意

まず、ファビコン画像（favicon.ico または favicon.png など）を作成します。 推奨サイズは 16x16px または 32x32px ですが、favicon.png なら 512x512px などの大きいサイズも可能です。

public ディレクトリに images ディレクトリを作成

public ディレクトリに images ディレクトリを作成しファビコンを配置します。 以下のように直接URLを参照することができればファビコンの設置は終了です。

https://localhost/images/favicon.ico

または

https://localhost/images/favicon.png

head 内にファビコンを指定

*.blade.php や head セクションのある blade.php ファイルを開き、以下のコードを追加します。

<link rel="icon"
      href="{{ asset('images/favicon.ico') }}"
      type="image/x-icon">

または

<link rel="shortcut icon"
      href="{{ asset('images/favicon.ico') }}"
      type="image/x-icon">

または favicon.png を使用する場合

<link rel="icon"
      href="{{ asset('images/favicon.png') }}"
      type="image/png">

キャッシュをクリア

ブラウザや Laravel のキャッシュが影響することがあるため、以下のコマンドでキャッシュをクリアします。

※ ブラウザのキャッシュも削除するか、シークレットモード でも確認することが可能です。

php artisan view:clear

php artisan cache:clear

php artisan config:clear

---