絵文字 favicon: 1 行だけ、画像ファイル不要
ファイルも、ジェネレーターも、アップロードも不要。1 行を貼り付ければ、タブにアイコンが表示されます。
その 1 行
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">ロケットを好きな絵文字に差し替えてください。%22 の並びは URL エンコードされた二重引用符で、SVG 全体が href の中で無事に保たれます。
仕組み
ここに画像はありません。href はごく小さな SVG を格納した data URI で、その SVG は絵文字を入れた単一の <text> 要素です。ブラウザは SVG をそのままタブに描画するので、生成・ダウンロード・アップロードという一連の流れをまるごと省けます。
サイズ調整は viewBox と font-size が担います。y=".9em" の微調整でグリフを下げ、上端で切れずにボックス内に収まるようにします。トリックはそれだけです。
制約
オペレーティングシステムの絵文字フォントで描画されるため、同じ絵文字でも macOS、Windows、Android で見た目が異なります。デザインは制御できません。
カバーするのはタブだけです。本物の /favicon.ico ではないため、そのパスをリクエストするクローラーや古いクライアントは何も見つけられず、実際の PNG ファイルを必要とする iOS のホーム画面や Android のランチャーには何の役にも立ちません。
本番環境では特殊文字を URL エンコードしてください。href の中の生の < や > や引用符は、パースを壊したり、厳格なコンテンツポリシーに引っかかったりします。上記スニペットのようにエンコードしておけば、堅牢さが保たれます。
よくある質問
絵文字を favicon に使うには？
favicon リンクの href を、<text> 要素に絵文字を入れた小さなインライン SVG を含む data URI に設定します。HTML 1 行で済み、画像ファイルは不要です。
なぜ絵文字 favicon は他のデバイスで見た目が違うのですか？
各デバイス独自の絵文字フォントで描画されるため、macOS、Windows、Android でデザインが異なります。一貫した見た目が必要なら、本物の画像アイコンを使ってください。
絵文字 favicon はホーム画面のアイコンに使えますか？
いいえ。カバーするのはブラウザのタブだけです。iOS のホーム画面や Android のランチャーには、apple-touch-icon と manifest から参照される実際の PNG ファイルが必要です。