faviconのサイズ

2016/7/5 デザイン

ファビコン

基本

優先度 サイズ ファイル名例 用途
〇 16px favicon.ico 基本で必須。

  • Win：IEのタブ、アドレスバー、ジャンプリスト、お気に入り。
  • Win、Mac：Chrome、Firefoxのタブ。
  • Mac：Safariの履歴。
△ 24px favicon.ico
  • Win：IE9のピン止めサイトのブラウザウィンドウ。
〇 32px favicon.ico 高解像度デバイス向け。

  • Win：IEのタブ。
  • Win、Mac：Chrome、Firefoxのタブ。
  • Win7以降のタスクバーボタン。
  • Mac：Safariの履歴。
〇 48px favicon.ico
  • Win：サイトアイコン。
△ 64px favicon.ico 高解像度デバイス向け。

  • Win：サイトアイコン。
  • Safariの履歴。
△ 152px favicon.ico
  • Win8：IEのピン止め。

上記大きさのファイルをマルチアイコンにする。

iOSやAndroid向け

優先度 サイズ ファイル名例 用途
32px favicon-32.png Chromeがicoを適切に扱わないバグへの対応用。
57px favicon-57.png 非RetinaのiOSのホーム・スクリーン。
72px favicon-72.png iPadのホーム・スクリーン・アイコン。
96px favicon-96.png GoogleTVのアイコン。
120px favicon-120.png Retina iPhoneのタッチ・アイコン(iOS 7で114×114から変更)。
128px favicon-128.png Chrome ウェブストアのアイコン。
144px favicon-144.png IE10のピン留めされたサイト向けタイル・アイコン。
〇 152px favicon-152.png iOSやAndroidで使われる基本。デバイス側で自動で縮小してくれる。

  • iOS：Safariのホーム画面。
  • Android：Chrome、ブラウザの一部のタブやホーム画面。
  • Mac：Safariのお気に入り。
195px favicon-195.png Operaのスピード・ダイヤル・アイコン。

色々大きさがあるけど基本的には大きさを自動調整してくれるので、152pxのファイルを「apple-touch-icon.png」にリネームして使用すれば良いと思う。

apple-touch-icon-precomposed.pngというものもある。
「precomposed」がついて無いファイルの場合は勝手にハイライトや影がついたりする。
基本的にはこっちを使った方が(意図通りになるから)良いかもと思った。

設置

ファビコン、アップルタッチアイコンの設置はhead内に以下を記述する。
※ファイルがルートにある場合。