ファビコンは32x32または16x16である必要がありますか?


692

通常のファビコンとiPhone / iPadフレンドリーなファビコンの両方として単一の画像を使用したいと思います。

これは可能ですか?通常のブラウザのファビコンとしてリンクされている場合、iPadに適した72x72 PNGスケールになりますか?または、別の16x16または32x32イメージを使用する必要がありますか?


私の回答stackoverflow.com/a/45301651/661584をはるかに簡単に参照してください。役立つかもしれません。感謝
MemeDeveloper 2017

回答:


1448

136

ここに最新の情報が表示されないので、次のようにします。

今この質問に答えるために、アイコンをどこでも見栄えよくしたい場合、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タイル


8
このリストへの参照はありますか?
Abdulhameed

81

私は確かにブラウザが大きなアイコンをスケーリングする方法/場合ではないですが、W3Cは、以下の示唆1

選択した画像のフォーマットは、8ビットまたは24ビットの色を使用して、16x16ピクセルまたは32x32ピクセルである必要があります。画像の形式は、PNG(W3C標準)、GIF、またはICOのいずれかである必要があります。


1 w3c.org:サイトにファビコンを追加する方法(開発中のドラフト)


2006年に私は同様の結論に達しました("Favicon Primer"(2006年4月; hakreによる))が、その2005年のW3C資料について知りませんでした(はい、検索+読むと役立ちます:))。概要をありがとう。その時は私が書いたはないか、それは4ビットの色についてもでした。
2013

2
それは2005年以来草案でしたか?Oo
mcont 2014

7
この使用法は、現在html5標準に置き換えられる必要があります。アイコンのサイズに制限はなく、32768x32768アイコンの例が提供されています。
rhgb 2015年

1
@rhgbありがとうございます!私は[current year]cssだけでできることが十分素晴らしいのに、なぜ私は地獄の制限に対処する必要があるのかと戸惑っていました。そのときは、私が欲しいものを何でも使用します。何かがそれをサポートしていない場合は、標準に従って、それが彼らの問題です。
Sahsahae

63

実際、すべてのブラウザでファビコンを正しく機能させるには、正しいサイズと形式のファイルを10個以上追加する必要があります。

私の友人と私は、このためのアプリを作成しました!あなたはfaviconit.comでそれを見つけることができます

私たちはこれを行ったので、人々はこれらのすべての画像と正しいタグを手動で作成する必要はありません。それらをすべて作成して、私を悩ませることがたくさんあります!


6

同じファイルに複数のサイズのアイコンを含めることができます。48、32、16ピクセルのファビコン(.icoファイル)を定期的に作成しています。任意のサイズの画像を追加できます。問題は、iPhoneがicoファイルを使用するかどうかです。

ico透明度もサポートしますが、PNGのようなアルファチャネルかどうかはわかりません。おそらく、オンまたはオフのGIFに似ています。


1
XP以降では、RGBA画像のPNGライク(PNG自体?)形式をサポートしていると思います。egressive.com/tutorial/…は、GIMPを使用してそのような画像を.icoファイルに含める方法を示しています。
SamB、2011

1
ICOは1ビットのアルファチャネルを使用しますが、PNGは他のチャネルと同様に8ビットです。ICOは単純なアイコンで十分ですが、場合によっては、この違いのためにPNGがより望ましいでしょう。
SteenSchütt2013年

SamBはほぼ正しく、Time Sheepは半分正しいです。ICOは埋め込まれるPNG画像をサポートし、埋め込まれるPNGは32ビットRGBA画像でなければなりません
Cornstalks 2013年


2

ファビコンは、16x16または32x32である必要はありません。80x80または100x100のファビコンを作成できます。両方の値が同じサイズであることを確認し、明らかに大きすぎたり小さすぎたりしないように、適切なサイズを選択してください。


3
申し訳ありませんが、あなたの答えが示唆するよりももっとたくさんあります。stackoverflow.com/a/45301651/661584を参照して、必要に応じて読んでください-クレイジーコンプレックスです。役立つかもしれません。感謝
MemeDeveloper 2017

1

私が恐れている解像度ごとに個別のファイルが必要になります。キャンペーンモニターに関する非常に優れた記事で、iOSデバイスごとにアイコンを作成および実装した方法についても説明しています。

http://www.campaignmonitor.com/blog/post/323​​4/designing-campaign-monitor-ios-icons/


2
同じファイルに複数のサイズのアイコンを含めることができます。
ブラッド、

本当にありがとう、それは素晴らしい記事です。Appleデバイスが複数のサイズの画像を含むicoファイルをどうするかは、まだ少し謎です。
Alex G

1

私が学んだように、これらのいくつかのソリューションのどれも完璧ではありません。ファビコンジェネレータを使用することは確かに良い解決策ですが、その数は圧倒的であり、選択するのは困難です。WebサイトでPWAを有効にしたい場合は、Google Devsで述べられている512x512アイコンも提供する必要があることを付け加えておきます。

192pxと512pxバージョンを含むアイコン

私はその基準を適用する多くのファビコンジェネレーターに会いませんでした(firebaseはそうですが、それが行わないことがたくさんあります)。したがって、ソリューションは他の多くのソリューションを組み合わせたものでなければなりません。

今日でも2020年の初めに、16x16、32x32を提供できるかどうかはわかりません。たとえば、ユーザーが何らかの理由でまだIEを使用している場合など、特定のコンテキストでは依然として重要だと思います(これは、何らかの理由で新しいブラウザーに移行しない一部の民間企業で引き続き発生します)。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.