ファビコン・カンニング・ペーパー

Translation of: favicon-cheat-sheet

ファビコンのサイズや形式についての読むと頭が痛くなる偏執的なカンニング・ペーパーです。以下のURLを参考にしました:

HTMLでのマークアップ

基本

メインになるファビコンについては各ブラウザーでの互換性を考慮してHTMLでは特に指定しないのが望ましいです。単にfavicon.icoという名前でドメインのルートに配置するだけで構いません。

こうするとIE6も含めすべてのデスクトップ向けブラウザー(SeaMonkey以外)のあらゆるバージョンでうまくいきます。

推奨

以下のコードは指定しておくと良いかもしれません:

  1. iOS 2.0以降とAndroid 2.1以降向けのタッチ・アイコン:

    <link rel="apple-touch-icon-precomposed" href="path/to/favicon-152.png">

  2. IE10のMetroタイル・アイコン(Metroにおけるタッチ・アイコンのようなもの):

    <meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/path/to/favicon-144.png">

    あなたの好きな色で#FFFFFFは置き換えましょう。

任意(偏執的な方だけどうぞ)

ありとあらゆるものをカバーしたいのならば以下のようにすることになります:

  1. 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">

  2. 上記でカバーできないサイズ:

    <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ファイル

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つです:

  1. OptiPNG: .icoにまとめる前に.pngを最適化

  2. ImageMagick: 複数の.png画像をまとめて、ひとつの.icoファイルに変換

    $ convert favicon-16.png favicon-32.png favicon.ico

試したわけではありませんが、以下のツールも役に立つでしょう:

ファビコンの強制的な再読み込み

通常は必要ありません。開発中にうまくファビコンが再読み込みされずイライラする時だけ試してみましょう:

大きな変更を加えたバージョンの公開時には全ての訪問者のファビコンを強制的に再読み込みさせたいこともあるでしょう:

よくある質問

favicon.icoとfavicon.pngの両方がルートにあるとどうなりますか？

favicon.icoのみを設置し、favicon.pngは置かない方が良いと思います。その理由は:

このことについて詳しくは似たような質問に対してのStackOverflowでの答えを参照すると良いでしょう(注: アルファ・チャンネルという点での優位性を説明した答えは間違っているので、2つ目の答えを読んでください)。

ファビコンはルートに置くべきというのは本当ですか？

いいえ、それはブラウザーやデバイスごとにファビコンのパスを指定した<link>タグを明示的に書かなかった場合に限った話です。WikipediaのFavicon.ico記事も参照してください。

もしfavicon.icoをルートに置いていないなら、置くかHTTPステータス・コードで204を返すようにしましょう。多くのツールやサービス(ブックマークやフィード・リーダー、検索エンジンのクローラーなど)がルートにfavicon.icoがあるとしてリクエストしてきますが、もし無いとHTTPステータス・コードとして404を受け取ることになります。最悪の場合、ファビコンよりも何倍もサイズの大きいカスタム・エラー・ページを返す羽目になるかもしれません。

PNGの場合はfavicon.pngという名前にする必要があるというのは本当ですか？

いいえ、僕が偏執的に調べたところによるとそういった事実はまったくありません。

ICOの場合はfavicon.icoという名前にする必要があるというのは本当ですか？

もし明示的に<link>タグを書かないのならばその通りです。明示的に書くのが一番確実なので、favicon.icoという名前にして明示的に<link>タグを書くようにしています。

なぜ"apple-touch-icon"を頭に付けないのですか？

<link>タグを書かない場合、iOSは勝手にapple-touch-iconかapple-touch-icon-precomposedが頭についたファイルを探します。HTML5 Boilerplateなど多くがこの挙動に依存しています。しかし:

なぜiOS向けに編集済みアイコン(precomposed icon)を指定するのですか？

なぜ絶対パスを使うのですか？

Firefoxの古いバージョンで絶対パスである必要があります。また絶対パスならば全てのブラウザーでサポートされているので、最も無難な選択でしょう。

なぜクエリ文字列を追加して全ての訪問者に強制的に再読み込みさせないのですか？

いくつかのプロクシーやロード・バランサーでクエリ文字列の解釈に失敗するケースが確認されています。

是非、寄稿を！

もし他の文書の引用や根拠の提示のために追加や変更を加えたい場合はプル・リクエストを送ってください。この文書を充実させてくれることを楽しみにしています！

訳注