web-dev-qa-db-ja.com

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

通常のファビコンとiPhone/iPad用のファビコンの両方として単一の画像を使用したいのですが。

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

639
Alex G

私はここにリストされた最新の情報を見ないので、ここに行きます:

今この質問に答えるために、あなたがあなたのアイコンをどこでも見栄えよくしたいのであれば、2人のfaviconはそれをしません。下のサイズを見てください。

16 x 16 - ブラウザの標準サイズ
24 x 24 - IE9はユーザーインターフェイスのサイトサイズを固定しました
32 x 32 - IE新しいページタブ、Windows 7以降のタスクバーボタン、Safari Reading Listサイドバー
48 x 48 - ウィンドウズサイト
57 x 57 - iPod touch、最大3GのiPhone
60 x 60 - iPhoneがiOS7にタッチアップ
64 x 64 - Windowsサイト、HiDPI/RetinaのSafari Reader Listサイドバー
70 x 70 - 8.1メトロタイルに勝つ
72 x 72 - iPadはiOS 6までタッチアップ
76 x 76 - iOS7
96 x 96 - GoogleTV
114 x 114 - iPhoneの網膜がiOS6にタッチアップ
120 x 120 - iPhoneの網膜タッチiOS7
128 x 128 - Chromeウェブストアアプリ、Android
144 x 144 - 固定サイト用のIE10 Metroタイル、iOS 6までのiPad網膜
150 x 150 - 勝利8.1のメトロタイル
152 x 152 - iPadの網膜タッチiOS7
196 x 196 - Android Chrome
310 x 150 - 8.1ワイドメトロタイルで勝利
310 x 310 - ウィン8.1メトロタイル

119
Matt

私は、ブラウザが大きなアイコンを拡大縮小するかどうか、また、どのように拡大縮小するかはわかりませんが、W3Cは次のように示唆しています1

選択した画像のフォーマットは、8ビットまたは24ビットカラーを使用して、16 x 16ピクセルまたは32 x 32ピクセルでなければなりません。画像のフォーマットは、PNG(W3C規格)、GIF、またはICOのいずれかでなければなりません。


1 w3c.org:あなたのサイトにFaviconを追加する方法(開発中のドラフト)

79
Daniel Vassallo

実際、faviconをすべてのブラウザで正しく機能させるためには、正しいサイズとフォーマットで10を超えるファイルを追加する必要があります。

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

これを行ったので、これらすべての画像と正しいタグを手作業で作成する必要はありません。

お役に立てば幸いです。

54
PedroHCan

あなたは同じファイルに複数のサイズのアイコンを持つことができます。私は日常的に48、32、16ピクセルのファビコン(.icoファイル)を作成しています。あなたが望む任意のサイズの画像で追加することができます。問題は、iPhoneはicoファイルを使うのでしょうか。

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

6
Brad

Faviconに関する Wikipediaの記事によると、 Internet ExplorerはfaviconのICO形式のみをサポートします。

私は2つの異なるアイコンを使い続けます。

2
Pekka 웃

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

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

1
Richard

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

1
Trevor