web-dev-qa-db-ja.com

小さなファビコンがさらに別のHTTP要求を必要とするのはばかげていませんか？ファビコンをスプライトに入れるにはどうすればよいですか？

HTMLでfavicon.icoリンクを設定する方法は誰でも知っています。

<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">

しかし、小さな数バイトのアイコンに必要なのは、ばかげていると思いますまだ別のHTTP要求。そのため、その貴重なHTTPリクエストを高速化して保存するために、その画像をスプライト（たとえばbackground-position=0px -200px;）の一部にするにはどうすればよいのだろうと思いました。これをロゴや他のアートワークで既存のスプライト画像に取得するにはどうすればよいですか？

_favicon.ico（ウォーターフォールグラフのアイテム番号31）を指しているロボットは、私のペットZAMです。彼は通常は幸せで、ウェブ上で創造的なアップグレードをする時が来たことを知らせてくれますが、彼と私は彼の服装に同意しませんが、今日は少しばかげていると思います...

enter image description here

javascripthtmlcssperformancefavicon
290
Sam

@ yc's answer のマイナーな改良点は、通常使用されてキャッシュされるJavaScriptファイルからbase64エンコードされたファビコンを注入することです。また、データURIを供給することでfavicon.icoを要求するブラウザの標準動作を抑制します関連するmetaタグ内。

この手法により、余分なhttp要求が回避され、Windows 7上のChrome、Firefox、およびOperaの最新バージョンで動作することが確認されました。ただし、does n'tはInternet Explorer 9で動作します少なくとも。

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- Suppress browser request for favicon.ico -->
        <link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
        <script src="script.js"></script>
...

script.js

var favIcon = "\
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABrUlEQVR42mNkwAOepOgxMTD9mwhk\
[...truncated for brevity...]
IALgNIBUQBUDAFi2whGNUZ3eAAAAAElFTkSuQmCC";

var docHead = document.getElementsByTagName('head')[0];       
var newLink = document.createElement('link');
newLink.rel = 'shortcut icon';
newLink.href = 'data:image/png;base64,'+favIcon;
docHead.appendChild(newLink);

/* Other JS would normally be in here too. */

デモ： turi.co/up/favicon.html

130
Marcel

これらは通常、最初のアクセス後にブラウザのキャッシュにダンプされるため、ほとんどの場合、別のHTTPリクエストは発生しません。

これは、実際に提案された「ソリューション」のいずれよりも効率的です。

140
James Anderson

データURIを試すことができます。 HTTPリクエストなし！

<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,....==">

ページに静的キャッシュがない限り、ファビコンはキャッシュできず、ファビコン画像のサイズによっては、結果としてソースコードが肥大化する可能性があります。

データURIファビコンは、ほとんどの最新のブラウザーで機能するようです。 Mac上の最近のバージョンのChrome、Firefox、Safariで動作しています。 Internet Explorer、およびおそらくOperaの一部のバージョンでは動作しないようです。

古いIEについて心配している場合（そして、最近ではないはずです）、従来のfavicon.icoをロードするIE条件付きコメントを含めることができます方法、古いInternet ExplorerはデータURIファビコンをサポートしていないようです

`<!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico"  type="image/x-icon" /><![endif]--> `
  1. ルートディレクトリにfavicon.icoファイルを含めて、どちらの方法でもリクエストするブラウザをカバーします。これらのブラウザでは、何をしても既にチェックしている場合は、404レスポンスでHTTPリクエストを無駄にしないでください。 。

また、http://google.com/favicon.icoのように、ファビコンがキャッシュされている可能性が高い別の人気サイトのファビコンを使用して、キャッシュから提供することもできます。

コメンターが指摘したように、canするからといって、そうする必要はありません。一部のブラウザーは、私たちが考案したトリックに関係なくfavicon.icoを要求するからです。これにより節約できるオーバーヘッドの量は、gzip、静的コンテンツ用の遠いexpiresヘッダーの使用、JavaScriptファイルの縮小、背景画像のスプライトまたはデータURIへの挿入などと比較してわずかです。 、CDNなどから静的ファイルを提供します。

94
Yahel

