ゴミに見えないFaviconの作り方

今すぐブラウザのタブを開いてください。Faviconだけで識別できるのはいくつありますか？

おそらくほとんど。その16x16ピクセルの正方形は、ブランド認識のために真剣に働いています。GoogleのカラフルなG。Twitterの鳥。GitHubのオクトキャット。瞬時に分かります。

そして、デフォルトの空白ページアイコンがあるあなたのサイト。あるいはもっと悪いのは、500ピクセルでは素晴らしく見えたロゴが、16ピクセルでは認識できない染みになっていること。

Faviconが無視される理由

ほとんどの人はロゴをデザインし、サイトを構築し、最後の瞬間にFaviconを思い出します。「ロゴを縮小すればいい」というのは合理的に聞こえます。めったにうまくいきません。

16x16ピクセルの詳細なロゴは泥になります。テキストは判読不能。細い線は消えます。色が混ざります。

良いFaviconは小サイズ向けに設計されるもので、大きいものから適応させるものではありません。

小サイズで機能するもの

シンプルな形。 1文字。基本的な幾何学形状。2秒で認識できるもの。

高コントラスト。 暗い背景に明るい、または明るい背景に暗い。微妙なグラデーションは小サイズで消えます。

太い線。 細いストロークは消えます。太くて明確な形が縮小に耐えます。

限られた色数。 最大2～3色。複雑なパレットはノイズになります。

実際に必要なサイズ

ブラウザ、OS、デバイスはすべて異なるサイズを要求します：

• 16x16 - ブラウザタブ（最重要）
• 32x32 - タスクバー、ショートカット
• 48x48 - Windowsデスクトップ
• 180x180 - Apple touchアイコン
• 192x192 - Android Chrome
• 512x512 - PWAスプラッシュスクリーン

各サイズを手動で作成することもできます。あるいは1つのソース画像からすべてを出力するジェネレーターを使うこともできます。

よくある失敗

フルロゴを使う。 16ピクセルで「RunToolz」というテキスト？読めません。アイコン部分を使うか、簡略版を作りましょう。

ダークモードを忘れる。 黒いアイコンはダークブラウザテーマで消えます。微妙な境界線を追加するか、明るいバージョンを作ることを検討しましょう。

背景を無視する。 文脈によってFaviconは白背景、暗い背景、選んだ色背景で表示されます。3つすべてでテストしましょう。

低解像度ソース。 少なくとも512x512で始めましょう。縮小は機能します。拡大はぼやけを生みます。

クイックプロセス

1. ロゴやブランドマークから始める
2. 最も認識可能な要素に簡略化
3. まず16x16で機能させる
4. そこから拡大し、役立つ場所にのみディテールを追加
5. デザインツールだけでなく、実際のブラウザタブでテスト

---

Faviconは、洗練されたサイトと素人サイトを分ける小さなディテールの1つです。うまくやるのに10分かかります。タブをちらっと見るたびに違いを生みます。