HOME
ファビコンとは？
ファビコンとはサイトを開いたときにブラウザのタブに表示されるアイコンのことです。
オリジナルのロゴやマークといったそのサイトを表すものをファビコンとして設定するのが一般的です。
ファビコンが設定されていない場合はブラウザが用意したアイコンが表示されます。
Laravelプロジェクトにおけるファビコンの設定方法
Webサイトにファビコンを設定するには、HTMLのlinkタグを使用します。これはLaravelのプロジェクトにおいても同様です。
あらかじめLaravelプロジェクト内のディレクトリにアップロードしたファビコンデータをlinkタグのパスをhref属性に設定すればファビコンが表示されます。
ファビコン用のデータの用意とアップロード
まずは、フリーのアイコン素材や描画ソフトで自作するなどしてファビコン用の画像を用意しましょう。
今回は無料で利用できるフラットデザインのアイコン素材のストックサイト「FLAT ICON DESIGN-フラットアイコンデザイン-」からアイコンをダウンロードし、Inkscapeでファビコン用に調整しました。
Inkscapeについてはこちらをご覧ください。
Inkscapeのダウンロード&インストール方法
無料で使えるベクターグラフィック描画ソフト「Inkscape」をダウンロードしてwindows10にインストールする流れを画像付き順を追って説明します。インストールが完了したら製作を始める前に、...【もっと読む】
jpgかpngとして保存したら、ファビコンに利用するために拡張子を「.ico」に変更し「favicon.ico」とします。
このファイルをLaravelプロジェクトのstorage/app/public内にアップロードします。
head内にlinkでファビコンを設定する
次にプロジェクトのbladeファイルの中（デフォルトでは「app.blade.php」など）にあるheadタグ内に「link」を追記します。
Laravelのヘルパ関数「asset」を使ってアップロードしたファイルまでのパスを指定します。（今回はアップロード時にpublic内にimagesというフォルダを作成し、その中にアップロードしました）
bladeファイル
<head>
//省略
<link rel="icon" href="{{ asset('/storage/images/favicon.ico') }}">
</head>
以上でLaravelプロジェクトのファビコン設定は完了です。
サイトを開いてファビコンが表示されているか確認してみましょう。（正しく表示されない場合は、ブラウザのキャッシュが影響している可能性もあるのでキャッシュの削除を試してみてください。）
まとめ
以上がLaravelのプロジェクトでファビコンを設定する方法です。
Laravelだからといって特殊な方法があるわけではなく、HTMLのlinkを使うという基本的なやり方でした。
