2021年決定版はこれ! ファビコン(favicon.ico)編
- 2021年決定版はこれ! ICOファビコン、タッチアイコン、スプラッシュ画面をきっちり押さえて圧倒的おもてなし！
- ファビコン(favicon.ico)編
- アイコン編(
"apple-touch-icon"と"icon"と"icons")編 - スプラッシュ画面(
"apple-startup-image")編
2.1 3行まとめ
favicon.icoは Internet Exproler 5からサポートする。Chrome, Safari もサポートする。favicon.icoは 16px, 24px, 36px, 48px, 64px のマルチサイズとする。favicon.icoの画像データは非圧縮なのでファイルサイズが輪をかけて大きい。よって条件付きコメントと js で IE だけに読み込ませて、他のブラウザは PNG アイコンを使用する。
2.2 マルチサイズな ICO
ICO 画像形式では、ひとつのファイルに複数のサイズの画像を格納することが出来ます。
Internet Exproler 限定にする場合、次の画像サイズが必要となっています。
Internet Exproler 用の各サイズと用途
| 縦横サイズ | 用途 |
|---|---|
| 16px | アドレスバー、タブ、またはブックマークビュー |
| 24px | Internet Explorer 9で固定されたサイト |
| 32px | Internet Explorer の新しいタブページ、Windows 7以降のタスクバーボタン |
| 48px | Windows デスクトップショートカット |
| 64px | 高解像度の Windows デスクトップショートカット |
2.3 PNGもサポートする環境でICOを避けたい理由
PNG ファビコンと ICO ファビコン、両方をサポートするブラウザに対しては PNG が適用されるようにします。これは、PNG 形式ではビットマップデータが可逆圧縮されているのに対して、ICO が非圧縮なのでファイルサイズが大きいためです。
加えて先に述べたマルチサイズな ICO の場合、更にファイルサイズが大きくなってしまいます。
条件付きコメントで IE ブラウザにだけ適用させているのは、以上の理由からです。
TODO
この他に ICO が必要なブラウザは？マルチサイズから適切に画像を選んでデスクトップショートカットにする Windows のバージョンは？
2.4 参考記事
本記事執筆の際に参考にした英文記事の一つです。オリジナルはインターネットアーカイブに収録されてます。
ファビコンについて理解する
written by jonathantneal, 2013年1月16日
Alec Rust が HTML5 Boilerplate プロジェクトに HiDPI ファビコンに切り替えるように依頼したとき、お気に入りのアイコン、タッチアイコン、タイルアイコンについてほとんど知らなかったことに気づきました。もう少し深く潜ることにしたとき、物事は面白くなりました。
1999年に Internet Explorer によって最初に導入されて以来、ファビコンについてはほとんど何も変わっていません。それらはほとんど常に ICO ファイルであり、ドメインのルートに
/favicon.icoとしてネストされているか、CMS によってテーマまたは画像ディレクトリにオーガナイズされて次のように表示されます。<link rel="shortcut icon" href="/path/to/favicon.ico">
従来の favicon.ico は16×16の ICO ファイルであり、多くの場合、16色または24ビットのアルファ透明フォーマットで提供されます。最近では、ファビコンは32×32として提供されており、すべての主要で人気のあるレガシーブラウザで適切に縮小されています。 IE10 Metro では、32×32アイコンがアドレスバーで使用されます。
ファビコンの
rel属性は、進化の産物です。 Internet Explorer 5は、shortcut iconがページとアイコンの関係を表すことを意図していましたが、仕様で関係がスペースで区切られている場合、理論的にはshortcutとiconの2つの関係が作成されました。 HTML5 仕様でiconのみが標準の識別子であると宣言されたのは2010年のことでした。 IE 以外のブラウザでは、shortcutプロパティなしでファビコンを提供できます。<!-- IE6-10 --> <link rel="shortcut icon" href="path/to/favicon.ico"> <!-- Everybody else --> <link rel="icon" href="path/to/favicon.ico">ファビコンの type 属性は、
<script>のtype属性とほぼ同じくらい便利です。 2013年1月16日の時点で、ウィキペディアはファビコンの type 属性が Internet Explorer が正しく表示するかどうかに影響を与える可能性があることを示唆しています。実際には、Internet Explorer は ICO ファイルのサーバー mime のみを考慮し、それ以外の場合は type 属性を無視します。type 属性は何でもかまいませんし、何でもありません。<!-- Still works in IE6+ --> <link rel="shortcut icon" href="path/to/favicon.ico" type="image/vnd.microsoft.icon"> <!-- Still works in IE6+ --> <link rel="shortcut icon" href="path/to/favicon.ico" type="image/x-icon"> <!-- Still works in IE6+ --> <link rel="shortcut icon" href="path/to/favicon.ico">
皆さん、朗報です！優れたブラウザは PNG ファビコンを使用できます。
悪いニュース、みんな！ Chrome と Safari はとにかく ICO ファビコンを使用します。
Chrome, Firefox, Opera 7以降、Safari 4以降はすべて PNG ファビコンを受け入れるため、これは本当に気のめいることですが、Chrome と Safari は、宣言されている順序に関係なく、両方が提供されたときに ICO ファビコンを使用することを選択します。一方、Internet Explorer は PNG ファビコンをサポートしていませんが、宣言されている順序に関係なく、PNG ファビコンを無視して ICO ファビコンを使用します。
<!-- Chrome, Safari, IE --> <link rel="shortcut icon" href="path/to/favicon.ico"> <!-- Firefox, Opera (Chrome and Safari say thanks but no thanks) --> <link rel="icon" href="path/to/favicon.png">PNG ファビコンファイルには ICO ファビコンのような複数の解像度が含まれていないため、いくつかのファビコン宣言を書き出し、sizes 属性を使用して各解像度をターゲットにすることができます。
<link rel="icon" href="favicon-16.png" sizes="16x16"> <link rel="icon" href="favicon-32.png" sizes="32x32"> <link rel="icon" href="favicon-48.png" sizes="48x48"> <link rel="icon" href="favicon-64.png" sizes="64x64"> <link rel="icon" href="favicon-128.png" sizes="128x128">これらの PNG ファビコン互換ブラウザは、どのファビコンを使用するかをどのように決定しますか？Firefox と Safari は、最後に来るファビコンを使用します。Chrome for Mac は、ICO 形式のファビコンを使用します。それ以外の場合は32×32ファビコンを使用します。 Chrome for Windows は、16×16の場合は最初に記述されるファビコンを使用し、それ以外の場合は ICO を使用します。前述のオプションのいずれも使用できない場合、両方の Chrome は、Firefox や Safari とは正反対に、最初に記述されるファビコンを使用します。実際、Chrome for Mac は16×16ファビコンを無視し、Retina 以外のデバイスで16×16に縮小する場合にのみ32×32バージョンを使用します。Opera は、一方に加担したくないので、利用可能なアイコンから完全にランダムに選択します。私はこの Opera の挙動が大好きです。
そして、ここ迄は序章に過ぎません。次に、Internet Explorer の警告について学習します。
IEはトロールになる可能性があります。IE8-10 はページの最初の読み込み時にファビコンを表示しますが、IE7 は最初の読み込みをスキップし、繰り返しアクセスするときにファビコンを表示します。さらに悪いことに、IE6 は、サイトがブックマークされてブラウザーで再度開かれた場合にのみファビコンを表示します。 IE6 は、ブラウザのキャッシュがクリアされるたびにファビコンをドロップし、サイトが再ブックマークされるか、ファビコンが何らかの方法で再ロードされるまで、ファビコンを再度表示しません。 IE6 とファビコンがあなたにとって大きな意味を持つ場合は、できれば条件付きコメントでラップした小さな JavaScript スニペットを使用してこのリロードを強制できます。
<!-- I "support" IE6 --> <!--[if IE 6]><script>(new Image).src="path/to/favicon.ico"</script><![endif]-->
HiDPI に戻って、この自問を既にしましたか？
すべての優れたブラウザが PNG ファビコンをサポートし、IE が ICO ファビコンを必要としているが、ICO ファビコンが Chrome と Safari を振り落とす場合、IE 条件付きコメントで ICO ファビコンをラップしてみませんか？
それは素晴らしい質問であり、それは素晴らしいアイデアにつながります。 PNG ファイルは ICO ファイルの数分の1のサイズです。クラシックな32×32 ICO ファビコンを IE に提供し、非常に洗練された96×96 PNG ファビコンを他のすべての人に提供できます。
<!-- Just IE? --> <!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]--> <!-- Everybody else? --> <link rel="icon" href="path/to/favicon.png">ある大問題。IE10 は条件付きコメントをサポートしておらず、PNG ファビコンもサポートしていません。はい、上記のコードを使用すると、レガシー IE は Microsoft の最も優れたフラッグシップよりも優れたエクスペリエンスを得ることができます。
ねえ、ねえ、ルートディレクトリに ICO ファビコンを貼り付け、
<link rel="icon">を使用して PNG ファビコンを割り当てるとどうなりますか？君は。勝つ。インターネット！ Chrome, Safari, IE の制限を考えると、この方法はすべてのブラウザに最高のファビコンエクスペリエンスを提供します。 IEは
<link rel="icon">を無視し、ドメインのルートにある ICO ファビコンを/favicon.icoとして使用します。他のすべてのブラウザは、次のように表示される PNG ファビコンを使用します。<link rel="icon" href="path/to/favicon.png">しかし、複数のファビコンが必要な場合、または CMS がこの方法を好まない場合はどうなりますか？…別の方法はありますか？
ええ、でもあなたはそれを気に入らないでしょう。
<!-- I "support" IE --> <script> navigator.appName == "Microsoft Internet Explorer" && (function (i, d, s, l) { i.src = "favicon.ico"; s = d.getElementsByTagName("script")[0]; l = s.parentNode.insertBefore(d.createElement("link"), s); l.rel = "shortcut icon"; l.href = i.src; })(new Image, document); </script> <!-- Everybody else --> <link rel="icon" href="path/to/favicon.png">どちらの解決策にも満足していませんか？すべてが失われるわけではありません。IE10 ユーザーは今のところほとんどが Windows8 ユーザーであり、Windows8 では Web サイト用の新しい種類の表示アイコンであるタイルアイコンが導入されています。
IE10 Metro を使用すると、訪問者がサイトをスタート画面に固定したときに、一意のタイルアイコンを表示できます。これらのタイルアイコンは144×144の PNG ファイルであり、最良の結果を得るには、透明な背景を使用します。背景タイルの色は、16進RGB色（6文字の #RRGGBB 表記を使用）、CSS 色名、または CSS rgb（）関数を使用して指定できます。マークアップは非常に簡単です。
<meta name="msapplication-TileColor" content="#D83434"> <meta name="msapplication-TileImage" content="path/to/tileicon.png">では、IE10 の潜在的な制限を受け入れ、他のすべての正常な部分を維持しながら、すべてをまとめましょう。
<link rel="apple-touch-icon" href="path/to/touchicon.png"> <link rel="icon" href="path/to/favicon.png"> <!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]--> <!-- or, set /favicon.ico for IE10 win --> <meta name="msapplication-TileColor" content="#D83434"> <meta name="msapplication-TileImage" content="path/to/tileicon.png">少なくとも、これが最初の一歩です。
ファビコンの作成について詳しく知りたい場合は、Jon Hicks の『The Icon Handbook』から完璧なファビコンを作成し、Jonathan Snook による『Making a good favicon』をお勧めします。また、タイルアイコンについて教えてくれた @alrra に感謝します。
待って、私はタッチアイコンのためにここに来ました。
タッチアイコンの埋め込みについて詳しく知りたい場合は、Mathias Bynens の『タッチアイコンについて常に知りたいことのすべて』をお読みください。または、彼の記事のこの要約に従ってください。
高解像度のアイコンを1つだけ作成することは完全に可能です。ディスプレイの解像度を低くすると、アイコンのサイズが自動的に変更されます。欠点は、サイトがホーム画面に追加されるたびに、パフォーマンスに悪影響を与えることです。
2013年3月の時点で、サイトがホーム画面に追加されたときに怠惰でパフォーマンスをあまり気にしない場合は152×152のアイコンを1つだけ使用してください。
そして、そのアイコンのマークアップは次のとおりです。
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-152x152-precomposed.png">すべての BlackBerry ~ Android ~ iOS(7) の夢が叶いますように。
