Railsでのfavicon(ファビコン)の設定方法

f:id:ryoutaku_jo:20190306164857p:plain

【結論】
favicon(ファビコン)とは、
 ブラウザのタブやブックマークの
 アイコンとして使用される画像データ

・設定する事で、よりユーザーの印象に
 残りやすいサイト作りが出来る

faviconはブラウザにキャッシュされるので、
 ローカル環境で表示させると、
 同じローカルホストで別アプリを起動した時にも、
 同じアイコンが表示される


【目次】


【本題】

faviconとは

ホームページのアイコン(シンボルマーク)として使用される画像データの事です。
ブラウザのタブや、ブックマークなどで表示されます。

・ブラウザのタブ
f:id:ryoutaku_jo:20190306165358p:plain

・ブックマーク
f:id:ryoutaku_jo:20190306165411p:plain

faviconを設定する目的

タブを開き過ぎたり、ブックマークの数が多くなると、
文章だけでは一目で目的のサイトか判断が困難になります。

faviconを設定すれば、直感的に判断が出来るようになる為、
ユーザー側の負担を大きく減らす事が出来て、
ユーザーの印象に残りやすいサイト作りに繋がります。

Railsでの設定方法

1:画像データの用意

faviconに設定する為の画像データを用意します。

アイコンは、ChromeSafariなどのタブでは「32px × 32px」
Internet Explorerのタブでは「16px × 16px」で表示されます。

上記の通り、かなり小さいサイズす。
その為、細かいデザインだと、見分けが付きづらくなってしまうので、
シンプルなデザインの方が良いでしょう。

なお、画像データのファイル名は、
favicon.icoとします。


2:画像データの配置

「app/assets/images」フォルダ内に、用意した画像データを配置します。

f:id:ryoutaku_jo:20190306172908p:plain


3:faviconを読み込むコードを記述

faviconは、どのページでも表示されるようにしたいので、
「app/views/layouts/application.html.erb」
読み込む為のコードを追記します。

headタブの間に、下記の一行を追記するだけです。

<%= favicon_link_tag('favicon.ico') %>

これだけで、あとはサーバーを起動し直せば、faviconが反映されます。

f:id:ryoutaku_jo:20190306173641p:plain

ローカル環境だとfaviconが消えない?

faviconの設定で、戸惑う事として、
設定後に別のアプリケーションをローカルで起動させると、
そのアプリでも、同じfaviconが表示されてしまう事です。

f:id:ryoutaku_jo:20190306173745p:plain


これは、ブラウザのキャッシュが原因です。

キャッシュとは、ブラウザの機能の一つで、
画像などのサイトのデータを保持する事で、
同じサイトに再度アクセスした際、データをダウンロードする手間が
省けるので、スムーズにサイトへアクセス出来るという仕組みです。

faviconも、ブラウザのキャッシュで保持されるのですが、
同じポートで別のアプリケーションを起動させた場合、
前回のサイトにアクセスしたと認識してしまい、
キャッシュから前回起動したアプリのfaviconを取り出して表示させてしまいます。

これを防ぐには、キャッシュを消すか、
違うポートでアプリを起動させる方法があります。

違うポートでアプリを起動させる

通常「rails server(rails s)」コマンドでアプリを起動させると
ポートは「3000」を使用します。

下記の様に「-p」オプションでポート番号を指定して、
アプリを起動させる事が可能です。

rails s -p 3200

キャッシュを削除する

Chromeであれば、下記のディレクトリにある「Favicons」
というファイルを削除後、Chromeを起動し直せば、Faviconは消えます。

/Library/Application\ Support/Google/Chrome/Default/

但し、この方法だと他のサイトのFaviconも消えてしまいます。

↓こんな感じ
f:id:ryoutaku_jo:20190306171403p:plain


もう一度サイトにアクセスすれば、Faviconは復活します

↓こんな感じ
f:id:ryoutaku_jo:20190306171446p:plain


いずれにしても、違うアプリのFaviconが表示されたとしても、
開発環境だけの話で特に支障は無いので、
気にせずそのままにしておくのが、最も合理的かもしれません。

《今日の学習進捗(3年以内に10000時間に向けて)》

就活。Dockerばっかりだったので、気分転換に簡単なアプリの開発に着手。

学習開始からの期間 :89日
今日までの合計時間:873h
一日あたりの平均学習時間:9.9h
今日までに到達すべき目標時間:813h
目標との解離:60h
「10,000時間」まで、

残り・・・「9127時間!」