ファビコンとは？

ファビコンは favorite icon（お気に入りアイコン）の略で、サイトやウェブページを表す小さなアイコンです。ブラウザやデバイスのさまざまな場所に表示され、特にタブのページタイトル横、ブックマーク、閲覧履歴、ホーム画面にショートカットとして保存したときに使われます。

ファビコンは通常、正方形の画像で、16x16、32x32、48x48 ピクセルが一般的です。現行の実装では高解像度ディスプレイやモバイル向けに、最大 512x512 ピクセルまで対応しています。

ファビコンは、サイトを見分けやすくし、たどり着きやすくするために、次のような場所に出ます。

• ブラウザのタブ： いちばん目立つ場所。タブのページタイトル横に表示されます
• ブックマーク： ブックマーク一覧で、名前の横に表示されます
• 閲覧履歴： ブラウザの履歴メニューに表示されます
• アドレスバー： アドレスバーにファビコンを出すブラウザもあります
• モバイルのホーム画面： ホーム画面にサイトを追加したとき、アプリアイコンとして使われます
• 検索結果： 検索結果の横にファビコンを出す検索エンジンもあります

例：タブとブックマークに表示されたファビコン

ファビコンは、サイトのブランドと閲覧体験の両方に効きます。

現行のサイトでは、ブラウザとデバイスの差を吸収するため、複数の形式とサイズを用意するのが安全です。

ファビコンサイズの例

16×16

32×32

48×48

96×96

例：同じファビコンを異なるサイズで表示

ファビコンを作るときは、次の原則を意識してください。

• シンプルさ： 小さいので、単純な形がいちばん効きます。小さいサイズで消える細かいディテールは避けてください
• 高いコントラスト： ブラウザの背景が変わっても見えるよう、コントラストの高い色を使ってください
• ブランドの一貫性： ファビコンはブランドの一部として識別でき、全体のデザインとつながっている必要があります
• サイズ展開： 16x16 から 512x512 ピクセルまで、どのサイズでも破綻しない形にしてください
• 確認： ブラウザとデバイスを変えて表示を確認し、正しく出ることを確かめてください

良い例：シンプルでコントラストの高いファビコン

避けたい例：複雑すぎる、またはコントラストの低いデザイン

今はツールが揃っており、ファビコン作成は以前より簡単です。ゼロから作る場合も、既存デザインから作る場合も、次の方法があります。

ファビコンは小さいですが、サイトの顔です。サイトを見分けやすくし、ブランド認知を助け、閲覧体験を上げます。複数の形式とサイズを用意すれば、どのブラウザやデバイスでもきちんと見え、正しく動きます。

オンラインメーカーで作る、既存画像から変換する、ゼロから描く、どの方法でも、きちんと用意することはサイトの印象と使い心地への投資です。作り方を押さえておくと、オンラインでのブランドも強くなります。