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

305

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

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

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

favicon.icoウォーターフォールグラフのアイテム番号31を指すロボットは、私のペットのZAMです。彼は通常より幸せであり、彼は私に今日いくつかの愚かなと思う彼の服装に同意しないが、ウェブでいくつかの創造的なアップグレードの時が来たと知らせてくれる良い点を持っています...

ここに画像の説明を入力してください

javascript  html  css  performance  favicon 
— サム
ソース
47
.css / .js / .png / .htmlを1つの最適化されたストリームに結合する方法がまだないのはばかげていませんか？あなたは誰かがこのアイデアを今までに思いつくだろうと思ったでしょう
— RichardTheKiwi
9
@リチャード関連：マルチパートレスポンスとGoogleは、これを解決する新しい最適化されたWebプロトコルのイニシアチブを持っています。その名前を忘れてしまいました... 編集：SPDYという名前です。しかし、明らかにそれは遠い将来です。
— ペッカ
9
@Richard別名cyberkiwi、data:画像の値とスクリプトをインラインですべてhtmlファイルに入れることができます。
— zzzzBov 2011年
39
ところで、素敵なスケッチマン:)
— Fatih Acet
18
スケッチの+1 :)
— Giuliano

回答:

140

@ycの回答に対するマイナーな改善点は、通常使用されてキャッシュされるJavaScriptファイルからbase64でエンコードされたファビコンをfavicon.ico挿入することと、関連するmetaタグにデータURIをフィードすることでリクエストの標準ブラウザ動作を抑制することです。

この手法は余分なhttpリクエストを回避し、Windows 7上のChrome、Firefox、Operaの最近のバージョンで動作することが確認されていますが、少なくとも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

— マルセル
ソース
3
キャッシュされた画期的な画期的な@Marcel +1。PS HTTP Headers Response.icoファイルのの文字は、アイコンのサイズとほぼ同じです!! お気に召しましたか？
— サム
2
@Sam：Stack Overflowのfavicon.icoファイルに相当するPNGのbase64 が半分のサイズであることに気付きました。素敵でコンパクト。
— Marcelは、
1
eeehm私はあなたが何を言っているのか私が理解しているかどうか確信がありません。icon.pngのようなPNGファイル？または、png形式のアイコンがgif形式またはgif形式の代わりにフォーマットされている場合、base64相当のものは小さいことを意味しますか？奇妙な。歓声メイト！
— サム
1
@サム：このPNGのbase64とこのICOファイルのbase64を比較していました。上記のサンプルコードで使用されているPNGバージョンは、半分のサイズです。
— マルセル
1
ああ、そうですか、それはあなたのbase 64の答えになり、base64 PNG形式の一般的な使用がその時よりも好ましい選択ですよね？
— サム
149

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

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

— ジェームス・アンダーソン
ソース
53
これが唯一の賢明な答えです。これは、修正を必要としない問題ではありません。
— JoDG、2011年
1
ジェームズ、私の解決策は実際には唯一の可能性ですが、私が実際に誰かに勧めることは決してありません。しかし、ほとんどのブラウザは、新しいブラウザセッションの開始時にファビコンに対して新しいHTTPリクエストを発行するようです。そして、それは常に304戻らない
— Yahel
4
ブラウザは、ブラウザのキャッシュにある場合でもHEAD呼び出しを行うため、HTTPリクエストのオーバーヘッドが発生します。
— dietbuddha
3
実際にはすべてがブラウザに依存しています。ほとんどの場合、たとえページで言及されていなくても、常にいくつかの場所でファビコンを探し、更新のたびにHEAD呼び出しを行います。
— デビッドコスタ
14
ファビコンには、適切な静的リソースと同様に、有効期限が長いヘッダーが必要です。これにより、HEAD呼び出しも抑制されます。
— ポールアレクサンダー
102

あなたはデータ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ににすることもできます。

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

— ヤヘル
ソース
1
@Pekkaそうです。キャッシュされていないページのデータURIの余分なバイトの重みは、おそらくそのHTTPリクエストの重みを上回るので、実際には実用的なソリューションではありません。多分、OPはファビコンをDOMに非同期に挿入できます。
— Yahel
4
@Samごめんなさい、@ ycの意味がわかりました。もちろん<link rel>、JavaScriptを介してブラウザの要素に完全にアクセスできますが、それは可能です。そのようにプログラムされたゲームを見たことさえあります...しかし、IEでも動作しないようで、デフォルトの/favicon.ico検索要求を妨げることはないでしょう
— Pekka
2
@ペッカ、なるほど。PSそれは無敵のゲームです！必要なのは16x16ピクセルのハハだけなので、私の画面全体を恥ずべきことにします。このハイパーリンクは、そのファビコンで実際に可能なことに関していくつかの可能性を開きます。
— Sam
3
ファビコン宣言が欠落している場合、すべてのブラウザーは、/favicon.icoそれを見つける盲目的な試みでデフォルトURLを自動的に要求します。したがって、ファビコンを省略した場合<link>（後でJavaScriptを介して追加するため）、状況が悪化している可能性があります。
— MARÖrlygsson
2
favicon.icoを使用して、透明なgifを保存してください:)
— markijbema
21

