Railsでのfavicon（ファビコン）の設定方法

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

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

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

【目次】

【本題】

faviconとは

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

・ブラウザのタブ

・ブックマーク

faviconを設定する目的

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

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

Railsでの設定方法

１：画像データの用意

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

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

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

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

２：画像データの配置

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

３：faviconを読み込むコードを記述

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

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

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

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

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

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

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

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

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

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

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

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

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

rails s -p 3200

キャッシュを削除する

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

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

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

↓こんな感じ

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

↓こんな感じ

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

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

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

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

残り・・・「9127時間！」