次のようなbase64エンコードされたファビコンを使用できます。

<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAACbUlEQVRIx7WUsU/qUBTGv96WSlWeEBZijJggxrREdwYixMnByYEyOvgfsBAMG0xuDsZ/QGc3NDFhgTioiYsmkhBYGLSBkLYR0va8gSjvQXiIT7/l5ibfOd/v3pN7gSmVSMTj8ThRfzdYk8lkMpl83/+AVFVVVXU0eHiVJEmSpB8DIcpkMplsdhCYz+fzhQJROBwOh8PDQN+oQCAQCASIRFEURZHI45GkP0/e7Xa73e70AMJnjel0Op1OA6oaDB4eAkAw6PcDvZ5t6zrw/Hx2trAw/cHYZ426ruu6DtzcGEYuBzQa19etFvD4WKtls4AoRqMPDwBjjLGPrt84ilgsFovF6EOapmmaRiP6O/jbAIguL4vFYpHGqlKpVCoVomq1Wq1Wibxer9fn+w+Q9+cUiUQikQhNrfdgWZZlWf4yyGhj27Zt254MUK/X6/X6F0aiKIqiKIOCYRmGYRjGZADLsizLIgqFQqHV1SkAnp5OTn79ItK0qyuPZ7SxaZqmaU4GKJfPzxmbfAPc/f3pqaIQLS8vLtZqgOP0bYyJoiAARC5Xrwf4/Vtbb2+Th1YqlUqlErC01GgkEkCz2WxyHLC+LsuiCAiCJLlcgM+3vd3pcBzXaJTLR0dEs7Ptdv+D4TiOG/A6DsBxQKvV621sAGtru7vl8ngAjuvXv7xcXIgiwNjMjCj2h+k4fQfPA4LA8xwHCO323V2hABiG223bwPy8xwMAbvfcHGMAY32j47y+3t4OAsZpZ2dzEwAsy7IcBxAExhwHMIxOx3GAlZVUyjT/1WFIudzenstFlEpFo9M8o+Pj/X2eJzo4SCR4fnzdb2N4Pyv9cduVAAAAAElFTkSuQmCC" rel="icon" type="image/x-icon" />
20
Dongsheng Cai

良い点といい考えですが、不可能です。ファビコンは、単一の別個のリソースである必要があります。別の画像ファイルと組み合わせる方法はありません。

14
Pekka 웃

このページ で興味深い解決策を見つけました。ドイツ語ですが、コードを理解することができます。

アイコンのbase64データを外部スタイルシートに入れて、キャッシュされます。 Webサイトのヘッドで、ファビコンをIDで定義する必要があり、ファビコンはそのIDのスタイルシートでbackground-imageとして設定されます。

link#icon {
    background-image:url("data:image/x-icon;base64,<base64_image_data>");
}

そして、html

<html>
    <head>
        <link id="icon" rel="shortcut icon" type="image/x-icon" />
        <link rel="stylesheet" type="text/css" href="/styles.css" />
        ...
    </head>
    <body>
        ...
    </body>
</html>
13
Felix Geenen

それは本当に重要ですか？

多くのブラウザは、ファビコンを低い優先度でロードするため、ページのロードがブロックされることはありません。そのため、追加のリクエストですが、クリティカルパスではありません。

JSが取得および実行されるまで、以下のすべてのDOM要素のレンダリングがブロックされ、リクエストの数が減らないため、受け入れられたソリューションは恐ろしいものです。

9
Andy Davies

適切な解決策は、 HTTPパイプライン化 を使用することです。

HTTPパイプライン化は、対応する応答を待たずに複数のHTTP要求を単一のソケットに書き出す手法です。パイプライン処理はHTTP/1.1でのみサポートされ、1.0ではサポートされません。

サーバーがサポートする必要がありますが、必ずしも参加する必要はありません。

HTTPパイプライン処理をサポートするには、クライアントとサーバーの両方が必要です。パイプラインをサポートするには、HTTP/1.1準拠のサーバーが必要です。これは、サーバーが応答をパイプライン処理する必要があることを意味するのではなく、クライアントが要求をパイプライン処理することを選択した場合にサーバーが失敗しないことを要求することを意味します。

