ブラウザタブ用 標準16x16と32x32 Favicon

標準ブラウザタブFavicon: 16x16と32x32

16x16と32x32ピクセルのFaviconは最も基本的なサイズで、ユーザーが最も頻繁に目にするものです。ブラウザタブ、アドレスバー、ブラウザ履歴、ブックマークリストに表示されます。

16x16の課題

16x16ピクセルでは、わずか256ピクセルのキャンバスしかありません。この極端な制約は以下を意味します：

• テキストは読めない — 1文字でもこのサイズではほとんど収まらない
• 細かいディテールは消える — 細い線、グラデーション、微妙な特徴は失われる
• 色がより重要になる — 太字で高コントラストの色の組み合わせが不可欠
• シンプルな形が勝つ — 明確なシルエットを持つ幾何学的なアイコンが最適

32x32の利点

32x32サイズは16x16の4倍のピクセル数を提供します。これにより：

• やや多くのディテールと定義が可能
• カーブや対角線でのより良いアンチエイリアシング
• 小さなテキスト要素（1〜2文字）が実現可能に
• グラデーションを控えめに使用可能

ピクセルヒンティング

小さいサイズで最も鮮明な結果を得るには、ピクセルヒンティング — キーとなるエッジがピクセルグリッドに正確に揃うようにデザインを手動で調整する技法を検討してください。これにより、線がピクセル間に落ちた際のアンチエイリアシングによるぼやけを防ぎます。

ファイル形式の考慮事項

16x16と32x32では、PNGが標準形式です。従来のICO形式は両方のサイズを単一ファイルにバンドルでき、一部の古いブラウザは/favicon.icoにこれを期待します。モダンブラウザは<link>タグで参照されるPNGファイルで完全に動作します。