ファビコンのUX:優れたファビコンの条件

優れたファビコンとは、シンプルでコントラストの高いマーク(多くの場合はロゴマーク、または1〜2文字)であり、明るいブラウザタブでも暗いブラウザタブでも16x16ピクセルで読み取れ、ブランドに合っていて、めったに変更されないものです。このガイドで扱うそのほかのすべて(ピクセルの整列、色、余白、透過、ファイルサイズ)は、次の目的のためにあります。開いている何十ものタブの中でも、あなたのサイトがすぐに見つかるようにすることです。

ファビコンは小さなものですが、さまざまな場所に表示されます。ブラウザのタブ、ブックマークバー、履歴リスト、タブ検索メニュー、モバイルとデスクトップのGoogle検索結果、スマートフォンのホーム画面などです。たくさんのタブを開いているユーザーにとっては、タイトルが省略されて何も表示されないことが多く、アイコンだけが唯一の手がかりになります。つまりファビコンは、飾りではなく、れっきとしたナビゲーション要素なのです。

1. 16x16での視認性

ファビコンの標準サイズは16x16 CSSピクセルです。通常のディスプレイでは文字どおり256ピクセルしかなく、2倍のRetinaディスプレイでは、同じ領域に対してブラウザが通常32x32の画像を選びます。どんなデザインでも、この縮小に耐えられなければなりません。

シンプルに保つ

• 1つの図形、または1〜2文字。太い1文字、記号入りの円、シンプルな幾何学マークなどが適しています。3文字以上や単語にするとノイズになってしまいます。
• 焦点は1つ。アイコンを5語で説明できないなら、複雑すぎます。
• グラデーション、影、細かいテクスチャは使わない。小さなサイズではぼやけた染みになります。

ピクセルグリッドに合わせる

16x16では、グリッドから半ピクセルずれた線がアンチエイリアスで2行のピクセルにまたがり、灰色でぼんやりして見えます。エッジはピクセルの境界に合わせて配置し、図形が対称な場合は偶数の幅を使いましょう。ベクターツールから書き出す場合は、ピクセルスナップを有効にするか、縮小した結果を確認して手作業で修正してください。

細い線を避ける

16x16で2ピクセルより細い線(アイコン幅の約12パーセント)は、消えたりサイズによってちらついたりしがちです。線を太くし、内側のディテールを取り除き、小さな隙間は埋めましょう。細部まで忠実に再現したミニチュアよりも、太めでやや重たい字形のほうが読みやすいことがよくあります。

手作業でヒンティングする

ICOやPNGにはフォントのようなヒンティングがないため、手作業でのピクセル編集がその代わりになります。1ピクセルずつ調整して、曲線、斜め線、カウンター(「a」や「e」のような文字の穴)をくっきり保ちます。自動縮小は最初の下書きとしては優秀ですが、手で数ピクセル置くだけで、ただの塊と認識できる文字との差が生まれることがよくあります。MakeFavのピクセルエディターはそのために作られています。16x16のキャンバスを開き、問題のあるピクセルを修正して、書き出しましょう。

2. 明るいタブと暗いタブでのコントラスト

現在、ブラウザをダークモードで使うことは珍しくなく、ページのテーマとタブバーの配色が異なるユーザーも多くいます。背景が透明の濃紺アイコンは、白いタブでは完璧でも、濃いグレーのタブではほとんど見えなくなることがあります。必ず両方でテストしてください。

実践的な解決策

• 背景の図形を加える。ブランドカラーのベタ塗りの角丸四角形や円を置けば、タブに関係なくマーク自体のコントラストが確保されます。
• 細いアウトラインやハローを使う。暗い字形の周りに1pxの明るい縁取り(またはその逆)を付けると、どちらのテーマでもシルエットが見えます。ただし16x16ではくっきり保つ必要があるので、テストしてください。
• 中間トーンのブランドカラーを選ぶ。鮮やかな青、オレンジ、緑、マゼンタなどの色は、白い面にも黒に近い面にも通常よく合います。非常に明るい黄色や非常に暗い濃紺は危険です。
• 適応型のSVGファビコンを使う。SVGには prefers-color-scheme メディアクエリを含められるため、システムのテーマに合わせてアイコンを変化させられます。

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

