ファビコン・ICO を Base64 に変換

ファビコンを Base64 に変換する方法

1. favicon.ico、PNG、SVG を枠にドロップするか、ファイル選択で選びます。
2. PNG の場合は 最大幅 を 32（または 48）にしておくと、512 ピクセルのアプリアイコンをうっかり埋め込まずに済みます。ICO と SVG はそのままエンコードされます。
3. 出力形式 は Data URI になっています。コピーして href に貼り付けてください。

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

プレビューにはアイコンとそのピクセルサイズが表示されるので、貼り付ける前に PNG が本当に 32×32 かどうか確認できます。

ICO、PNG、SVG のどれを使うか

favicon.ico には 16×16、32×32、48×48 の画像がまとめて入っていることが多く、そのすべてが Base64 に含まれるため、文字列が思ったより長くなります。ブラウザのタブ用なら、32×32 の PNG を 1 つ変換すれば通常は十分です。

SVG のファビコンは、SVG 内の prefers-color-scheme メディアクエリでダークモードに反応させられます。古い Safari をサポートするなら、フォールバックとして PNG も用意しておいてください。

ファビコンを埋め込むのが向いている場面

• 単一ファイルの HTML：書き出したレポート、オフラインのドキュメント、1 ファイルで保存したダッシュボードなど。相対パスの favicon.ico は、ファイルを移動するとどこも指さなくなります。
• 社内ツールやローカルサーバー：静的ファイルのルートを追加するより、HTML 1 行で済ませるほうが楽な場合。
• 動的なファビコン：通知バッジやステータスの色を canvas に描き、link.href = canvas.toDataURL("image/png") で適用する場合。

普通の Web サイトなら、アイコンは別ファイルにするほうが適しています。ブラウザは一度取得してキャッシュしますが、埋め込んだファビコンは配信するすべての HTML ページで繰り返されます。

JavaScript でファビコンを描く

ステータス表示なら、ファイルはそもそも必要ありません。32×32 の canvas に描いて、既存のアイコンリンクに Data URI を代入します。

const canvas = document.createElement("canvas");
canvas.width = canvas.height = 32;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#e33";
ctx.beginPath();
ctx.arc(16, 16, 14, 0, Math.PI * 2);
ctx.fill();
document.querySelector('link[rel="icon"]').href = canvas.toDataURL("image/png");

アイコンが変わらないとき

• 古いアイコンが表示され続ける。 ブラウザはファビコンを強力に、しかもページとは別にキャッシュします。キャッシュなしで再読み込みするか、プライベートウィンドウで開くと新しいアイコンが見られます。
• 何も表示されない。 href が正しいタイプで始まっているか確認してください。data:image/png;base64,、data:image/x-icon;base64,、data:image/svg+xml;base64, のいずれかです。SVG のアイコンは、ルート要素に xmlns 属性も必要です。
• <link rel="icon"> タグが複数ある。 ブラウザはタイプとサイズで選ぶので、埋め込んだアイコンがほかに宣言されたアイコンに負けることがあります。不要なものは削除してください。

ファイルに戻す

Data URI から favicon.ico を取り出すには Base64 を ICO に変換 を使います。SVG のアイコンなら、SVG を Data URI に変換 で URL エンコード版も作れます。こちらは Base64 より短くなることがよくあります。

よくある質問