favorite(お気に入り)だけじゃないfaviconのお話

注目されることは少なくても、webに繋がる色々な場所で活躍している小さなアイコン「favicon」のお話。

こんにちは、FDG（フロントエンドディベロップメントグループ）の小西です。

突然ですが、「favicon（ファビコン）」をご存知でしょうか。

favorite iconの略称で、その名の通りwebブラウザ上でfavorite（お気に入り・ブックマーク）登録をした時に、ページタイトルの横に表示されるアイコンのことです。

主にサイトのロゴなどが設定され、テキスト情報の多い画面上で、目的のサイトを見つける助けとなります。

近年、web閲覧環境やデバイスの多様化に伴い、このfaviconにも様々なバリエーションが登場しています。


意識せずとも目にしたことのある物もきっとあると思いますが、今回はそれらを一通り紹介したいと思います。

FDGらしく、それぞれ実装例となるコードも記載しています。
※実装・設定方法は、記載のもの以外にも多数存在します。

１、各種ブラウザのブックマーク

(キャプション「左から: Google Chrome / Firefox / Microsoft Edge / Safari」)

{code}
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
{/code}

２、各種ブラウザのタブ

(キャプション「左から: Google Chrome / Firefox / Microsoft Edge / Safari」)

{code}
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
{/code}

３、スマートフォンのホーム画面

(キャプション「左: Android / 右: iPhone」)

{code}
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
{/code}

４、Windowsのデスクトップ

５、Windows8,10のスタートメニュー

６、Windowsのタスクバー

{code}//browserconfig.xml と言うファイル内で指定{/code}

７、Google検索結果

{code}
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
{/code}

※2019年5月末〜
参考: https://www.web-planners.net/blog/archives/000333.html

さて、いくつご存知でしたでしょうか。


webに欠かせない！とまでは言えないかも知れないけれど、実は色々なところで活躍しているfavicon。

是非次にwebを開くときは、ほんのちょっとだけ注目してみてください。

企業や製作者の、意外なこだわりや事実に出会えるかも知れませんよ。