多くのブラウザクライアントは、必要なときにそれを行いません。

HTTPパイプラインは、ほとんどのブラウザーで無効になっています。

  • Operaでは、デフォルトでパイプラインが有効になっています。接続されたサーバーに応じて、ヒューリスティックを使用して、使用されるパイプラインのレベルを制御します。
  • Internet Explorer 8は、バグのあるプロキシおよび行頭ブロッキングに関する懸念のため、リクエストをパイプライン処理しません。
  • Mozillaブラウザ（Mozilla Firefox、SeaMonkey、Caminoなど）はパイプラインをサポートしますが、デフォルトでは無効になっています。特にIISサーバーのパイプラインをオフにするために、いくつかのヒューリスティックを使用します。
  • Konqueror 2.0はパイプラインをサポートしていますが、デフォルトでは無効になっています。[要出典]
  • Google Chromeはパイプラインをサポートしていません。

Firefoxでパイプラインを有効にして試してみるか、Opera（shudder）を使用することをお勧めします。

7
Matt Joiner

その素晴らしいアイデアですが、もしGoogleが彼らのホームページでそれをやっていなかったら、私はそれが（現在）できないと確信しています

6
cusimar9

実際には質問に対する答えではなく、単に Marcel および yahelc で与えられる答えを補完するために、404ファビコンの問題に対するエレガントなソリューションを提供します。

一部のアプリやブラウザ、その他ではfavicon.comをチェックし、サイトのルートにアイコンが見つからない場合は、 204 response ヘッダーでリクエストに単純に応答できます。

Apacheの例：

Apacheオプション1（および私のお気に入り）、. htaccesまたは.confのシンプルな1つのライナー：

Redirect 204 /favicon.ico

Apacheオプション2：

<Files "favicon.ico">
    ErrorDocument 204 ""
</Files>

さらに読むには、Stoyan Stefanovによるニースのブログ投稿があります http://www.phpied.com/204-no-content/

6
Anthony Hatzopoulos

申し訳ありませんが、ファビコンを他のリソースと組み合わせることはできません。

これは、基本的に2つのオプションがあることを意味します。

  1. サイトにファビコンがないことに満足している場合は、hrefに、既に読み込まれているアイコン以外のリソース（スタイルシート、スクリプトファイル、または有益なリソースなど）を指定するだけで済みます。プリフェッチされません。）
    （私の短いテストでは、これはすべてではないにしても、ほとんどの主要なブラウザで機能することを示しています。）

  2. 追加のHTTP要求を受け入れ、ファビコンファイルに積極的なHTTPキャッシュ制御ヘッダーが設定されていることを確認してください。
    （他のWebサイトを管理している場合は、他の静的リソースとともに、このWebサイトのファビコンをこっそりプリロードしておくこともできます。）

P.S。創造的なソリューション動作しません：

  • 奇妙なCSS data-uriトリック（コメンターFelix Geenenによるリンク）は機能しません。
  • Javascriptを使用してfavicon <link>要素の遅延注入を実行すると（ユーザー@ycが示唆するように）、事態を悪化させる可能性があります-twoHTTPリクエスト。
5
Már Örlygsson

データフットプリントをさらに小さくするために、ICO形式の代わりに8ビットPNGを使用できます。変更する必要があるのは、MIMEタイプヘッダー「data：image/x-icon」ではなく「data：image/png」を使用することだけです。

<link
  href="data:image/png;base64,your-base64-encoded-string-goes-here"
  rel="icon" type="image/png"
/>

「type」属性には「image/png」または「image/x-icon」を指定できますが、どちらも機能します。

Gimpまたはconvertを使用して、ICOを8ビットpngに変換できます。

convert favicon.ico -depth 8 -strip favicon.png

base64コマンドを使用してPNGバイナリをbase64文字列にエンコードします。

base64 favicon.png
3
andrej

最も簡単な方法は次のとおりです。

