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の自動作成サイトも沢山あるので、制作に困ることはほとんどありませんが…

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

関連トピック

Hidden

見られたくないフォルダ&ドライブや外付けHDDをロックする方法

他人に見られたくないフォルダ。他人に見られたくないDドライブ。そして他人に見られたくない外付けHDDって誰にでもありますよね。 いや、

Sleep

Windowsが自動でスリープ移行できない時に原因を特定する方法

ある日「指定時間が経過してもWindowsがスリープしない」という不具合に気付いてしまったあなた。そして俺。 スリープしない理由は、何

OpenOffice

OpenOfficeのCalcなどでパスワードを設定する方法

Openofficeでパスワード付きのファイルを作成したいと思った時はありませんか? セキュリティが見直される中で、こういった小さな努

People

喜怒哀楽のパワーで人を感動させるバイラルメディアの拡散力がスゴい

バイラルメディアなんて言葉が世間を賑わせています!右も左もバイラルだらけ!隣のあの子もバイラル大好き! 自分だけで楽しむよりも誰かと感

xampp_portable_iretemita

SDカードに「XAMPP Portable」をインストールしてPHP開発環境ゲット!

PHP開発環境として何年かぶりにXAMPPの導入を決めたんですが、XAMPPの開発環境自体をクラウドで同期できないかというトリッキーな方

win10-gestures

AutohotkeyでWindows10の新しいタッチパッドジェスチャーをVAIO PROで実現してみた!

前回「「VAIO Pro 13」を「Windows10」にアップグレードしてみた」でWindows10のジェスチャーが使えないよーという

aviate-style-wallpaper-top

米Yahoo!「Aviate Launcher」に惚れたから壁紙を自作してみた

一般向けに「Aviate Launcher」がGoogle Playに公開されて早速利用してみたら、まるで別のスマホを使っているようなU

firefox

Firefox 「XML パースエラー: 整形式になっていません」 強制表示

Firefoxでモバイルサイトなどで「XML パースエラー: 整形式になっていません」というエラーで閲覧できない場合の強制表示方法メモ

公開日:2013/04/11