[解決済み] 小さなファビコンのために、別の貴重なHTTP-requestを節約する方法は？

2022-03-16 09:15:37

質問

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

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

しかし、数バイトの小さなアイコンのためだけに さらにもう1つ、スピードが落ちる可能性のあるHTTPリクエスト .

そこで、どうすればあのファビコンを使えるスプライトの一部にできるのだろうかと考えました（例． background-position=0px -200px; そのため、サイトを高速化し、貴重な HTTP リクエストを節約するために、ウェブサイトの他の部分で、たとえばロゴの役割を果たします。どうすれば、ロゴや他のアートワークと一緒に、既存のスプライトイメージに入れることができるでしょうか？

解決方法は？

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

なぜなら、ごく最近まで、ほとんどのブラウザは、ファビコンを .svg の形式を使用します。

もう、そんなことはないんです。

ご覧ください。 https://caniuse.com/#feat=link-icon-svg

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

今現在、2020年6月に、これらのブラウザが扱えるのは SVGファビコン :

クローム
ファイアフォックス
エッジ
オペラ
Android版Chrome
KaiOSブラウザー

注意点 これら ブラウザではまだできません。

サファリ
iOSのSafari
Android版Firefox

とはいえ、上記を踏まえて、今度は SVGファビコン を、それなりの信頼感を持って使うことができます。

2) SVGをデータURLとして提示する

ここでの主な目的は、HTTP Requestsを避けることです。

このページの他のソリューションが言及しているように、これを行うかなりスマートな方法として データURL ではなく HTTP URL .

SVG（特に小さなSVG）には、以下のような特徴があります。 完璧に というのも、後者は単純なプレーンテキスト（潜在的に曖昧な文字はパーセントエンコードされている）であり、前者はXMLであるため、プレーンテキストの長い行として（パーセントコードが散見される）信じられないほど簡単に書き出すことができるのです。

3)その全体 SVGは1つの絵文字

<ブロッククオート

N.B. このステップは任意です。あなたのSVG 可能は1つの絵文字ですが、もっと複雑なSVGにすることも可能です。

2019年12月に レアンドロ・リナレス は、ChromeがFirefoxに続いてSVGファビコンをサポートしたため、絵文字からファビコンを作成できるかどうか実験する価値があることに最初に気づいた一人です。

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

リナレスの予感は的中した。

数ヶ月後（2020年3月）、コード・パイレートは レア・ヴェロウ が同じことに気づいたのです。

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

そして、ファビコンは二度と同じものではなくなりました。

4) 自分で解決策を実行する。

簡単なSVGを紹介します。

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

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

そして以下は、同じSVGを データURL :

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

そして、最後にご紹介するのが、こちら データURL をファビコンにしました。

<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%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'%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" />