favicon（ファビコン）って一つじゃなかったのね？デバイスによって色々変えられたらしい

2015/01/23

1年以上前の記事です。内容が古い可能性があります。

個人的にはあまり設定したこと無いのですが、favicon（ファビコン）ってのがWebサイトにはあって、何かというとアイコンのことですね。
ブックマークとかしたときに、タイトルの前に表示される奴。

「ちほちゅう」だったらこんな感じ。（設定してるじゃねーかw）

ただですね。
どうも、ブラウザのタイトル横のアイコン以外にもたくさんのfavicon（ファビコン）と呼ばれるものがあるようなんです。

□ Webサイトに必要なfaviconが21個になっていた – IT探検記

例えばわかりやすいところでは、iPhoneのデスクトップ（「待ち受け画面」とも言うのか？）に表示されるアイコン。
あれも、favicon（ファビコン）の一種です。

そもそも、（ファビコン）とは何なのか？

□ Favicon – Wikipedia

favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon（フェイバリット・アイコン：お気に入りアイコン）という英語の語句を縮約したものである。

なるほど、お気に入りアイコンの略だとのこと。であれば確かに色々あってもいいですよね。

にしても多いです。先ほどの記事から引用してみます。

favicon.ico: IE用

favicon-16×16.png: タブ表示用

favicon-32×32.png: Mac版Safari用

favicon-96×96.png: Google TV用

favicon-160×160.png: Opera 12 までのスピード・ダイアル用

favicon-196×196.png: Android版Chrome用

mstile-70×70.png: Windows 8 用

mstile-144×144.png

mstile-150×150.png

mstile-310×310.png

mstile-310×150.png

apple-touch-icon-57×57.png: iOS用

apple-touch-icon-60×60.png

apple-touch-icon-72×72.png

apple-touch-icon-76×76.png

apple-touch-icon-114×114.png

apple-touch-icon-120×120.png

apple-touch-icon-144×144.png

apple-touch-icon-152×152.png

apple-touch-icon.png

apple-touch-icon-precomposed.png

サイズ違いだけで被ってるのも結構ありますが全部で21個もあります。
ファイル名で分けると通常のfavicon（ファビコン）とWindows8用とApple（iPhoneやiPad）用の3種類に分かれます。
通常のfavicon（ファビコン）は大きさによってGoogleテレビ用やAndroid用などと分かれているようですね。

もちろん、全部を揃えなければならないというわけではないのですが、こんなサイトもあるので有効利用してあげるといいと思います。
□ Favicon Generator for all platforms: iOS, Android, PC/Mac….

ブランディングになるし、実はWordPress（ワードプレス）高速化にもなったりしますので、できるだけ全種類用意してあげるほうがいいかもしれないです。

最近ではインターネットをする媒体もパソコンだけではなく、タブレットやスマホなどバリエーションが豊富になっています。
これからもこの傾向は続いていくと思われるので、より、多くの媒体に対して適応させてあげるのがいいでしょう。

冒頭、あまり設定したこと無いのですがと言いましたが、機会をみて、設定しておこうかなぁとちょっと感じました。
favicon（ファビコン）の設定に関しては機会があったら解説していきます。

- Webデザイン, 雑談 favicon, アイコン, お気に入り, スマホ, ファビコン, ブックマーク, ブラウザ