（この投稿の時点で）提供された回答はリンクのみの回答であるため、リンクを回答に要約し、何を使用するかを考えました。
クロスブラウザファビコン（タッチアイコンを含む）の作成に取り組む場合、いくつかの考慮事項があります。
最初の（もちろん）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ファイルが存在する場合、それを使用しますが、希望するものではなく、他のオプションが利用できるからです。
上記はIE 9までのIEをカバーしています。IE11はPNGファビコンを受け入れますが、IE 10は受け入れません。また、IE 10は条件付きコメントを読み取らないため、IE 10はファビコンを表示しません。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にshineを適用させるには、を使用しますrel="apple-touch-icon"。このアイコンのサイズは180x180ピクセルにする必要があります。これは、Appleが最新のiPhoneおよびiPadに推奨する現在のサイズであるためです。私はブラックベリーも使用することを読んだrel="apple-touch-icon-precomposed"。
注：Android版Chromeには次のように記載されています。
apple-touch- *は非推奨であり、短期間のみサポートされます。（Chromeのm31のベータ版として書かれています）。
Windows 8.1以降のIE 11以降のカスタムタイル
Windows 8.1以降のIE 11以降では、サイトの固定タイルを作成する方法を提供しています。
マイクロソフトでは、次のサイズでいくつかのタイルを作成することをお勧めします。
小：128 x 128
中：270 x 270
ワイド：558 x 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固有のコードでさえも表示されません）。WebサイトのWindows Phoneユーザー向けの「ライブタイル」を作成するには、次のコードを使用する必要があります。
Microsoftからの詳細な手順は次のとおりですが、概要は次のとおりです。
ステップ1
ウェブサイト用の正方形の画像を作成します。高解像度の画面をサポートするには、768x768ピクセルのサイズで画像を作成します。
ステップ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の回答によると、ChromeとFirefoxには、ブラウザにすべてのサイズのアイコンをロードさせるバグがあります。このため、1つの大きなアイコンを使用する方が、複数の小さなアイコンを使用するよりも優れている場合があります。
参考文献
詳細については、以下のリンクをご覧ください。