Faviconの実装方法（Laravel）

4556 ワード
favicon プログラミング初心者 Laravel favicon テキストリンク

プログラミング初心者です。

やりたいこと

私なりにfaviconを実装した方法をご紹介していきます。

開発環境

PHP
Laravel5.8
MAMP

1 faviconにしたい画像を決める

無料画像ダウンロードサイトで画像を選びました。

参考画像ダウンロードサイト

ダウンロード形式はJPEGかPNGでいいと思います。
私は256か512サイズをダウンロードしました。

2 画像形式をicoに変更

形式がPNGやJPEGでも実装できるのですが、ブラウザによって（例：Edge）表示できない場合もあるそうです。
下記のサイトで形式の変更ができます。
私は16サイズにしました。

3 ターミナルで直接画像をダウンロード（Macのみ）

ドロップして移動させる方法もありますが、環境によってできない状況に出くわしたので、ターミナルに直接画像をダウンロードしました。（Macのみ）

publicディレクトリーに保存したいため移動します
$ cd public

Finderに保存している画像をダウンロード　　　大文字のオー
$ curl -O サーバー上のファイル名で保存

サーバー上のファイル名というのは、http://~やhttps://~から始まるURLです。
Finder→ダウンロードしたい画像右クリック→情報→詳細情報:入手先:
にURLが記載されています。

参考サイト

4 headタグ内に実装

publicディレクトリー内に画像がダウンロードできたか確認できたら、viewのheadタグ内に以下のコード記載します。

sample_blade.php
<head>

<link rel="icon"  href="{{ asset('sample.ico') }}">

</head>

hrefに画像パスを指定します。
今回はpublicディレクトリー内にあるため、assetメソッドを使用します。
asset（'ファイルパス'）はpublicディレクトリのパスを返すメソッドです。

補足　assetについて

通常はhttpの時はassetメソッド、httpsの時はsecure_assetメソッドを使うみたいですが、環境が変わるごとに書き換えるのは面倒ですよね。
http、httpsでもassetメソッドを使えるように設定ができます。
二つのファイルを以下のようにします。

TrustProxies.php
protected $proxies = "**";
AppServiceProvide.php
    public function boot()
    {
        if (\App::environment('production')) {
            \URL::forceScheme('https');
        }
    }

または

    public function boot()
    {
        if (request()->isSecure()) {
            \URL::forceScheme('https');
        }
    }

自分はこれでhttpでもhttpsでもassetメソッドが使えています。
参考記事：https://qiita.com/e_tyubo/items/c25df0c545b1af8494c7

64ビットUbuntu 16.04でAndroid Studioをインストール
php ??と?:区別する