faviconサイズで最低限用意するべきサイズとは?

favicon
faviconのサイズは主に16×16が使用されていました。そう今までは。サイトの最も目立つ判別に役立つデザインなので手を抜くわけにはいきません。
そんなfaviconが、どんどん進化してきて様々な部分で利用されることが増えてきてしまいました。すると、用意するfaviconのサイズもどんどん増加してしまっている現状です。
そこで最低限必要なfaviconサイズを調べてみました!

SPONSORED LINK

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ファイルだけではダメで、この上記2つは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の自動作成サイトも沢山あるので、制作に困ることはほとんどありませんが…

今日も知識欲は止まらない。

SPONSORED LINK
トップへ戻る