そこで、モバイル サイトのユーザー エクスペリエンスに関する調査を行ったところ、favicon.ico 全体が完全に時代遅れであるという事実に出くわしました。
Android、iPhone、Windows Phoneなどのさまざまなモバイルデバイスで実際に「ファビコン」を適切に表示するには、さまざまな新しい画像/アイコンのセットが必要であることがわかりました。
ここでの質問は、次のコードを取得したことです。
<link rel="apple-touch-icon" sizes="57x57" href="images/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="images/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="images/favicons/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="images/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="images/favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="images/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="images/favicons/manifest.json">
<meta name="apple-mobile-web-app-title" content="JoJo Productions">
<meta name="application-name" content="JoJo Productions">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="msapplication-TileImage" content="images/favicons/mstile-144x144.png">
<meta name="msapplication-config" content="images/favicons/browserconfig.xml">
<meta name="theme-color" content="#555555">
<link rel="shortcut icon" href="favicon.ico">
しかし、私にとってこれは、ファビコンを適切に表示するにはあまりにも巨大なコードの塊です。そのため、「ほとんどの」モバイル デバイスで適切に表示するには、何を削除できるのか、何を維持する必要があるのかを考えていました。
モバイル ファビコンを使用する他のほとんどの Web サイトは、上記のコードのほんの一部のみを使用します。57x57、72x72、114x114、および 144x144 はすべてアップル タッチ アイコンです。では、画像/コード部分は、iPhone やその他のモバイル ユーザーにとって本当に重要なのでしょうか? それとも、もう少し最適化することは可能ですか?
いずれにせよ、情報をありがとう。
編集
したがって、さらに調査を行った結果、ほとんどの最新のデバイスで問題なく動作するように思われる次の結果にたどり着きました。
<meta name="msapplication-config" content="images/favicons/browserconfig.xml">
<meta name="msapplication-TileImage" content="images/favicons/mstile-large.png">
<meta name="msapplication-TileColor" content="#ae8160">
<meta name="application-name" content="JoJo Productions">
<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48" href="favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
もちろん、コード/画像の量が大幅に削減されたので、どちらが良いでしょう。最新のほとんどのモバイル デバイスで動作する限り、私は満足しています。
この「チート シート」、このチュートリアル、および Philippe B の助けを組み合わせて、なんとかここまでたどり着きました。
いずれにせよ、すべての助けに感謝し、今後数年間でファビコンの適切な標準を作成することを願っています!