Favicon Tools検証作成
Formats

絵文字をファビコンとして使う

アイコンの link を、絵文字をテキストとして保持するインライン SVG のデータ URI に向ければ、画像ファイルを一切使わずに絵文字をファビコンに設定できます。モダンブラウザで即座に機能します。優れたプレースホルダーですが、絵文字は OS 自身のフォントで描かれるため、Windows・macOS・Android・iOS で見た目が異なり、/favicon.ico やホーム画面アイコンは満たしません。手早い出発点を超える用途には、本物のセットを書き出しましょう。

1 行、ファイル無し

こつはインライン SVG のデータ URI です。link の href が、絵文字を text 要素として描く SVG なので、ホストする別の画像がありません。モダンブラウザはそれをタブに即座にレンダリングするため、制作中の完璧なプレースホルダーになります。

絵文字自体は、閲覧者の OS が備える絵文字フォントで描かれるので、同じファビコンが各プラットフォームで微妙に(あるいはそれほど微妙でなく)異なって見えます。

その 1 行

<link
  rel="icon"
  href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦊</text></svg>"
/>

任意の絵文字に差し替えられます。本番では特殊文字を URL エンコードしてください。生の山かっこをデータ URI に入れると、うるさいブラウザがあります。

絵文字ファビコンに関するよくある質問

絵文字をファビコンとして使えますか?

はい、絵文字をテキストとして描くインライン SVG のデータ URI 経由で。画像ファイル無しでモダンブラウザで機能するので、手早いプレースホルダーとして便利です。

なぜ私の絵文字ファビコンはデバイスごとに違って見えるのですか?

絵文字が OS 自身の絵文字フォントで描かれるからです。Apple、Google、Microsoft はそれぞれ同じ絵文字を異なって描くので、あなたのファビコンもその違いを受け継ぎます。

絵文字ファビコンは本番に十分ですか?

唯一のアイコンとしては、いいえ。/favicon.ico やホーム画面をカバーせず、プラットフォーム間で見た目が一貫しません。出発点として使い、公開時には適切なセットを書き出しましょう。

関連用語