【新人研修だより】faviconの話

オフィス OJT

RBBの新favicon
  • RBBの新favicon
  • faviconの例
  • RBBの旧favicon
  • タブ(favicon導入前)
  • タブ(favicon導入後)
こんにちは。株式会社イード、新人エンジニアの田村穂隆です。

アプリケーション発表会の記事を書くことになったどっこいもみじさんに代わりまして、今回の新人研修だよりは田村が担当します。

さて、夏ですね。
夏休み真っ最中であろう子供たちを見るたびに、ノスタルジーに駆られます。
海で泳いだことや朝顔を育てたこと、最終日まで宿題を溜め込んで怒られたことなど……。
少年の頃の気持ち、大人になっても忘れずにいたいですね。

faviconとは何ぞや


今回はfaviconの話をします。
faviconとは「favorite icon(お気に入りアイコン)」を略した言葉で、Webサイトを示すアイコン画像のことです。
例えばGoogle Chromeでこのブログを読んでいるなら、タブの左端に

faviconの例

丸で囲まれた「i」の画像があるはずです。こいつがfaviconです。
faviconは、基本的には「favicon.ico」というファイル名で用意します。

マルチアイコン


favicon.icoというファイルには、16×16、32×32、48×48など、複数のサイズの画像を格納することができます。
松江ブランチだよりでも、複数のサイズが入ったfaviconファイル、いわゆるマルチアイコンを利用しています。

なぜ、マルチアイコンだと嬉しいのでしょうか?

実は、サイトを閲覧するデバイスやブラウザによって、使用されるfaviconのサイズも様々なんです!
そこで、favicon.icoに複数のサイズを格納しておくと、ブラウザやデバイスが、一番最適なサイズのfaviconを選んで使用してくれます。
どのデバイス、どのブラウザでもかっこいいfaviconを表示したいですよね。

マルチアイコンは、以下のようなサービスで簡単に作ることができます。
ファビコン作成 favicon.ico

あなたのサイトにもマルチアイコンを導入してみては?

一部のサイトのfaviconが新しくなりました!


OJT課題の一環として、イードが運営するいくつかのサイトのfaviconを新しくしました!
例えばRBB TODAYでは

RBBの旧favicon

こんな感じのfaviconから

RBBの新favicon

こんな感じになりました。画質が良くなりましたね!

また、イードのメディアを管理しているシステムのページにもfaviconを導入しました。

タブ(favicon導入前)

これまではうっかりタブを開きすぎてしまうとどれがどれだか分からなかったのが……

タブ(favicon導入後)

一目でわかるようになりました!
見た目のかっこよさだけでなく、作業効率も上がりそうですね!

コードを書くのはもちろん、こういった細かい部分のメンテナンスをするのも、
エンジニアの仕事の一つなのです。


次回は古川さんのターンです。お楽しみに!
《田村穂隆》

こちらもどうぞ

まとめ

page top