[解決済み] HTML 5 Favicon - サポートは？

質問

WikipediaのFaviconのページを読んでいました。彼らはFaviconのためのHTML 5仕様に言及しています。

<ブロッククオート

現在のHTML5仕様では、タグ内にrel="icon" sizes="space-separated list of icon dimensions"という属性を用いて、複数のサイズのアイコンを指定することを推奨しています。[ ソース ] Microsoft .ico や Macintosh .icns ファイルなどのコンテナ形式や、Scalable Vector Graphics など、複数のアイコン形式がありますが、タグ内に type="file content-type" という形式でアイコンのコンテンツタイプを含めることで提供することができます。

引用された記事（W3）を見ると、このような例が示されています。

<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">

質問は、HTML 5方式をサポートしているブラウザがあるかということです。

注：Appleが同社の apple-touch-icon メタタグの方式をHTML5の方式に置き換えたものです。

wikipediaの記事の主張です。

ただし、Google Chromeでは、メニューの「ツール」から「アプリケーションのショートカットを作成」を選択すると、HTMLヘッダーに記載されているサイズのうち最も近いものが選択され、128×128ピクセルのアプリアイコンが作成されます。

Internet Explorer (v9 to v11) と Firefox はどのように対処していますか？また、ChromeがHTML Faviconsをどのように扱っているか、記事は正しいですか？(Chromeについては、これを確認するソースが引用されていません)。

Wikipediaの記事以外では、HTML 5 Faviconに関する（信頼できる）情報を見つけることができませんでした。

どのように解決するのですか？

提供されている回答（この投稿時点）はリンクのみの回答なので、リンク先を回答にまとめ、私が使うものを考えてみました。

クロスブラウザのファビコン（タッチアイコンを含む）を作成する作業では、考慮すべき点がいくつかあります。

まず（当たり前ですが）、Internet Explorerです。IEはバージョン11までPNGファビコンをサポートしていません。そのため、最初の行はIE 9以下のファビコン用の条件付きコメントになっています。

<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

アイコンの用途をカバーするために、32x32ピクセルで作成します。また rel="shortcut icon" IEがアイコンを認識するためには、この単語が必要です。 shortcut これは標準ではありません。また .ico のファビコンをIEの条件付きコメントで指定します。これは、ChromeやSafariでは .ico が存在する場合、他の選択肢があるにもかかわらず、私たちが望むようなものではありません。

上記はIE9までのIEを対象としています。IE 11 は PNG ファビコンを受け付けますが、IE 10 は受け付けません。また、IE10は条件付きコメントを読み込まないため、ファビコンが表示されない。IE 11 と Edge が利用できるようになった今、IE 10 が広く使われることはないと思うので、私はこのブラウザを無視しています。

その他のブラウザについては、ファビコンを引用する標準的な方法を使用する予定です。

<link rel="icon" href="path/to/favicon.png">

このアイコンは、このアイコンを使用する可能性のあるすべてのデバイスをカバーするために、196x196ピクセルのサイズである必要があります。

モバイル端末のタッチアイコンをカバーするために、Apple独自のタッチアイコンの引用方法を使用します。

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

使用方法 rel="apple-touch-icon-precomposed" は、iOSでブックマークされた場合、反射する輝きを適用しません。iOSで光沢を適用させるには rel="apple-touch-icon" . このアイコンは、Appleが最新のiPhoneやiPadで推奨するサイズである180x180ピクセルにする必要があります。Blackberryでは rel="apple-touch-icon-precomposed" .

追記：Android版Chromeの状態です。

アップルタッチ-*は非推奨で、短期間のみサポートされます。(Chromeのm31のベータ版の時点の記述)。

Windows 8.1+でIE 11+のためのカスタムタイル

Windows 8.1+ の IE 11+ では、サイトのピン留めタイルを作成する方法があります。

マイクロソフトでは、以下のサイズで数枚のタイルを作成することを推奨しています。

<ブロッククオート

小：128×128

中型：270×270

ワイド：558×270

大 558 x 558

次に背景色を定義するので、これらは透明な画像である必要があります。

これらのイメージを作成したら、次のようなxmlファイルを作成します。 browserconfig.xml を以下のコードで記述してください。

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/smalltile.png"/>
      <square150x150logo src="images/mediumtile.png"/>
      <wide310x150logo src="images/widetile.png"/>
      <square310x310logo src="images/largetile.png"/>
      <TileColor>#009900</TileColor>
    </tile>
  </msapplication>
</browserconfig>

このxmlファイルをサイトのルートに保存してください。サイトが固定されると、IE はこのファイルを探します。xml ファイルに別の名前をつけたり、別の場所に置いたりする場合は、次の meta タグを head :

<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />

IE 11+のカスタムタイルとXMLファイルの使用に関する追加情報はこちら マイクロソフトのウェブサイトを見る .

まとめること

上記のコードをまとめると、次のようになります。

<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. --> 
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">

Windows Phone Live Tiles

Windows Phoneを使用しているユーザーは、Webサイトを携帯電話のスタート画面に固定することができます。残念ながら、この操作を行うと、ファビコンではなく、携帯電話のスクリーンショットが表示されます（上記で言及した MS 固有のコードも表示されません）。Windows Phone ユーザー向けのライブタイルを作成するには、次のコードを使用する必要があります。

マイクロソフトの詳しい説明はこちら が、ここではその概要を説明します。

ステップ1

高解像度画面に対応するため、768x768ピクセルの正方形の画像を作成します。

ステップ2

この画像の非表示オーバーレイを追加します。以下は、マイクロソフトによるコード例です。

<div id="TileOverlay" onclick="ToggleTileOverlay()" style='background-color: Highlight; height: 100%; width: 100%; top: 0px; left: 0px; position: fixed; color: black; visibility: hidden'>
  <img src="customtile.png" width="320" height="320" />
  <div style='margin-top: 40px'>
     Add text/graphic asking user to pin to start using the menu...
  </div>
</div>

ステップ3

次の行を追加すると、リンクを開始するためのピンが追加されます。

<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>

マイクロソフトでは、Windows Phoneを検出し、そのユーザーにのみリンクを表示することを推奨しています。

ステップ4

次に、オーバーレイの可視性を切り替えるためのJSを追加します。

<script>
function ToggleTileOverlay() {
 var newVisibility =     (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
 document.getElementById('TileOverlay').style.visibility =    newVisibility;
}
</script>

サイズに関する注意事項

どのブラウザも必要に応じて画像を縮小するので、私は1つのサイズを使っています。帯域幅が狭い人のために、もっとHTMLを追加して複数のサイズを指定することもできますが、PNGファイルはすでに タイニーPNG これは私の目的には必要ないと考えています。また フィリッペ・ビー 's 回答 ChromeとFirefoxには、ブラウザがすべてのサイズのアイコンを読み込むバグがあります。このため、複数の小さなアイコンを使用するよりも、1つの大きなアイコンを使用した方が良い場合があります。

その他の情報

より詳細な情報をお知りになりたい方は、以下のリンクをご覧ください。

• ウィキペディアのファビコンに関する記事
• アイコンハンドブック
• ファビコンを理解する ジョナサン・T・ニール著
• rel="ショートカットアイコン"は有害と見なされます。 by Mathias Bynens
• タッチアイコンについて知りたいことのすべて by Mathias Bynens