次のように、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" />
— ドンシェンカイ
ソース
1
ヒント：この回答で使用されているbase64エンコードされた文字列はPNGファイルであり、IE10以前では機能しません。
— sibbl 2016
2
誰か知りたい場合はLinuxペンギンです。
— Martlark
17

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

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

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>
— フェリックス・ジーネン
ソース
8
74.947の評判のある人が、このページのどこかで「できません！」と言っています。...次に、評判が50未満の別の人が言った：「できます！」これは、ソリューションへの意欲と具体的な革新的な意欲が、得られた評判との関連や関係がないことを意味しますか？...じゃあそれはすごい！
— Sam
4
私は、このソリューションがあることが確認きた動作しません、少なくともではないクロム10およびFirefox 3.6でWindows上-
— MARÖrlygsson
13
私はこのソリューションが機能することを確認しました-少なくともW7 64ビットのChrome 10.0.648およびW7 64ビットのFF 4.0
— Sam
4
LOL、私は上記の2つのステートメントが矛盾しているように見えることを確認しましたが、バージョン番号がわずかに異なるにもかかわらず、Chromeの動作がそれほど変わったとは思えません。Firefoxは3.6から4に変更された可能性がありますが、Chrome 10はマイナーアップデートでそれほど変更されていません。
— ダイスタ
これは、Ubuntu 20.04上のChrome 83およびFirefox ESR 68で機能することを確認できます。また、/ favicon.icoでのヒットを防ぐために機能しないことを確認できます。したがって、イメージを取得しますが、追加のSSL接続を妨げません。それが目標だったので、これは失敗です。
— Wil
14

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

— ペッカ
ソース
1
たぶん私は盲目かもしれませんが、Google検索ファビコンが表示されている唯一の場所はスプライト内にあります：google.com/search
— q
4
@yc google.com/favicon.icoは、ブラウザが自動的に検索する場所です
— Pekka
3
@ycあなたは盲目ではありません、あなたはそこに非常に創造的な答えに値する自分を証明しました... Pekkaがすでに指摘しているように、これ/favicon.icoはブラウザが自動で見る場所です。本当の悪い知らせが来ます：ファビコンが存在しない場合、それはエラー404ペナルティを意味し、わずかな遅延も引き起こします!! このファビコンダンジョンからの脱出はないようです。彼らはとても小さいですが、ああとても強力です...くそー:)
— Sam
適切な方法をスピードアップする適切な方法については、私の回答stackoverflow.com/questions/5199902/…を参照してください。
— マットジョイナー、2011年
8
これは、現実的には、ほぼ永久に1回限りの要求であることに注意してください。他のすべてと同様に、長いキャッシュタイマーとサーバーから返された適切な301は、ファビコンリクエストを根拠のないものにします（存在しない場合を除きます）。
— Kevin
9

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

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

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

— アンディ・デイビス
ソース
8

適切な解決策は、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（シャダー）を使用することをお勧めします。

— マットジョイナー
ソース
7
トランスポート層で行われた最適化のパイプライン化。それでもファビコンへの個別のHTTPラウンドトリップが含まれますが、これが質問の質問です。
— MARÖrlygsson
@MárMrlygsson不正解です。往復とは、クライアントがリクエストを作成し、リクエストが処理されて回答がダウンロードされるのを待つ必要があることを意味します。パイプライン処理とは、前のリクエストが完了するのを待っている間にリクエストがすでに送信されることを意味します。したがって、同じ手順が行われている間、それによって引き起こされる遅延は同じではありません...
— Peter
1
サムはすべてのビジターのブラウザーでパイプラインをオンにすることはできません。そのため、この意味では、このソリューションはサイトの読み込みを速くしません。
— MARÖrlygsson
3
@MárÖrlygssonとその賛成者：トランスポートレイヤーでは行われません。現実のモデルでは、これはすべてアプリケーション層で行われます。理論的には、パイプライン化はセッションレイヤーで行う必要があります。
— マットジョイナー、2011
4
私はそれらのセマンティクスをあなたと議論しません。事実は、サムが「パイプラインを使用」して（そのまま）、訪問者のサイトの読み込みを高速化できないことを保持しています。個人ユーザー。
— MARÖrlygsson
6

質問に対する実際の答えではなく、単にマルセルとヤヘルクによって与えられた答えをほめるためにために、404ファビコンの問題に対するエレガントなソリューションを提供します。

一部のアプリとブラウザー、およびfavicon.comをチェックしないものと、アイコンがサイトルートにない場合は、204応答でリクエストに応答できます。ヘッダー。

Apacheの例：

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

Redirect 204 /favicon.ico

Apacheオプション2：

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

詳細については、http： //www.phpied.com/204-no-content/にStoyan Stefanovによる素晴らしいブログ投稿があります。

