【結論】
・favicon(ファビコン)とは、
ブラウザのタブやブックマークの
アイコンとして使用される画像データ
・設定する事で、よりユーザーの印象に
残りやすいサイト作りが出来る
・faviconはブラウザにキャッシュされるので、
ローカル環境で表示させると、
同じローカルホストで別アプリを起動した時にも、
同じアイコンが表示される
【目次】
- faviconとは
- faviconを設定する目的
- Railsでの設定方法
- ローカル環境だとfaviconが消えない?
- 違うポートでアプリを起動させる
- キャッシュを削除する
- 《今日の学習進捗(3年以内に10000時間に向けて)》
【本題】
faviconを設定する目的
タブを開き過ぎたり、ブックマークの数が多くなると、
文章だけでは一目で目的のサイトか判断が困難になります。
faviconを設定すれば、直感的に判断が出来るようになる為、
ユーザー側の負担を大きく減らす事が出来て、
ユーザーの印象に残りやすいサイト作りに繋がります。
Railsでの設定方法
1:画像データの用意
faviconに設定する為の画像データを用意します。
アイコンは、ChromeやSafariなどのタブでは「32px × 32px」
Internet Explorerのタブでは「16px × 16px」で表示されます。
上記の通り、かなり小さいサイズす。
その為、細かいデザインだと、見分けが付きづらくなってしまうので、
シンプルなデザインの方が良いでしょう。
なお、画像データのファイル名は、
「favicon.ico」とします。
2:画像データの配置
「app/assets/images」フォルダ内に、用意した画像データを配置します。
3: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時間!」