• HOME > 
  • Laravel > 
  • Laravelのプロジェクトでファビコンを設定する【favi...

Laravelのプロジェクトでファビコンを設定する【favicon】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

ファビコンとは?

ファビコンとはサイトを開いたときにブラウザのタブに表示されるアイコンのことです。

オリジナルのロゴやマークといったそのサイトを表すものをファビコンとして設定するのが一般的です。

faviconの例

ファビコンが設定されていない場合はブラウザが用意したアイコンが表示されます。

faviconがないときの例

Laravelプロジェクトにおけるファビコンの設定方法

Webサイトにファビコンを設定するには、HTMLのlinkタグを使用します。これはLaravelのプロジェクトにおいても同様です。

linkタグでのfaviconの指定

あらかじめLaravelプロジェクト内のディレクトリにアップロードしたファビコンデータをlinkタグのパスをhref属性に設定すればファビコンが表示されます。

ファビコン用のデータの用意とアップロード

まずは、フリーのアイコン素材や描画ソフトで自作するなどしてファビコン用の画像を用意しましょう。

今回は無料で利用できるフラットデザインのアイコン素材のストックサイト「FLAT ICON DESIGN-フラットアイコンデザイン-」からアイコンをダウンロードし、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プロジェクトのファビコン設定は完了です。

サイトを開いてファビコンが表示されているか確認してみましょう。(正しく表示されない場合は、ブラウザのキャッシュが影響している可能性もあるのでキャッシュの削除を試してみてください。)

faviconの例

まとめ

以上がLaravelのプロジェクトでファビコンを設定する方法です。

Laravelだからといって特殊な方法があるわけではなく、HTMLのlinkを使うという基本的なやり方でした。

広告
広告