ブラウザのタブを細めて見て、「なぜこのブランドのロゴは茶色のシミみたいに見えるんだろう？」と思ったことはありませんか？それは、favicon color palette（ファビコンのカラーパレット）の設計に失敗している典型的な例です。多くの開発者は、5色も使った複雑なロゴをそのまま16x16ピクセルに縮小して、うまくいくことを祈ってしまいます。（残念ながら、それは決してうまくいきません。）

ファビコンのカラーパレットとは？

ファビコンのカラーパレットとは、ブランドの視覚的アイデンティティを極限まで凝縮したものです。16x16という極小サイズでは、グラデーションやシャドウ、複雑な色変化は使えません。爪の先ほどのサイズでもはっきりと区別できる、2〜3色の高コントラストな色の組み合わせが必要です。

視認性を左右するのは「コントラスト」

50個ものタブが開いているブラウザの中で、あなたのアイコンは白、グレー、そして黒に近い背景色と戦っています。Stripeはこの使い方が非常に巧みです。彼らは鮮やかなパープルを使用しており、どんなブラウザのUIでも埋もれることがありません。コントラストが不足していると、アイコンはブラウザの枠と同化してしまい、ブランド認知という本来の役割を果たせなくなります。

「3色ルール」を徹底する

パレットは最大3色までに制限してください。理想は、1つのメインブランドカラーと、1つの高コントラストなアクセントカラー（白や明るいセカンダリカラー）の組み合わせです。3色を超えると「ピクセルのにじみ」が発生し、ブラウザのアンチエイリアス処理によってアイコンがぼやけて見えてしまいます。シャープなアイコンを作るコツについては、ファビコンデザインのヒントをご覧ください。

ダークモードへの適応

2026年現在、固定されたカラーパレットはリスクでしかありません。ユーザーはライトモードとダークモードを頻繁に切り替えます。もしパレットがダークブルーだけで構成されていたら、Safariのダークタブバーでは消えてしまいます。私はSVGファビコンの使用を強く推奨します。CSSメディアクエリをアイコンファイルに直接埋め込めるからです。

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    path { fill: #6366f1; }
    @media (prefers-color-scheme: dark) {
      path { fill: #818cf8; }
    }
  </style>
  <path d='M0 0h32v32H0z'/>
</svg>

多様な環境でのテスト

色を確定する前に、3つの背景色（#FFFFFF、#1A1A1A、Chromeの非アクティブタブのグレー）でテストしてください。どの背景でもアイコンが「浮き出て」見えない場合は、彩度を上げるか、アウトラインを追加する必要があります。より高度な対応が必要な場合は、ファビコンのダークモード対応ガイドをチェックしてください。

ファビコンを単なる「小さなロゴ」と考えるのはやめましょう。これは高性能なUI要素です。2つの大胆な色を選び、ダークモードに対応させ、シンプルさを保つこと。それがユーザーの利便性に直結します。