LoginSignup
0
0

More than 1 year has passed since last update.

Faviconの実装方法(Laravel)

Posted at

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

やりたいこと

私なりに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

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