web-dev-qa-db-ja.com

モバイルファビコン

そのため、モバイルサイトのユーザーエクスペリエンスに関する調査を行っており、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）のみを使用し、これらはすべてApple-touch-iconsです。それで、画像/コード部分は本当に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の助けを借りて、なんとかこれにたどり着きました。

いずれにせよ、すべての助けに感謝し、うまくいけば今後数年で彼らはファビコンの適切な標準を作るでしょう！

iconsfaviconico
17
Rafaël De Jongh

大きなアイコンセットなしでできるだけ多くのプラットフォームに対応するには、基本的に4つのアイコンが必要です。

  • 最新のデスクトップブラウザ用のPNGアイコン。
  • Appleモバイルブラウザのタッチアイコン（もちろん、iOS Safariだけでなく、Android Chromeおよびその他多数の; Mac OS Yosemite Safari）。
  • favicon.ico、レガシーブラウザの場合（IE 9、8、...）と考えてください）。
  • Windows 8および10のIEのタイルアイコン。

これは私たちに与えます：

<link rel="Apple-touch-icon" sizes="180x180" href="/Apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon.png" sizes="32x32">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-TileColor" content="#00aba9">

このコードに関するいくつかのコメント：

  • Apple-touch-icon.pngは180x180で、iOS（iPhone 6以降のiOS 8およびRetina iPad）でサポートされている最高の解像度です。小さいプラットフォームはアイコンを縮小します。
  • Apple-touch-icon.pngは Appleの規約 であるため、この方法で名前が付けられ、Webサイトのルートディレクトリに配置されます。配置したり、別の名前を付けたりすると、サーバーのログに404エラーが記録されます。心配する必要はありませんが、回避できる場合は...
  • favicon.pngは32x32です。小さすぎず、大きすぎません。大きくすることもできますが、大きなメリットはありません。
  • favicon.icoは、IEの規則であるため、Webサイトのルートディレクトリにあります。たとえば、Yandex検索エンジンはここでそれを期待しています。
  • この例では、mstile-144x144.pngおよびなしbrowserconfig.xml。見た目が簡単だったので、これを行いました（これは、HTMLと画像が2行だけで、余分なXMLファイルは含まれていません）。しかし、この選択は議論の余地があります。 msapplication-TileImagおよびmsapplication-TileColor Win 8.0で導入されたメタ/ IE 10は browserconfig.xml Win 8.1/IE 11 。そう browserconfig.xmlは、より長期的なソリューションです。さらに、このファイルをサイトのルートディレクトリに配置する場合、HTMLで宣言する必要はありません：IE 11は、慣例に従ってファイルを検索します（ "favicon.ico "スタイル）。 Coast by Opera picks msapplication-TileImag（ブックマークの場合 。今あなたの選択をしてください！

最後に、質問で引用した大きなコードチャンクは RealFaviconGenerator によって生成されました。このツールの作成者として、あなたの質問は私を悲しくします;-)

27
philippe_b