シングルファイルのHTMLダッシュボードや軽量なオフラインツールを構築したことがあるなら、外部アセットの管理がいかに面倒かご存知でしょう。すべてを1つのファイルに綺麗にまとめたいのに、ブラウザはアイコンが見つからないと404エラーを吐き出し、タブには真っ白な四角が表示されてしまいます。この特有のシナリオに対する最もスマートな解決策が、favicon base64 inline（Base64インライン化）です。

サーバー上の外部画像ファイルにリンクする代わりに、画像データを直接HTML文字列としてエンコードします。MercariやLINEなどの開発チームでも、社内用の単一ファイル診断ツールでこの手法が使われているのを見かけます。これにより、オフライン環境でもアイコンが瞬時に読み込まれ、プロジェクトを完全に独立させることができます。

Favicon Base64 Inlineの実装方法

アイコンのインライン化は簡単ですが、HTMLを肥大化させないためには少しの工夫が必要です。具体的な手順は以下の通りです。

ステップ1：元画像を最小限にする

Base64エンコードを行うと、元のファイルサイズから約33%増加します。512x512の巨大なPNGをエンコードすると、HTMLのhead部分が悲惨なことになります。最適化された16x16または32x32のPNGに留めるか、さらに言えば、文字列が短くなりやすいモダンなSVGアイコンを使用するのがベストです。

ステップ2：Base64文字列を生成する

ターミナルで base64 -i icon.png（macOS/Linux）のようなコマンドを実行して生成できます。視覚的なツールが好みなら、画像をMzu favicondlにドロップするだけで、最適化されたコピペ用の文字列が取得できます。

ステップ3：HTMLコードを追加する

文字列を取得したら、linkタグの href 属性に直接配置します。data:image/png;base64, というプレフィックスに注目してください。これが、ブラウザに巨大なテキストブロックの解析方法を指示します。

<link rel='icon' type='image/png' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA...' />

いつ使うべきか（そして使うべきでないか）

このテクニックを乱用する開発者をよく見かけます。これは特殊なツールであり、デフォルトの戦略ではありません。適切な使いどころを知る必要があります。

Base64文字列を短く保ち、スタンドアロンのHTMLファイルでのみ使用して、すっきりとしたブラウザタブの体験を楽しんでください。