多くの有名なfaviconは、たった2文字で構成されています。今ブラウザタブを見てみてください。HN、GH、MDN、AWS。モノグラムfaviconが16x16ピクセルのグリッドでも識別できる理由は、詳細なロゴがノイズに潰れてしまうような小さなサイズでも、文字形状は判読性を保てるからです。
このガイドでは、あらゆるタブ、あらゆるデバイス、ダークモードでも鮮明に表示される、イニシャルベースのfaviconの作り方を順を追って解説します。
なぜイニシャルがfaviconとして機能するのか
イニシャルはブランドの本質を可能な限り小さい視覚単位へと圧縮します。16x16サイズでも2文字ははっきり読めますが、詳細なロゴは判別不能になります。デザインシステムを持たないMVPやサイドプロジェクト、社内ツールにとって、イニシャルベースのfaviconはプロフェッショナルなタブ表示を実現する最短ルートです。
また、フルロゴをfaviconとしてアップロードしてしまうよくあるミスも回避できます。フルロゴは縮小処理を経るとほぼ使い物にならないからです。
必要なもの
- プロジェクトやブランドを表す1〜3文字
- 高いコントラストを持つ色の組み合わせ（文字色と背景色）
- Mzu favicondl（favicon一式を生成するツール）
ステップ・バイ・ステップ：イニシャルfaviconを構築する
1. 文字形状を選ぶ
1文字が最速、2文字がより明瞭に読めます。3文字は16x16ピクセルが窮屈になる実用上の限界です。小サイズでは『Il』や『rn』など、視覚的に似た形状の組み合わせは避けてください。ノイズに混じって判別できなくなります。
2. タイポグラフィの方針を決める
方法は2つあります。システムフォントスタックでネイティブにレンダリングするか、自分でデザインしたカスタム字形を使うかです。多くのプロジェクトでは、ボールドのサンセリフ体（Inter、SF Pro、Helvetica）が適しています。太いストロークは縮小時も残りやすく、細いセリフ体より有利だからです。
3. HTMLとCSSでモノグラムをプロトタイピングする
モノグラムを最速でプロトタイピングする方法は、HTML要素とCSSで表示し、スクリーンショットを撮ってSVGとして扱うことです。
<div style='width:64px;height:64px;background:#0a0a0a;color:#fff;display:grid;place-items:center;font:700 32px/1 system-ui;border-radius:12px;'>HN</div>これをブラウザでレンダリングしてスクリーンショットを撮り、Mzu favicondlの素材として使ってください。
4. favicon一式を生成する
Mzu favicondlを開き、モノグラムをアップロードして一式をエクスポートします。モダンブラウザ向けSVG、レガシー向けPNGフォールバック、旧デスクトップ向けICO、iOS向けApple Touch Iconがすべて揃い、必要なサイズはツールが自動で処理します。
5. ダークモード用バリアントを追加する
ユーザーがダークブラウザchromeを有効にすると、暗い背景上の明るい文字が消えてしまうことがあります。反転したカラーペアを作成し、HTML Living Standardのrel=icon仕様で定義されているprefers-color-schemeメディアクエリで両バージョンをリンクします。
<link rel='icon' href='/favicon.svg' type='image/svg+xml' media='(prefers-color-scheme: light)'>
<link rel='icon' href='/favicon-dark.svg' type='image/svg+xml' media='(prefers-color-scheme: dark)'>6. HTMLを<head>に配置する
ドキュメントの<head>内、最初の一連の要素としてlinkタグを配置してください。これにより、ブラウザがページ本文を解析する前にfaviconを検出できます。
よくある落とし穴
- 細すぎるフォント：2px未満のストロークは16x16では消えます。常にウェイト600以上を選びましょう。
- コントラスト不足：白背景上のライトグレーはブラウザタブ上でほぼ見えません。少なくとも4.5:1のコントラストを目指してください。
- 余白過多：モノグラムはタイトなバウンディングボックスが必要です。余白は30%ではなく10〜15%に抑えましょう。
- ダークモードの放置：ライトモード用のfaviconはダークブラウザchrome上で見えなくなることがあります。ダークモード用アイコンは最初から設定しておきましょう。
まとめ
イニシャルfaviconは、あらゆるWebプロジェクトに対して出せる最も低コストなプロフェッショナル施策です。2文字と1つのカラーペア、そしてMzu favicondlでの5分があれば、16x16ピクセルでもダークモードでも、どのブラウザでも通用するタブアイコンが手に入ります。