データURIでファビコンを作成する

データURIファビコン

ファビコンは<link>タグでデータURIとして指定でき、個別のfavicon.icoファイルリクエストの必要性を排除できます。これはシングルページアプリケーション、ドキュメントサイト、クイックプロトタイプに特に便利です。

基本的な実装

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

SVGファビコン（モダンブラウザ）：

<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%94%A7%3C/text%3E%3C/svg%3E" />

JavaScriptによる動的ファビコン

データURIにより、アプリケーションの状態に基づいて変化する動的ファビコンが可能になります：

function setFavicon(emoji) {
  const svg = \`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">\${emoji}</text></svg>\`;
  const link = document.querySelector("link[rel='icon']");
  link.href = "data:image/svg+xml," + encodeURIComponent(svg);
}
setFavicon("🔴");

ブラウザサポート

すべてのモダンブラウザがデータURIファビコンをサポートしています。Safariは非ICOフォーマットにtype属性を必要とします。最大互換性のために、SVG（データURI）と従来の.icoフォールバックの両方を提供してください。