こんにちは。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ブラウザくらいを意識して設定しておけばよかったのですが、
8年ほど前にスティーブ・ジョブズがiPhoneを発表して以来、
iPhone、Android、iPad、iPod touchなど様々なマルチメディア端末が登場し、
...