<!DOCTYPE html><html><head> 
<link rel="shortcut icon" href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAA
lwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4
OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3
JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9y
Zy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdG
lvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25z
LmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj
4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAg
PC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAABLJJREFUWAnFV+trW2UY/yVN0j
S32q6bnWunQ1e11k3YXMUy8AbDoSBDv4mfFPTj/Gd9ug/7B/woqCCISnGItcyppbgN
Rhn2st5G2yxt1svSJe1yPYnP703fcs7JSZo4YS9Ncs57eX6/5/Y+T12fX7hYdAHy92
iG+1GCU2X3/6V3k9sNl8uFUqnUkMiHJkDfuQV4M7WFbC4Hr8fTEAlPQ3RtmwleFI0z
mQxO95/EQP8pLEaj+PaHQbS3RmAUi7YTla8PRYDGLhgGPnz/HI719Srp0VgMhszRHf
WM/+wC+jy1tY2zb72uwOl7WmPi1gwCfr887609CdZtAfpZa0XNc/k8nug8gBPHjylF
uTY7N4/JmVmEQkFlBbWwx9eeBNyiKbVLZ7IKlEAtomEmm0Vvz1G0tLQoiKXoHXzz/Y
9qX75QgM/jhb/ZB5KtlRk1CdDM2+k0SKLn6SM4KBoXRHhsOY6J2XmsbWxgdv42Jqdn
cH3sJo4c7sKhg50oFku4s7yMuYUleJqahEizzDm7pCoBgt8XH7/Q8wzOvPmamLtz1w
UMvPjdu1hYjIrPp9He9hjOf/oJ9rW37e5hBiwuRXFpaBjR5RWEgkFHEq4vLlysuDkI
nhTwV068hPfeOau0oJ21KXUsKNvbvux7suKq734axNT0nLhOLCHuNI8KC1B4Wg7RnO
++fUaB03x0gxlYA1EYZcoxta73cJ3PD8SFuWxOnbdCl2k4EuCN9sbpATT7fMpsBLcP
DcR5gpuHBk8mU/jyq6+xcW8TYckMpziwSKagvKTX4x0deOpwt5JpBjKD1PM8eu064q
vraI2EHcEpw0pAqnK+YODA/n3wS6pxNEpAa58TK05IdoQl+AyjoGQ5fVkI0JbFoqEi
tlFgu/C01IeM3B2UY4s7y1YrAbXUeEm1SNx58Un8sDJKiNbsdiwEaD6m4JakoFPAOA
HZ57TleFs+2d2lMsotl1G1YSHATR5PEzYSCXXt8p2kGh36zED/y+o8qyNridOwEOBB
j5htI7GJ1bU1p/11zZX9XkJ31yF89MG5nTpScAxoCwFKZ86z8NxeWKwLrNom7YrjL/
bh/GcfY39Hu2RYJYkKAvR9KBjAjZv/CJHMThQ37gYS066IhMNgWmpSZtIVBHio2euV
AhLH+OSU2qsFmQ828jx69Rpi8VX4vJX9YgUBCmbBCIsVhv8cQTKVKt/jDsFIYvpjJ0
RLUuPYygqujF5FG3tEo7IkOxKgUObwvcR9DF2+omRTmE5NDco5/dFzSoGd4sWaMvjL
kCJZJQmsV7FZC9bziBSQv2+M4Y+RUbWki5IGZXPC1oy/eo4buY9W/PnX3zC/uFTuEa
VJcRoV1dC8iSRawyFcGv4dqe1tvHrqpFS1EFbX1zE+dQvT0hVlpNSyzvc+exR9zz8n
zUmbVL8ELv81grHxSbTK/lrtuWNDYibBZ14iSSEQlP6PGbIpZTadzkg/6Fdr1PaBvI
cCLYgIYa7TKsFAYNdtdpn6vaYF9CYCREQTxkBS/gPySZb42SvIvDhYNQRsQBlkal3i
R/cSWka137oI8LAOQF7VDDiDwHrw3Si/l9eFl5CtZzhmQa2DZlynfXut28/8C/JOMz
7+5SRKAAAAAElFTkSuQmCC">
</head></html>

それが表すアイコンは何ですか？以下に答えて投票してください！

2
rjobidon

ページ上のすべての画像は個別のhttpリクエストです。ファビコンを必要とする悲劇はありません。

0
Headshota