ファビコンのサイズや形式についての読むと頭が痛くなる偏執的なカンニング・ペーパーです。以下のURLを参考にしました:
- rel="shortcut icon" considered harmful · Mathias Bynens <-- special thanks @mathiasbynens
- Everything you always wanted to know about touch icons · Mathias Bynens <-- special thanks @mathiasbynens
- Jonathan T. Neal | Understand the Favicon
- Favicon - Wikipedia, the free encyclopedia
- Making a Good Favicon - Snook.ca
- Create the perfect favicon | Feature | .net magazine
- Getting Android to Recognize Apple Touch Icons - Ravelrumba by Rob Flaherty
- Customizing the Site Icon (Windows)
メインになるファビコンについては各ブラウザーでの互換性を考慮して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のスピード・ダイヤル・アイコン |
| 228x228 | favicon-228.png | Opera Coastのアイコン |
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つです:
- OptiPNG:
.icoにまとめる前に.pngを最適化 - ImageMagick: 複数の
.png画像をまとめて、ひとつの.icoファイルに変換
試したわけではありませんが、以下のツールも役に立つでしょう:
- Ubuntu/Debianのパッケージである
icoutilには.pngから.icoを作成するツールが含まれています - MSDNではX-Icon Editorの利用を推奨しています
- リサイズにはFaviconerが良いでしょう
- iconもリサイズに向いたツールです
- JavaScriptを利用して動的にファビコンを変更するfavicon-setterというツールもあります
- ファイル・アップロードのプログレス表示などをファビコンで行えるpieconというツールも面白いでしょう
- Web Iconは12種類のサイズのファビコンを一気に作成してくれるシェルスクリプトです
- Icon Slate app (OS X)
- png2ico wrapper for ImageMagick
通常は必要ありません。開発中にうまくファビコンが再読み込みされずイライラする時だけ試してみましょう:
-
ブラウザーのキャッシュをクリアする(Ctrl+F5またはCtrl+Shift+R)
-
IEの場合はブラウザーを再起動する
-
それでもダメな場合は新しいタブを開くか、複雑な手順をこなす
-
一時的にマークアップを変更してクエリ文字列を追加する。必ず後で削除しましょう:
<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は置かない方が良いと思います。その理由は:
.ico形式は複数の.bmpや.pngのためのコンテナー・フォーマットです。favicon.pngを1つ定義し、favicon.icoの代わりにfavicon.pngを使うようにすると、ブラウザーのリサイズ機能にすべて任せることになり、ファビコンが違う解像度でどのように表示されるかコントロールできなくなります。例えば64x64のアイコンでは文字を表示したいが、16x16のアイコンでは読めなくなるであろうことから文字は表示したくないというようなケースにも対応できます。- HTML5仕様には
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を受け取ることになります。最悪の場合、ファビコンよりも何倍もサイズの大きいカスタム・エラー・ページを返す羽目になるかもしれません。
いいえ、私が偏執的に調べたところによるとそういった事実はまったくありません。
もし明示的に<link>タグを書かないのならばその通りです。明示的に書くのが一番確実なので、favicon.icoという名前にして明示的に<link>タグを書くようにしています。
<link>タグを書かない場合、iOSは勝手にapple-touch-iconかapple-touch-icon-precomposedが頭についたファイルを探します。HTML5 Boilerplateなど多くがこの挙動に依存しています。しかし:
- 明示的に
<link>タグを書く方がよりわかりやすく、Appleがサポートしている形です - ファイル名を
apple-touch-iconのように決め打ちしないことにより、同じサイズのアイコンの再利用性が高まります(例えばfavicon-144.pngをWindowsのピン留めされたサイトに再利用する場合など)
- iOSは編集済みでないアイコンに角丸と影・反射の特殊効果を付け加えます。一見それで良さそうですが、実際にはそううまくはいかず、特にデザイナーには納得の行くような結果にはなってくれません。
- 編集済みでないアイコンにAndroid 2.1は対応していません。
Firefoxの古いバージョンで絶対パスである必要があります。また絶対パスならば全てのブラウザーでサポートされているので、最も無難な選択でしょう。
いくつかのプロクシーやロード・バランサーでクエリ文字列の解釈に失敗するケースが確認されています。
もし他の文書の引用や根拠の提示のために追加や変更を加えたい場合はプル・リクエストを送ってください。この文書を充実させてくれることを楽しみにしています！
- OptiPNGは適切なオプションを指定しないと256色かつ透過色に減色するので、それをそのまま
.icoに含めると透過色が失われます - Markdownフォーマットの翻訳がGitHubのリポジトリにあります
- この文書も元のドキュメントのライセンスと同じくMITライセンスで提供されます
- この日本語訳について何かある場合はフィードバック・フォームよりお願いします