回答:
IEでは、favicon.icoファイルにパックされた16x16、32x32、および48x48をお勧めします。
iOSの場合、Appleは特定のファイル名と解像度を推奨します。iOS8を実行する最新のデバイスでは最大180x180です。
Android Chromeは主にマニフェストを使用し、Appleタッチアイコンにも依存しています。
Windows 8.0上のIE 10はPNG画像と背景色を必要とし、Windows 8.1および10上のIE 11はという専用のXMLファイルで宣言されたいくつかのPNG画像を受け入れますbrowserconfig.xml
。
Mac OS X用のSafari X El Capitanでは、固定されたタブにSVGアイコンが導入されています。
その他のプラットフォームでは、Google TVの96x96画像やOpera Coastの228x228画像など、さまざまな解像度のPNGファイルを探します。
完全なリファレンスについては、このファビコンの写真リストをご覧ください。
TLDR:このファビコンジェネレーターは、これらすべてのファイルを一度に生成できます。ジェネレーターは、WordPressプラグインとして実装することもできます。完全な開示:私はこのサイトの作成者です。
ここに最新の情報が表示されないので、次のようにします。
今この質問に答えるために、アイコンをどこでも見栄えよくしたい場合、2つのファビコンはそれを行いません。以下のサイズをご覧ください:
16 x 16 –ブラウザの標準サイズ
24 x 24 –ユーザーインターフェイスのIE9ピン留めサイトサイズ
32 x 32 – IE新しいページタブ、Windows 7+タスクバーボタン、Safariリーディングリストサイドバー
48 x 48 – Windowsサイト
57 x 57 – iPod touch 、iPhone最大3G
60 x 60 – iPhone touch最大iOS7
64 x 64 – Windowsサイト、Safari Reader ListサイドバーのHiDPI / Retina
70 x 70 – Win 8.1 Metroタイル
72 x 72 – iPad touch最大iOS6
76 x 76 – iOS7
96 x 96 – GoogleTV
114 x 114 – iPhone 6までのiPhone網膜タッチ
120 x 120 – iPhone網膜タッチiOS7
128 x 128 – Chrome Web Storeアプリ、Android
144 x 144 –ピン留めサイト用IE10 Metroタイル、iPad6までiOS6
150 x 150 – Win 8.1 Metroタイル
152 x 152 – iPad retina touch iOS7
196 x 196 – Android Chrome
310 x 150 – Win 8.1ワイドMetroタイル
310 x 310 – Win 8.1 Metroタイル
私は確かにブラウザが大きなアイコンをスケーリングする方法/場合ではないですが、W3Cは、以下の示唆1:
選択した画像のフォーマットは、8ビットまたは24ビットの色を使用して、16x16ピクセルまたは32x32ピクセルである必要があります。画像の形式は、PNG(W3C標準)、GIF、またはICOのいずれかである必要があります。
[current year]
cssだけでできることが十分素晴らしいのに、なぜ私は地獄の制限に対処する必要があるのかと戸惑っていました。そのときは、私が欲しいものを何でも使用します。何かがそれをサポートしていない場合は、標準に従って、それが彼らの問題です。
実際、すべてのブラウザでファビコンを正しく機能させるには、正しいサイズと形式のファイルを10個以上追加する必要があります。
私の友人と私は、このためのアプリを作成しました!あなたはfaviconit.comでそれを見つけることができます
私たちはこれを行ったので、人々はこれらのすべての画像と正しいタグを手動で作成する必要はありません。それらをすべて作成して、私を悩ませることがたくさんあります!
同じファイルに複数のサイズのアイコンを含めることができます。48、32、16ピクセルのファビコン(.ico
ファイル)を定期的に作成しています。任意のサイズの画像を追加できます。問題は、iPhoneがico
ファイルを使用するかどうかです。
ico
透明度もサポートしますが、PNGのようなアルファチャネルかどうかはわかりません。おそらく、オンまたはオフのGIFに似ています。
.ico
ファイルに含める方法を示しています。
ファビコンに関するウィキペディアの記事によると、 Internet ExplorerはファビコンのICO形式のみをサポートしています。
2つの異なるアイコンを使用します。
ファビコンは、16x16または32x32である必要はありません。80x80または100x100のファビコンを作成できます。両方の値が同じサイズであることを確認し、明らかに大きすぎたり小さすぎたりしないように、適切なサイズを選択してください。
私が恐れている解像度ごとに個別のファイルが必要になります。キャンペーンモニターに関する非常に優れた記事で、iOSデバイスごとにアイコンを作成および実装した方法についても説明しています。
http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/
私が学んだように、これらのいくつかのソリューションのどれも完璧ではありません。ファビコンジェネレータを使用することは確かに良い解決策ですが、その数は圧倒的であり、選択するのは困難です。WebサイトでPWAを有効にしたい場合は、Google Devsで述べられている512x512アイコンも提供する必要があることを付け加えておきます。
192pxと512pxバージョンを含むアイコン
私はその基準を適用する多くのファビコンジェネレーターに会いませんでした(firebaseはそうですが、それが行わないことがたくさんあります)。したがって、ソリューションは他の多くのソリューションを組み合わせたものでなければなりません。
今日でも2020年の初めに、16x16、32x32を提供できるかどうかはわかりません。たとえば、ユーザーが何らかの理由でまだIEを使用している場合など、特定のコンテキストでは依然として重要だと思います(これは、何らかの理由で新しいブラウザーに移行しない一部の民間企業で引き続き発生します)。