web-dev-qa-db-ja.com

HTML 5 Favicon - サポート？

私はウィキペディアのFaviconのページを読んでいました。彼らは、FaviconのHTML 5仕様に言及しています。

現在のHTML 5仕様では、タグ内で属性rel = "icon" sizes = "スペース区切りのアイコン寸法のリスト"を使用して、サイズアイコンを複数のサイズで指定することを推奨しています。 [ source ] 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がHTML5メソッドよりもApple-touch-iconメタタグメソッドを使っていることを知っています。

ウィキペディアの記事はこう主張しています：

ただし、Google Chromeウェブブラウザは、ユーザーが[ツール]メニューの[アプリケーションショートカットの作成...]を選択すると、HTMLヘッダーで提供されているものから最も近いサイズを選択して、128×128ピクセルのアプリケーションアイコンを作成します。

Internet Explorer（v9からv11）とFirefoxはこれをどのように処理しますか？そして記事はChromeがHTML Faviconsをどのように扱うかについて正しいですか？ （Chromeがこれを確認するための引用元はありません。）

検索の際、私はHTML 5 FaviconにWikipedia Article以外の（信頼できる）情報を本当に見つけることができませんでした。

html5browserfavicon
159
L84

この記事の執筆時点で提供されている回答はリンクのみの回答なので、リンクを1つの回答に要約して、これから使用するものにすると思いました。

Cross Browser Favicons（タッチアイコンを含む）を作成する作業をするときに考慮すべきことがいくつかあります。

最初の（もちろん）Internet Explorerです。 IEはバージョン11までPNGのfaviconをサポートしていません。そのため、最初の行はIE 9以下のfaviconの条件付きコメントです。

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

アイコンの用途をカバーするには、32 x 32ピクセルで作成してください。アイコンを認識するためのIEのrel="shortcut icon"には、標準ではないWordのshortcutが必要です。また、.icoファビコンをIE条件付きコメントで囲んでいます。なぜなら、ChromeとSafariは、.icoファイルが存在すればそれを使用するからです。

上記はIEからIE 9までをカバーしています。IE 11はPNGのファビコンを受け入れますが、IE 10は受け入れません。また、IE 10は条件付きコメントを読み取らないため、IE 10はfaviconを表示しません。 IE 11とEdgeが使用可能なので、IE 10が広く使用されているとは思われないので、このブラウザは無視します。

その他のブラウザでは、ファビコンを引用するために標準的な方法を使用します。

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

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

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

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

rel="Apple-touch-icon-precomposed"を使用しても、iOSでブックマークを付けたときに反射光は適用されません。 iOSに輝きを適用させるにはrel="Apple-touch-icon"を使います。このアイコンは、最新のiPhoneおよびiPad用にAppleが推奨する現在のサイズであるため、180 x 180ピクセルのサイズにする必要があります。私はBlackberryもrel="Apple-touch-icon-precomposed"を使うことを読んだことがあります。

注：Chrome for Androidは次のように述べています。

Apple-touch- *は廃止予定であり、しばらくの間サポートされる予定です。 （Chromeのm31用のベータ版として書かれています）。

Windows 8.1上のIE 11+のカスタムタイル+

Windows 8.1以降のIE 11以降では、サイト用の固定タイルを作成することができます。

マイクロソフトは、次のサイズでいくつかのタイルを作成することをお勧めします。

小：128×128

中：270×270

ワイド：558×270

大：558 x 558

次に色の背景を定義するので、これらは透明な画像であるべきです。

これらの画像が作成されたら、次のコードを使用してbrowserconfig.xmlという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ファイルに別の名前を付けたい場合、または別の場所に保存したい場合は、このメタタグをheadに追加します。

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

IE 11+カスタムタイルおよびXMLファイルの使用方法の詳細については、{ MicrosoftのWebサイトを参照 を参照してください。

まとめると、

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

<!-- 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ライブタイル

ユーザーがWindows Phoneを使用している場合は、Webサイトを自分の携帯電話の開始画面に固定できます。残念ながら、これを実行すると、ファビコンではなく（上で参照したMS固有のコードでもなく）、携帯電話のスクリーンショットが表示されます。あなたのウェブサイトにWindows Phoneユーザー用の「ライブタイル」を作成するには、次のコードを使用する必要があります。

これはマイクロソフトからの詳細な説明です しかしここに概要があります：

ステップ1

高解像度スクリーンをサポートするためにあなたのウェブサイトのための正方形の画像を作成してサイズが768 x 768ピクセルでそれを作成します。

ステップ2

この画像の隠されたオーバーレイを追加してください。これがMicrosoftのコード例です。

<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を追加して複数のサイズを指定できますが、 TinyPNG を使用してすでにPNGファイルを頻繁に圧縮しているため、これは不要です。また、 philippe_b の answer によると、ChromeとFirefoxには、ブラウザにすべてのサイズのアイコンをロードさせるバグがあります。このため、1つの大きなアイコンを使用すると、複数の小さなアイコンよりも優れている場合があります。

さらに読む

詳細を知りたい方は、以下のリンクをご覧ください。

312
L84

いいえ、すべてのブラウザがsizes属性をサポートしているわけではありません。

プラットフォームによっては特定のサイズが定義されていることに注意してください。

14
philippe_b