現在、ファビコンをサポートするすべてのブラウザにファビコンを表示するための最良の方法は何ですか？

83

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

以下を含めてください：

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

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

html  standards  favicon 
— フレッド
ソース
1
ここにもiPhoneの「ファビコン」を含める価値があるかもしれません。つまり、ユーザーがWebサイトをホーム画面に追加することを選択した場合です。この場合に使用されるコードは次のとおりです。<linkrel = "apple-touch-icon" href = "touch.png" />寸法は57x57ピクセルである必要があります。または、リンクタグを省略して、「apple-touch-icon.png」というファイルをWebサイトのルートディレクトリに配置することもできます。
— 異なる
あなたがそれにいる間、これを読んでください：mathiasbynens.be/notes/touch-icons
— Zach Lysobey 2011
iPadおよびRetinaiPhoneディスプレイには、より大きなアイコンが必要になることに注意してください。Appleのガイドラインを参照してください：developer.apple.com/library/IOs/#documentation/...
— マイクOttum

回答:

108

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

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

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

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

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

参照

— ブライアンマシュー
ソース
2
OK、私は「マイクロソフトが私の神経質になっている」日を過ごしています。スタックオーバーフローサイトのファビコンが表示されているにもかかわらず、これをInternetExplorerで機能させることはできません。doctypeなど、これに影響を与える他の設定はありますか？
— belugabob 2008年
1
参考までに-私は答えを見つけました。localhost：8080 / index.htmlを介してサイトを参照する場合、それは機能しません-マシンの実際の名前（machineName：8080 / index.html）を使用する場合、すべてが期待どおりに機能します。私はこの振る舞いを理解し始めることさえできません-誰かが試してみませんか？
— belugabob 2008年
2
更新-この動作は、ブラウザがアイコンをキャッシュすることによって発生します。キャッシュを失っても満足している場合は、インターネット一時ファイルをクリアすることでこれを解決できます。
— belugabob 2008年
2
リンクのIEバージョンをIE条件付きコメントに入れる方がいいでしょうか？
— EoghanM 2008
9
32x32 ?? 16x16が標準ではありませんか？
— Eduardo Molteni 2009年
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" />
— ジョン・トプリー
ソース
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.ico HiDPI (32x32px)

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

— ウィレム・ド・ウィット
ソース
最初のリンクは古くなっています。github.com/ h5bp / html5-boilerplate / blob / master / src / doc /…にアクセスする必要があります。自分で編集したいのですが、文字が足りません：/回答ありがとうございます！
— ブレンダン
3

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

getfavicon.org

ファビコン、画像タイプ、解像度の作成に関するチュートリアルを見ることができます。これはすばらしいことです。

動作しなくなりました。
— ローマンスターコフ2014
2

持つfavicon.*あなたのルートディレクトリには、自動的にほとんどのブラウザで検出されます。次を使用して、確実に検出されます。

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

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

— ロス
ソース
いいえ、「favicon。*」ではありません。機能する形式は、ico、png、gif、jpeg、SVGのごくわずかです。en.wikipedia.org/wiki/Favicon#File_format_supportを参照してください。
— WhyNotHugo 2013年
1

この質問への答えは 複雑十分：最良の方法は、あなたのアップロードA PNG / JPGでき、その後、あなたのためのすべてのプラットフォームをカバーするためにファビコンとコードを生成RealFaviconGenerator、のようなツールを使用することであることをhttps：//でrealfavicongeneratorを。ネット/

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