— アンソニー・ハツゾプロス
ソース
そうですが、リクエストが作成され、ファビコンが意味のある方法で使用されることが多いので、空の応答ではなくアイコンを提供する価値があると思います。とにかく、gzipでアイコンを圧縮すると、多くの場合、単一のTCPパケットサイズになります
— Andy Davies
5

それは素晴らしいアイデアですが、Googleがホームページでそれを行っていない場合、私はそれが（現在）行うことができないに違いない

— cusimar9
ソース
13
グーグルは素晴らしいですが、そのように考えることは逆効果で窒息しているようです。物事を行うための新しい、より良い、非常に可能な方法は常にあり、業界のリーダーがそれらを思いつくために働く必要はありません。
— 構文エラー
9
明らかに、GoogleはSOからアイデアを受け取りますが、その逆ではありません;）
— user123444555621
3
グーグルが彼らのページをより速くすることができれば、彼らはそうするでしょう。
— David d C e Freitas
5

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

つまり、基本的に2つのオプションがあります。

  1. サイトにファビコンがないことに満足している場合- hrefすでにロードされている非アイコンリソース（たとえば、スタイルシート、スクリプトファイル、またはプリフェッチの恩恵を受けるいくつかのリソース）を指定するだけで済みます。 。）
    （私の簡単なテストでは、これがすべてではないにしても、ほとんどの主要ブラウザーで機能することが示されています。）

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

PSクリエイティブ・ソリューションは動作しません。

  • 奇妙なCSS data-uriトリック（コメンターFelix Geenenがリンク）は機能しません。
  • Javascriptを使用してfavicon <link>要素の遅延注入を実行すると（ユーザー@ycの提案どおり）、2つの HTTPリクエストが発生するため、状況がさらに悪化する可能性があります。
— マル・アライグソン
ソース
1
機能しない他のソリューション：.ico内の複数のアイコン、およびファビコンとしてではなく別の画像が表示されることを期待して、イメージタグでicoを使用します。ファビコンを別のファイルと一緒に作成します。
— markijbema 2011年
3

ICO形式の代わりに8ビットPNGを使用して、データフットプリントをさらに小さくすることができます。変更する必要があるのは、「data：image / x-icon」MIMEタイプヘッダーの代わりに「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を使用してICOを8ビットpngに変換するか、次のように変換できます。

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

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

base64 favicon.png
— アンドレイジ
ソース
2

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

<!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>

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

— rjobidon
ソース
1
リンゴのアイコン？
— スタイル
2

2020年のキラーソリューション

このソリューションは、質問が最初に質問されてから9年後に必ず発生し.svgます。これは、ごく最近まで、ほとんどのブラウザーはファビコンをフォーマットで処理することができなかったためです。

それはもう当てはまりません。

参照：https : //caniuse.com/#feat=link-icon-svg

1）ファビコン形式としてSVGを選択します

現在、2020年6月に、これらのブラウザーはSVGファビコンを処理できます。

  • クロム
  • Firefox
  • 縁
  • オペラ
  • Android向けChrome
  • KaiOSブラウザ

ただし、これらのブラウザでは次のことはできません。

  • サファリ
  • iOSサファリ
  • Android版Firefox

上記を念頭に置いて、SVG Faviconを自信を持って使用できます。

2）SVGをデータURIとして提示する

ここでの主な目的は、HTTPリクエストを回避することです。

他のソリューションが述べたように、これを行うかなり賢い方法は、HTTP URLではなくデータURIを使用することです。

SVG（特に小さなSVG）はデータURIに完全に適しています。後者は単純なプレーンテキスト（パーセンテージでエンコードされた曖昧な文字がある可能性がある）であり、前者はXMLであるため、長いテキストのプレーンテキストとして（少しずつ）書き出すことができるためです。パーセンテージコードの）信じられないほど簡単に。

3）SVG 全体が絵文字です

2019年12月、Leandro LinaresはChromeがFirefoxに参加してSVGファビコンをサポートして以来、絵文字からファビコンを作成できるかどうか試してみる価値があることを最初に認識した人物の1人でした：

https://lean8086.com/articles/using-an-emoji-as-favicon-with-svg/

リナレスの直感は正しかった。

数か月後（2020年3月）、Code Pirate Lea Verouは同じことを実現しました。

https://twitter.com/leaverou/status/1241619866475474946

そして、ファビコンは二度と同じではありませんでした。

4）ソリューションを自分で実装する：

簡単なSVGは次のとおりです。

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 16 16">

  <text x="0" y="14">🦄</text>
</svg>

そして、これがデータURIと同じSVG です：

data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E

そして最後に、ファビコンとしてのData URIを次に示します。

<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />

5）その他のトリック

FaviconはSVGであるため、任意の数のフィルター効果（SVGとCSSの両方）をそれに適用できます。

たとえば、上のホワイトユニコーンファビコンと並んで、フィルターを適用してブラックユニコーンファビコンを簡単に作成できます。

style="filter: invert(100%);"

ブラックユニコーンファビコン：

<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%20style='filter:%20invert(100%);'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />
— ルーニン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.