faviconのサイズは主に16×16が使用されていました。そう今までは。サイトの最も目立つ判別に役立つデザインなので手を抜くわけにはいきません。
そんなfaviconが、どんどん進化してきて様々な部分で利用されることが増えてきてしまいました。すると、用意するfaviconのサイズもどんどん増加してしまっている現状です。
そこで最低限必要なfaviconサイズを調べてみました！
faviconが使われる場所とサイズを調査
まずはおなじみのブラウザのタブやお気に入りで使わます。最も使われるサイズは16×16pxと32×32pxです。そして将来的に16pxは淘汰されていく可能性がありますね。
次にWindowsでの表示です。こちらは48×48pxです。
最後はもう見て見ぬふりはできないタブレット・スマホでの表示です。これが152×152pxです。
最低限必要なfaviconサイズ
上記を踏まえて、どんな環境から見ても適したfaviconサイズを用意するには以下の4つが必要だと言えますね。
- 16×16px
- 32×32px
- 48×48px
- 152×152px
最も重要なポイントは、良質なfaviconを提供する事なのか？どんな環境から見ても不具合がない状態を提供する事なのか？という葛藤です。
もしもあなたが細かい作業に長けたWEBデザイナーで良質なfaviconを提供したいと考えるならばさらに高みを目指せます。
faviconサイズ一覧
ファビコン・カンニング・ペーパーによると…
全てに対応したいと考えた場合に必要になるファイルはこんなにもあるようです。
| ファイル名 | サイズ | 説明 |
|---|---|---|
| favicon.ico | 16×16 | IEのデフォルトで、残念ながらChromeとSafariはpngよりicoを優先します |
| favicon.ico | 32×32 | PNGファイルだけではダメで、この上記２つはiconファイル |
| favicon-32.png | 32×32 | 特定の古いかといって古過ぎもしないChromeがicoを適切に扱わないバグへの対応 |
| favicon-57.png | 57×57 | 非RetinaのiOSのホーム・スクリーン(iPod TouchやiPhoneの第一世代から3Gまで) |
| favicon-72.png | 72×72 | iPadのホーム・スクリーン・アイコン |
| favicon-96.png | 96×96 | GoogleTVのアイコン |
| favicon-120.png | 120×120 | Retina iPhoneのタッチ・アイコン(iOS 7で114×114から変更) |
| favicon-128.png | 128×128 | Chrome ウェブストアのアイコン |
| favicon-144.png | 144×144 | IE10のピン留めされたサイト向けタイル・アイコン |
| favicon-152.png | 152×152 | Retina iPadのタッチ・アイコン(iOS 7で144×144から変更) |
| favicon-195.png | 195×195 | Operaのスピード・ダイヤル・アイコン |
わかります。心の中で「うへー…」と思いましたよね。
faviconの指定方法
headタグ内に以下のコードを指定します。例ではルートにfaviconを設置している場合ですね。
<link href="favicon.ico" rel="shortcut icon">
<link href="apple-touch-icon.png" rel="apple-touch-icon">
HTMLスニペットを使用することで、異なるサイズごとに別々のアイコンを定義することができるようにサイズプロパティをサポートしています。
<link rel="icon" type="image/png" sizes="114x114" href="http://example.com/image.png" />
同様に、Appleは独自のプロパティを持って、iPadとiPhoneの両方にショートカットアイコンをサポートしています。
最近ではAndroidでも同じコードを読み込んで表示が可能になっていますので、スマホ標準とも言えます。
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon- 114x114-precomposed.png">
まとめ
faviconが指定されていないサイトは信頼性まで欠くような印象も受けられる時代になってきました。
色々な分野でWEB標準と言える動きがどんどん活発化しているので、このfaviconも世界標準のガイドラインを作ってほしいですよね。
とは言え、Retinaを凌駕するようなディスプレイが登場したらまたfaviconのようなアイコンにも大きな革命が起きてしまうのでしょうね。
今のところはfaviconの自動作成サイトも沢山あるので、制作に困ることはほとんどありませんが…
今日も知識欲は止まらない。