このメディアクエリが反映するのはOSまたはブラウザのテーマであり、タブバーも通常はそれに従いますが、常にそうとは限りません。SVGファビコンのサポート状況もまちまちで、ChromeとFirefoxは対応していますが、Safariは歴史的に対応が遅れているため、PNGまたはICOのフォールバックを必ず用意してください。ベタ塗り背景のデザインは、テーマ判定のロジックがまったく不要なので、最も堅牢な選択肢です。

3. 認識しやすさとブランドの一貫性

ワードマークを含むロゴ全体のレイアウトではなく、ロゴマーク(シンボルやモノグラム)を使いましょう。16x16のアイコン内の文字は読めませんし、横長のロゴを正方形に縮めると、中央に細い帯が残るだけになります。

• ブランドにシンボルがあるなら、単に縮小するのではなく、小さなサイズ向けに簡略化しましょう。ディテールを減らした「ファビコン用バージョン」を作るのは標準的なやり方です。
• ブランドがワードマークのみの場合は、頭文字、または特徴的な2文字を選び、ブランドの書体の太いウェイトで組みます。
• 色はロゴ、アプリアイコン、SNSのアバターと統一し、ユーザーがどこでも同じブランドだと認識できるようにしましょう。

忠実さと同じくらい、独自性も重要です。タブが並んでいる様子を見てください。ほかの3つのサイトも青い円を使っていたら、あなたのサイトは目立ちません。完璧に忠実な縮小版よりも、異なる形や色のほうが役に立ちます。

4. 色:限られた彩度の高いパレット

ピクセル数が少ないため、色を増やすたびにごちゃごちゃします。1〜2色に、多くても白か黒を加える程度を目安にしましょう。彩度の高い色は、タブの背景に溶け込みやすいパステルカラーよりも、小さなサイズで伝わりやすくなります。

アクセシビリティの考え方も少し取り入れましょう。WCAGでは、意味のあるグラフィックオブジェクトに少なくとも3:1のコントラストを求めています(達成基準1.4.11、非テキストのコントラスト)。ファビコンはページコンテンツではなくブラウザのUIなので、正式には対象外ですが、字形と背景の間、そしてアイコンとタブの間で3:1を確保するのは妥当な目標です。また、色相だけで何かを伝えるのは避けましょう。同じアイコンの赤と緑のバリエーションは、色覚特性のある多くのユーザーには区別がつかないため、形を変えるか記号を加えてください。

5. 形、余白、セーフゾーン

正方形いっぱいに使う

ブラウザのタブはファビコンを固定の小さなサイズで表示するため、余白を増やしてもマークが小さくなるだけです。標準的なタブ用アイコンでは、1〜2ピクセルのゆとりだけを残してキャンバスの大部分を使い、マークをできるだけ大きくしましょう。

角丸か、四角か

ブラウザは一般にタブのファビコンをトリミングしないため、描いた形がそのままユーザーに見えます。わずかに角を丸めた正方形は整った印象で、背景も一定になります。一方、透過の上に置いた自由な形の字形や円は、軽やかで個性的に見えることがあります。どちらでも構いません。1つ選び、アイコンセット全体で統一しましょう。

Apple Touchアイコン

iOSはapple-touch-icon(一般的なサイズは180x180)に独自の角丸を適用します。角をあらかじめ丸めていない、全面塗りの正方形を用意してください。そうしないと、角に暗い部分や白い部分が見えてしまうことがあります。

AndroidとPWA向けのマスカブルアイコン

マスカブルアイコンは、OSによって円、スクワークル、その他の形に切り抜かれます。重要な要素はすべてセーフゾーン(アイコンの中心にある、半径がアイコン幅の40パーセントの円)の内側に収めましょう。どのマスクでも見栄えがよくなるように、背景色は端まで広げます。端いっぱいまで使ったタブ用のファビコンをマスカブルアイコンとして流用してはいけません。マスクで切り取られてしまいます。

6. 透過

タブ用のファビコンでは透過で問題なく、字形だけのアイコンをどんなタブの色にもすっきり載せられます。しかしApple Touchアイコンでは問題になります。iOSは透明な部分をベタ塗りの色(通常は黒)で埋めるため、デザインが台無しになることがあります。apple-touch-iconには、必ずブランドカラーの不透明な背景を付けてください。マスカブルアイコンや、Androidのホーム画面での利用の大半でも同様で、不透明な背景なら結果が予測しやすくなります。

