Favicon Tools検証作成
Formats

データ URI(base64)ファビコン

データ URI ファビコンは、ファイルを指す代わりに画像を base64 テキストとして link タグに直接埋め込み(href="data:image/png;base64,...")、HTTP リクエストを 1 つ減らします。ブラウザのタブには機能しますが、URL でアイコンを取得するあらゆる場所(/favicon.ico リクエスト、apple-touch-icon、マニフェストアイコン、クローラー、リンク展開ボット)では壊れます。したがって本物のファイルの代わりにはなりません。

得られるもの、失うもの

アイコンを base64 でインライン化すると、リクエストを 1 つ節約できます。画像は HTML の中を移動するので、ブラウザはタブ用に別ファイルを取得しません。レイテンシに敏感なページ上の小さなアイコンには、魅力的に見えることがあります。

問題は、あなたの HTML を読まないものすべてです。/favicon.ico をパスでリクエストするクローラーやリンク展開ボットは何も得られません。iOS は本物の apple-touch-icon ファイルを求め、Android はマニフェストに記載されたファイルを読みます。どれも、一つの link タグの中にテキストとしてのみ存在するアイコンは使えず、しかも base64 の塊はそれが載るすべての HTML レスポンスを肥大化させます。

どう見えるか

<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />

タブには問題ありませんが、URL でアイコンをリクエストするものには見えません。

データ URI ファビコンに関するよくある質問

base64 ファビコンは使えますか?

ブラウザのタブには使えます。しかし /favicon.ico リクエスト、apple-touch-icon、マニフェスト、クローラーは満たさないので、実サイトでは本物のファイルを補うことしかできず、置き換えはできません。

インラインファビコンは iOS のホーム画面で機能しますか?

いいえ。iOS のホーム画面は apple-touch-icon を使い、それは取得できる実ファイルでなければなりません。ファビコンの link 内のデータ URI は、ホーム画面には何もしません。

データ URI ファビコンはパフォーマンスに良いですか?

小さなリクエストを 1 つ減らしますが、エンコードした画像を、それを運ぶすべての HTML レスポンスに埋め込みます。どのみち初回読み込み後は強くキャッシュされるアイコンにとって、節約は通常ごくわずかで、肥大化はそうではありません。

関連用語