俺とfavicon（ファビコン）の面倒くさい関係

2015年1月30日

塚田信秋

こんにちは。UIデザイン担当の塚田です。

今日は、WEBサイトに付きもの**favicon（ファビコン）**についてお話します。

デザインやっててロゴデザイン開発とかサイトデザインは楽しく進められるんですが、

コーディングなどフロントエンドの構築はいつも別のスタッフに任せていました。

そして意外におろそかになりがちなのが、favicon（ファビコン）。。

一昔前は、PCのWEBサイトのブックマークとか、URL入力枠の横辺りにさりげなく

サービスロゴが掲載されてるピクトアイコンという程度の認識でした。

最近とある案件で作成することになり、favicon（.ico）ファイルの作成方法を探していたら、

とあるブロガーがfaviconの種類について掲載されていました。

なんと！21個もあるとのことっ！！

faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: Android版Chrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-310x150.png apple-touch-icon-57x57.png: iOS用 apple-touch-icon-60x60.png apple-touch-icon-72x72.png apple-touch-icon-76x76.png apple-touch-icon-114x114.png apple-touch-icon-120x120.png apple-touch-icon-144x144.png apple-touch-icon-152x152.png apple-touch-icon.png apple-touch-icon-precomposed.png

（以下、「IT探検記」さんのまとめより引用）

こんなにあるんですね・・・^^;

10年くらい前までは、WEBサイトのファビコンはPCブラウザくらいを意識して設定しておけばよかったのですが、

８年ほど前にスティーブ・ジョブズがiPhoneを発表して以来、

iPhone、Android、iPad、iPod touchなど様々なマルチメディア端末が登場し、

それら端末やOSに合わせて露出するアイコン毎にデザインを調整しなくてはならない状況。。

とくにMacユーザーの私にとって意外に盲点だったのが、Windows 8のパネルデザインに入るfavicon。

OSのデザインがフラットデザイン化し、各色背景にピクトアイコンが白抜きでスッキリと納まっています。

ですので、このWindows 8用のアイコンだけは白抜きで調整しないと、他の要素とデザイントーンが合わない・・・

こんな数いちいち作っていられない。。

俺は favicon（ファビコン）作成に時間かけるくらいなら、デザインにもっと時間かけて拘りたいんだっ！！

そこで今回見つけたのが・・・