ファビコンのベストプラクティス

文字数

1 文字がいちばん向いています。ファビコンは 16×16 から 32×32 ピクセルと小さいので、1〜2 文字がいちばん読めます。長い文字は潰れて、ごちゃついて見えます。

フォント選び

小さいサイズでも読めるフォントを選んでください。

• 太字： 細字やライトより、太めの方が見えます
• サンセリフ： 小さいサイズでは、一般に読みやすいです
• 縮小すると読めなくなる装飾フォントやスクリプト体は避けてください
• 見え方の確認： 確定前に、必ず実サイズ（16×16 ピクセル）でプレビューしてください

色のコントラスト

文字と背景のコントラストを高くしてください。ファビコンは明るい、暗い、色付きなど、ブラウザの背景が変わります。どの環境でも見えるようにしてください。小さいサイズで溶け合う近い色は避けてください。

シンプルさ

デザインは単純に、余白を残してください。細かいディテールは小さいサイズで消えます。ブランドやサイトを表す、はっきりした要素を 1 つに絞ってください。

形式の選び方

必要なサイズ

デバイスや表示場所に合わせて、複数サイズを用意してください。

• 16×16 ピクセル： ブラウザタブの標準サイズ
• 32×32 ピクセル： 高 DPI ディスプレイや、一部のブラウザ表示
• 180×180 ピクセル： iOS ホーム画面向け Apple Touch Icon
• 192×192 と 512×512 ピクセル： Android のホーム画面アイコンと PWA 対応

注：常に最大サイズ（512×512）で描き、縮小してください。小さいサイズから拡大すると、どのサイズでも品質が落ちます。

ブラウザ互換

Chrome、Firefox、Safari、Edge と、デスクトップ、モバイル、タブレットで確認してください。ブラウザごとに扱いが少し違うので、見た目を揃えるには一通り試す必要があります。

ロゴ全体を使う

極端に単純な場合を除き、会社ロゴ全体は使わないでください。ほとんどのロゴは 16×16 ピクセルでは識別できません。簡略版、モノグラム、ブランドの記号を使ってください。

コントラストの低いデザイン

要素同士のコントラストが低いと、小さいサイズで見えなくなります。ブラウザのテーマや背景が変わっても見えるよう、十分な差を取ってください。

ファイル配置の誤り

ファビコンファイルは正しいディレクトリ（通常は public または static）に置き、HTML の link タグが正しいパスを指すようにしてください。

サイズ不足

1 サイズだけだと互換性が落ちます。16×16、32×32、180×180、192×192、512×512 を含め、どのデバイスでもきちんと見えるようにしてください。

確認しない

公開前に、複数のブラウザとデバイスで必ず確認してください。あるブラウザでは良くても、別のブラウザでは崩れることがあります。開発者ツールで読み込みも確認してください。