7. 安定性:頻繁に変えない

ファビコンは繰り返し目にすることで認知を築きます。頻繁に変更すると、ユーザーはどのタブがあなたのサイトなのか覚え直さなければならず、技術面でも頭の痛い問題が生じます。ブラウザはファビコンを積極的にキャッシュし、Googleはページとは別にファビコンを取得して保存するため、新しいアイコンが検索結果に反映されるまでに数日から数週間かかることがあります。さらにGoogleは、安定したファビコンURL、サイズが48ピクセルの倍数(48x48、96x96など)のアイコン、そしてクロール可能なファイル(robots.txtでブロックされていないもの)を求めています。ファビコンの変更は、季節ごとの装飾ではなく、リブランディング級の判断として扱いましょう。

8. 通知状態と動的ファビコン

一部のウェブアプリは、未読メッセージ、録画状況、エラーを示すためにファビコンを変更します。うまく使えば便利ですが、やりすぎると煩わしくなります。

• 小さなバッジを使う(ドットや短いカウント)。隅に置き、全面的なデザイン変更は避けます。ベースのアイコンは認識できる状態を保つべきです。
• 控えめにする。バッジは、ユーザーの対応が必要なイベントに限ります。アイコンを延々とアニメーションさせてはいけません。
• 数字に上限を設ける。16x16では1〜2桁しか読み取れません。「137」の代わりに「9+」か、単なるドットを表示しましょう。
• 速やかにリセットする。ユーザーがその項目に対応したら、デフォルトのアイコンに戻します。
• 色だけに頼らない。赤いドットは、「(3) 受信トレイ」のようにページタイトルでも裏付け、誰でも情報を得られるようにしましょう。

動的ファビコンは通常、キャンバスに描画し、アイコンのlink要素の href を更新して差し替えます。ファビコンを絶えず変更するとCPUを消費しユーザーの気も散るため、更新は間引いてください。

9. パフォーマンス

ファビコンは小さいですが、やり方次第では問題のあるリクエストになります。

• ファイルを小さく保つ。PNGのファビコンは通常、数百バイトから数キロバイトです。シンプルなSVGなら1 KB未満に収まります。
• 肥大化したICOファイルを避ける。16、32、48ピクセルの画像を含むマルチサイズICOで十分です。256x256の画像を埋め込むと、ブラウザのタブでは目に見える利点がないままファイルサイズが何倍にもなります。
• キャッシュヘッダーを設定する。アイコンは Cache-Control の有効期間を長くして配信し(例:public, max-age=31536000, immutable)、変更するときはバージョン付きまたはハッシュ付きのファイル名を使いましょう。
• アイコンを明示的に宣言する。ブラウザはデフォルトで /favicon.ico をリクエストするため、ほかのアイコンを宣言していても1つ用意しておくと、ログに404が大量に残るのを避けられます。
• 圧縮する。PNGはロスレス最適化ツールにかけ、SVGは最小化(minify)しましょう。

<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/manifest.webmanifest'>

1枚のソース画像からこれらのファイルをすべて生成したい場合は、MakeFavのファビコンジェネレーターが標準セットを作成します。連携方法については開発者向けページをご覧ください。

10. アクセシビリティ

ファビコンには代替テキストがなく、スクリーンリーダーも読み上げないため、alt 属性のような従来のアクセシビリティ手段は当てはまりません。重要なのは次の点です。

• 意味はページタイトルが担う。固有で説明的な <title> 要素を書きましょう。状態を伝えるためにアイコンに頼ってはいけません。バッジの内容はタイトルにも反映させます。
• ロービジョンのユーザーへの視認性。高いコントラスト、太い形、大きなマークは、視覚的にタブを探すユーザーの助けになります。
• 色への非依存。状態は色相だけでなく、形や文字で区別できるようにしましょう。
• 気を散らさない。点滅したりアニメーションしたりするファビコンは、動きに敏感なユーザーにとって問題になりうるため避けましょう。

ファビコンUXチェックリスト

テストチェックリスト

デザインツールの大きなプレビューを信用してはいけません。実際のアイコンを実際の環境でテストしましょう。

