Translation of: favicon-cheat-sheet
ファビコンのサイズや形式についての読むと頭が痛くなる偏執的なカンニング・ペーパーです。以下のURLを参考にしました:
メインになるファビコンについては各ブラウザーでの互換性を考慮してHTMLでは特に指定しないのが望ましいです。単にfavicon.icoという名前でドメインのルートに配置するだけで構いません。
こうするとIE6も含めすべてのデスクトップ向けブラウザー(SeaMonkey以外)のあらゆるバージョンでうまくいきます。
以下のコードは指定しておくと良いかもしれません:
iOS 2.0以降とAndroid 2.1以降向けのタッチ・アイコン:
<link rel="apple-touch-icon-precomposed" href="path/to/favicon-152.png">IE10のMetroタイル・アイコン(Metroにおけるタッチ・アイコンのようなもの):
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/path/to/favicon-144.png">あなたの好きな色で#FFFFFFは置き換えましょう。
ありとあらゆるものをカバーしたいのならば以下のようにすることになります:
Appleの各デバイス向けタッチ・アイコンの全サイズ:
<!-- For iPad with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/path/to/favicon-152.png">
<!-- For iPad with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/path/to/favicon-144.png">
<!-- For iPhone with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/path/to/favicon-120.png">
<!-- For iPhone with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/path/to/favicon-114.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/path/to/favicon-72.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="/path/to/favicon-57.png">上記でカバーできないサイズ:
<link rel="icon" href="/path/to/favicon-32.png" sizes="32x32">訳注: 必要なサイズで作成し、sizes属性を使ってそのサイズを教えてやるということです。
最低でも以下のものは作りましょう:
| サイズ | ファイル名 | 目的 |
|---|---|---|
| 16x16 & 32x32 | favicon.ico | IEのデフォルトで、残念ながらChromeとSafariはpngよりicoを優先します |
favicon.icoについて詳しくは後述しますが、ひとつのファイルで複数のサイズをまかなえます。
iOSやAndroidへ簡単に対応したい場合は以下のサイズで作成します:
| サイズ | ファイル名 | 目的 |
|---|---|---|
| 152x152 | favicon-152.png | iOSやAndroidで使われ、デバイス側で適切に縮小されます |
しかしながら複雑なアイコンの場合、デバイスによる縮小がきれいに行われないことがあることは頭に入れておいた方が良いでしょう。きれいに縮小されるように細かい修正を行う必要があるかもしれません。
偏執狂のあなたは以下のサイズも作りましょう:
| サイズ | ファイル名 | 目的 |
|---|---|---|
| 32x32 | favicon-32.png | 特定の古いかといって古過ぎもしないChromeがicoを適切に扱わないバグへの対応 |
| 57x57 | favicon-57.png | 非RetinaのiOSのホーム・スクリーン(iPod TouchやiPhoneの第一世代から3Gまで) |
| 72x72 | favicon-72.png | iPadのホーム・スクリーン・アイコン |
| 96x96 | favicon-96.png | GoogleTVのアイコン |
| 120x120 | favicon-120.png | Retina iPhoneのタッチ・アイコン(iOS 7で114x114から変更) |
| 128x128 | favicon-128.png | Chrome ウェブストアのアイコン |
| 144x144 | favicon-144.png | IE10のピン留めされたサイト向けタイル・アイコン |
| 152x152 | favicon-152.png | Retina iPadのタッチ・アイコン(iOS 7で144x144から変更) |
| 195x195 | favicon-195.png | Operaのスピード・ダイヤル・アイコン |
icoファイルはサイズの違う.bmpや.pngのアイコンを複数まとめることができるフォーマットです。favicon.icoでは以下のサイズを作れば十分でしょう:
| サイズ | 目的 |
|---|---|
| 16x16 | IE9のアドレス・バーやピン留めされたサイト、ジャンプ・リスト、お気に入りツールバー、新しいタブのサムネイルのオーバーレイ |
| 32x32 | IEの新しいタブやWidows 7以降のタスクバー・ボタン、Safariのリーディング・リストのサイドバー |
| 48x48 | Windowsサイト・アイコン |
偏執狂のあなたは、1-3KBのファイルサイズの増加を気にしないのなら、以下のサイズもfavicon.icoに含めると良いでしょう:
| サイズ | 目的 |
|---|---|
| 24x24 | IE9のピン留めされたサイトでブラウザー・ウィンドウに表示されるアイコン |
| 64x64 | 高解像度デバイスでのWindowsサイト・アイコンやSafariのリーディング・リストのサイドバー |
まずきっちりと.pngを作り、それを元にして.icoを作成しましょう。
TODO: IE9以降で.pngを.icoに含められることについての確認(Issue #9)
オススメなのは以下の2つです:
.icoにまとめる前に.pngを最適化ImageMagick: 複数の.png画像をまとめて、ひとつの.icoファイルに変換
$ convert favicon-16.png favicon-32.png favicon.ico
試したわけではありませんが、以下のツールも役に立つでしょう:
icoutilには.pngから.icoを作成するツールが含まれています通常は必要ありません。開発中にうまくファビコンが再読み込みされずイライラする時だけ試してみましょう:
一時的にマークアップを変更してクエリ文字列を追加する。必ず後で削除しましょう:
<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2">
<link rel="icon" sizes="16x16 32x32" href="/favicon.ico?v=2">大きな変更を加えたバージョンの公開時には全ての訪問者のファビコンを強制的に再読み込みさせたいこともあるでしょう:
以下のようなマークアップ(sizes属性の変更を忘れずに)を加えて、バージョン番号をファイル名に入れるようにしましょう:
<link rel="shortcut icon" href="/favicon-v2.ico">
<link rel="icon" sizes="16x16 32x32" href="/favicon-v2.ico">TODO: このマークアップがうまくいかないケースのさらなる調査(Issue #3).
favicon.icoとfavicon.pngの両方がルートにあるとどうなりますか？favicon.icoのみを設置し、favicon.pngは置かない方が良いと思います。その理由は:
.ico形式は複数の.bmpや.pngのためのコンテナー・フォーマットです。favicon.pngを1つ定義し、favicon.icoの代わりにfavicon.pngを使うようにすると、ブラウザーのリサイズ機能にすべて任せることになり、ファビコンが違う解像度でどのように表示されるかコントロールできなくなります。例えば64x64のアイコンでは文字を表示したいが、16x16のアイコンでは読めなくなるであろうことから文字は表示したくないというようなケースにも対応できます。favicon.icoについては出てきますが、favicon.pngについては出てきません。現在のHTML仕様によると:'In the absence of a link with the icon keyword, for Documents obtained over HTTP or HTTPS, user agents may instead attempt to fetch and use an icon with the absolute URL obtained by resolving the URL "/favicon.ico" against the document's address, as if the page had declared that icon using the icon keyword.'
このことについて詳しくは似たような質問に対してのStackOverflowでの答えを参照すると良いでしょう(注: アルファ・チャンネルという点での優位性を説明した答えは間違っているので、2つ目の答えを読んでください)。
いいえ、それはブラウザーやデバイスごとにファビコンのパスを指定した<link>タグを明示的に書かなかった場合に限った話です。WikipediaのFavicon.ico記事も参照してください。
もしfavicon.icoをルートに置いていないなら、置くかHTTPステータス・コードで204を返すようにしましょう。多くのツールやサービス(ブックマークやフィード・リーダー、検索エンジンのクローラーなど)がルートにfavicon.icoがあるとしてリクエストしてきますが、もし無いとHTTPステータス・コードとして404を受け取ることになります。最悪の場合、ファビコンよりも何倍もサイズの大きいカスタム・エラー・ページを返す羽目になるかもしれません。
favicon.pngという名前にする必要があるというのは本当ですか？いいえ、僕が偏執的に調べたところによるとそういった事実はまったくありません。
favicon.icoという名前にする必要があるというのは本当ですか？もし明示的に<link>タグを書かないのならばその通りです。明示的に書くのが一番確実なので、favicon.icoという名前にして明示的に<link>タグを書くようにしています。
<link>タグを書かない場合、iOSは勝手にapple-touch-iconかapple-touch-icon-precomposedが頭についたファイルを探します。HTML5 Boilerplateなど多くがこの挙動に依存しています。しかし:
<link>タグを書く方がよりわかりやすく、Appleがサポートしている形ですapple-touch-iconのように決め打ちしないことにより、同じサイズのアイコンの再利用性が高まります(例えばfavicon-144.pngをWindowsのピン留めされたサイトに再利用する場合など)Firefoxの古いバージョンで絶対パスである必要があります。また絶対パスならば全てのブラウザーでサポートされているので、最も無難な選択でしょう。
いくつかのプロクシーやロード・バランサーでクエリ文字列の解釈に失敗するケースが確認されています。
もし他の文書の引用や根拠の提示のために追加や変更を加えたい場合はプル・リクエストを送ってください。この文書を充実させてくれることを楽しみにしています！
.icoに含めると透過色が失われます