83

現在ファビコンをサポートしているすべてのブラウザでファビコンを表示する最善の方法は何ですか?

含めてください:

  1. どのブラウザでどの画像形式がサポートされているか。

  2. さまざまなブラウザーのどの場所でどの行が必要か。

4

9 に答える 9

109

ここでベルトとブレースのアプローチに行きます。

と と呼ばれるとの両方.icoの.png形式で 32x32 のアイコンを作成します。古いブラウザを扱っていない限り、アイコン名はあまり重要ではありません。favicon.icofavicon.png

  1. 古いブラウザーをサポートするためにサイトのルートに配置favicon.icoします (オプションであり、古いブラウザーにのみ関連します。
  2. favicon.png を images サブディレクトリに配置します (整理するため)。
  3. <head>要素内に次の HTML を追加します。
<link rel="icon" href="/images/favicon.png" type="image/png" />
<link rel="ショートカット アイコン" href="/favicon.ico" />

その点に注意してください：

  • ファイルの MIME タイプは、 IANA.icoによって image/vnd.microsoft.icon として登録されました。
  • Internet Explorer はtype、ショートカット アイコン関係の属性を無視します。これは、この関係をサポートする唯一のブラウザーです。指定する必要はありません。

参照

于 2008-09-01T00:55:43.010 に答える
10

.ico形式を使用し、<head>要素内に次の2行を配置します。

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
于 2008-08-31T20:46:21.237 に答える
6

タブレットやスマートフォンのタッチ アイコンもサポートするには、HTML5Boilerplateのアプローチを好みます

タッチ アイコンの詳細については、この記事を参照してください。

現在のブラウザー サポートの状態では、ファビコン用の HTML タグをドキュメントに追加する必要さえありません。ブラウザはファイルのリストを自動的に検索します。iOS の例を参照してください。

HTML でアイコンが指定されていない場合、iOS Safari は Web サイトのルート ディレクトリで、apple-touch-icon または apple-touch-icon-precomposed プレフィックスを持つアイコンを検索します。たとえば、デバイスの適切なアイコン サイズが 57 × 57 ピクセルの場合、iOS は次の順序でファイル名を検索します。

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

ドキュメントにファビコンを含めず、ルート Web サイトにファイルのリストを用意しておくことをお勧めします。

  • apple-touch-icon-114x114-precomposed.png
  • apple-touch-icon-144x144-precomposed.png
  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-72x72-precomposed.png
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png(57px*57px)
  • favicon.icoHiDPI (32x32px)

html5boilerplate.comからテンプレートをダウンロードすると、これらはすべて含まれているので、独自のアイコンに置き換えるだけです。

于 2013-03-21T09:28:59.800 に答える
5

救助のためのウィキペディア

于 2008-08-31T20:26:55.637 に答える
4

IE6 は PNG を正しく処理できません。注意してください。

于 2008-08-31T23:05:54.227 に答える
3

すべてのブラウザで正しく機能するには、ファビコンが.icoファイルである必要があります。

最新のブラウザは、PNGおよびGIF画像もサポートしています。

一般に、これを作成する最も簡単な方法は、 favicon.ccなどの無料で利用できるWebサービスを使用することです。

于 2008-08-31T21:15:54.520 に答える
3

任意のページのファビコンがどのように作られているのかを確認できるサイトもあります

getfavicon.org

そこでは、ファビコン、画像の種類、解像度の作成に関するチュートリアルを見ることができます。

于 2009-01-30T15:45:39.953 に答える
2

ルートfavicon.*ディレクトリに があると、ほとんどのブラウザで自動的に検出されます。以下を使用して、確実に検出できます。

 <link rel="icon" type="image/png" href="/path/image.png" />

個人的には .png 画像を使用していますが、ほとんどの形式が機能するはずです。

于 2008-08-31T20:22:39.487 に答える