1. 複数のブラウザ。Chrome、Firefox、Safari、Edgeで確認しましょう。アイコンやサイズの選び方がそれぞれ少しずつ異なります。
2. ライトモードとダークモード。OSとブラウザのテーマを切り替え、そのたびにタブバーを確認します。
3. Retinaと標準ディスプレイ。1倍のモニターと2倍または3倍の画面で確認し、ブラウザでズームもしてみましょう。
4. ブックマークバー。ページをブックマークし、ほかのサイトと並べてもアイコンが読み取れるか確認します。
5. 多数のタブ。20個のタブを開いて、自分のサイトがひと目で見つかるか確かめましょう。
6. GoogleのSERPプレビュー。アイコンが再クロールされた後に、モバイルの検索結果を確認します。反映には時間がかかる場合があることを忘れないでください。
7. ホーム画面。サイトをiOSとAndroidのホーム画面に追加し、アイコンが切れていないか、黒い角がないか、マスク内で小さすぎないかを確認します。
8. 技術チェック。ドメインをMakeFavのファビコンチェッカーにかけて、ファイルが存在し、ステータス200を返し、サイズが適切で、HTML内で正しく宣言されているかを確認しましょう。

実践的なワークフロー

1. ロゴマークから始め、1つの図形または文字に簡略化します。
2. 両方のテーマで機能する、ベタ塗りまたは図形の背景を持つ正方形のキャンバスを作ります。
3. 32x32と16x16のサイズを書き出し、小さいほうのバージョンをピクセルエディターで手作業により仕上げます。
4. ジェネレーターで完全なセット(ICO、PNG、apple-touch-icon、マニフェスト用アイコン)を生成します。
5. linkタグを追加し、キャッシュヘッダーを設定してデプロイし、チェッカーで確認します。

ファビコンは、サイト上で最も小さなアセットの1つでありながら、最も頻繁に目にされるものの1つです。コントラスト、シンプルさ、一貫性について慎重に判断すれば、あらゆるタブ、テーマ、デバイスで機能するファビコンになります。

よくある質問

ファビコンのサイズはどのくらいにすべきですか?

ブラウザのタブ向けには16x16と32x32でデザインし(高密度ディスプレイではブラウザが32x32を使用します)、iOS向けに180x180のapple-touch-icon、AndroidとPWA向けに192x192と512x512のPNGを用意します。Google検索結果向けには、48x48や96x96など、サイズが48ピクセルの倍数である正方形のアイコンを使いましょう。SVGのソースなら、これらすべてに拡大縮小できます。

ロゴ全体をファビコンとして使ってもよいですか?

通常はおすすめしません。ワードマーク付きのロゴ全体は、正方形の16x16アイコンには細かすぎ、横に長すぎます。ロゴマークか、1〜2文字のモノグラムを使い、小さくても認識できるように簡略化しましょう。

ファビコンをダークモードで機能させるにはどうすればよいですか?

最も安全なのは、アイコン自体にベタ塗りの背景図形か、コントラストのあるアウトラインを付けて、タブの色に左右されないようにすることです。あるいは、prefers-color-scheme メディアクエリを使って色を切り替えるSVGファビコンを使い、SVGアイコンに非対応のブラウザ向けにPNGまたはICOのフォールバックも残しておきます。ライトテーマとダークテーマの両方で必ずテストしてください。

新しいファビコンが表示されないのはなぜですか?

ブラウザはファビコンを長期間キャッシュし、Googleも独自のコピーを保存して自身のスケジュールで更新するため、数日から数週間かかることがよくあります。ページを強制再読み込みし、ブラウザのキャッシュをクリアし、バージョン付きの新しいファイル名を使い、linkタグとルートの /favicon.ico が正しいファイルを指していることを確認してください。設定はMakeFavのチェッカーで検証できます。

ファビコンに通知バッジを表示するのは良い考えですか?

はい、控えめに使うなら有効です。小さなドットや1〜2桁のカウントは、対応が必要なことにユーザーが気づく助けになりますが、絶え間ないアニメーションや大きな数字は、視認性や注意力の妨げになります。状態は必ずページタイトルにも反映し、項目への対応が済んだらデフォルトのアイコンに戻し、色だけに頼らないようにしましょう。