はじめに
こんにちは。株式会社インプルの奈良です。
この記事では、Laravelでのファビコン(favicon)とタイトルバー（ページタブ）の設定方法について解説します。
ファビコン(favicon)とは
ファビコン、あまり聞き慣れない言葉です。
私はエンジニアとして働き始めてから初めて耳にしました。
端的に言うと、ブラウザのタブなどに表示されるWebサイトのアイコンのことです。
ファビコンの設定方法
Laravelでファビコンを設定する手順は下記の通りです。
①ファビコンに設定したい画像を、publicディレクトリ直下に格納
②ファビコンを表示したいbladeファイルのhead箇所に下記のようにlinkを指定
（画像のpathと名称は適宜変更してください。）
<link rel="shortcut icon" href="{{ asset('/favicon.ico') }}">※ファビコンのサイズには様々なサイズや対応ブラウザがあります。
| サイズ | ブラウザ | ファイル名 |
|---|---|---|
| 16px x 16px | Edgeのタブ Chromeのタブ Firefoxのタブ Safariの履歴 | favicon.ico （マルチアイコンにする） |
| 32px x 32px | Retinaの各ブラウザタブ | favicon.ico （マルチアイコンにする） |
| 180px x 180px | iOS,Safariのホーム画面 Android Chromeのタブ、ホーム画面 Mac Safariのお気に入り | apple-touch-icon.png |
| 192px x 192px | Android Chromeのブラウザタブ、ホーム画面 | android-chrome-192×192.png |
タイトルバー（ページタブ）の設定方法
次は、タイトルバー（ページタブ）の設定方法です。
お使いのブラウザ上部に表示されている、画面のタイトルが記載されている箇所が該当します。
弊社のwebページのタイトルバー（ページタブ）は、下図の赤枠部分にあたります。
タイトルバー（ページタブ）の設定方法
それでは、タイトルバー（ページタブ）の設定方法についてです。
今回は、①bladeファイル使用時のタイトルバー（ページタブ）の設定方法と、②AdminLTEを使用した際に設定を忘れがちなログインページにおけるタイトルバー（ページタブ）の設定方法の２点を記載します。
①bladeファイル使用時のタイトルバー（ページタブ）の設定
@section('title', 'ここに表示したいタイトルバー（ページタブ）を設定する。')アプリの各機能ごとのbladeファイルに、上記コードのように表示したいタイトルを設定することで、タイトルバー（ページタブ）の表示を画面ごとに変更することができます。
②AdminLTEを使用した際にログインページにおけるタイトルバー（ページタブ）の設定
webアプリを作成する際にAdimiLTEを使用して、ログインページを実装をすることが多いと思いますが、忘れがちなのがログインページのタイトルバー（ページタブ）になります。
ログインページのタイトルバー（ページタブ）を変更するには、adminlte.phpのtitle箇所を変更する必要があります。
adminlte.php
/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
|
| Here you can change the default title of your admin panel.
|
| For detailed instructions you can look the title section here:
| https://github.com/jeroennoten/Laravel-AdminLTE/wiki/Basic-Configuration
|
*/
<span class="marker-red"> 'title' => 'ここに表示したいタイトルバー（ページタブ）を設定する。',
</span> 'title_prefix' => '',
'title_postfix' => '',※当該ページのtitle箇所に記載した内容がすべてのページのタイトルバー（ページタブ）で表示されるため、機能ごとでタイトルバー（ページタブ）に表示したいタイトルを変更したい場合は、①bladeファイル使用時のタイトルバー（ページタブ）の設定で記載したように、titleを明示する必要があります。
おまけ：AdminLTEを使用した場合のファビコンの設定について
余談ですが、AdminLTEを使用した場合のファビコンの設定は下記のような方法もあります。
adminlte.php
/*
|--------------------------------------------------------------------------
| Favicon
|--------------------------------------------------------------------------
|
| Here you can activate the favicon.
|
| For detailed instructions you can look the favicon section here:
| https://github.com/jeroennoten/Laravel-AdminLTE/wiki/Basic-Configuration
|
*/
'use_ico_only' => false,
'use_full_favicon' => false,use_ico_only：trueに設定すると、ウェブサイトのFaviconにfavicon.icoファイルのみが使用されます。falseに設定すると、publicディレクトリ内にあるfavicon.png、favicon.gifなどの他のファイルをFaviconとして使用します。use_full_favicon：trueに設定すると、小さなアイコンと大きな画像の両方を含むフルFaviconが使用されます。falseに設定すると、小さなアイコンのみがFaviconとして使用されます。
詳しくは、Laravel-AdminLTEのWikiに記載されていますので、興味のある方・実装がうまくいかない方は参考にしてください。
ファビコンが表示されない原因と対処法
ファビコンの表示がうまくいかない原因は、キャッシュが悪さしていたり、assetのpathを正しく指定できていない、参照先を明示的に指定をしてあげないとあらかじめ用意されているものが適用されてしまうといったケース等が多々あります。
私なりにファビコンが表示されない（されなくなった）原因と確認すべき点を下記にまとめました。
ファビコンの設定が上手く反映されない際に参考になれば幸いです。
①ファビコンファイルが存在しないか、場所が変更された
ファビコンが正しく表示されない場合、まずはファビコンファイル自体が存在するかどうか、またはファイルの格納ディレクトリに変更がないか確認してください。
②ファビコンのファイル名・格納先が変更された
ファビコンファイルの名前が変更・格納場所を変更した場合、参照しているHTMLコードも変更する必要があります。
HTMLコードを確認し、ファビコンファイル名・pathが正しいかを確認してください。
※asset()関数は「/public」以下を参照します。ファビコンファイルの格納先が、/public/favicon.icoなら下記のような指定になります。
<link rel="shortcut icon" href="{{ asset('/favicon.ico') }}">③キャッシュされたファビコンが古くなった
ブラウザは、ファビコンをキャッシュしてページを再読み込みする際に以前のファビコンを使用することがあります。
そのため、キャッシュされたファビコンが古くなってしまう場合があります。
この場合は、ブラウザのキャッシュをクリアすることで解決することができます。
また、ブラウザのキャッシュ以外にもdockerを使用している場合は、dockerのviewのキャッシュ削除有効な場合があります。
④ファビコンのサイズが大きすぎる
ファビコンのサイズが大きすぎる場合、ブラウザが表示できなくなることがあります。
ファビコンのサイズを小さくして、再度試してみてください。
⑤HTMLコードに誤りがある
ファビコンを表示するためのHTMLコードに誤りがある場合、ファビコンが正しく表示されないことがあります。
HTMLコードを確認し、修正が必要な箇所を見つけてください。（※②が原因なケースが多いです。）
参考サイト
