favicon とは？ファビコンの意味・役割・作り方

favicon（ファビコン） とは、Web サイトを表す小さなアイコンのことです。ブラウザのタブ、ブックマークや履歴、スマートフォンのホーム画面、Google の検索結果のサイト名の横などに表示されます。

favicon の意味と由来

favicon は favorite icon（お気に入りアイコン） を略した言葉です。1999 年に Internet Explorer が、「お気に入り」に登録したサイトの横にアイコンを表示する機能として導入しました。今ではお気に入り以外の場所でも使われていますが、名前はそのまま残っています。

ファビコンが表示される場所

ブラウザのタブ：たくさんのタブの中から、あなたのサイトを見つける目印になります
ブックマークと履歴
Google の検索結果：スマートフォンでもパソコンでも、サイト名の横に表示されます
ホーム画面：iPhone や Android でサイトをホーム画面に追加したとき（Apple タッチアイコン、Android 用アイコン）
リンクのプレビュー：一部のチャットアプリや RSS リーダー

ファビコンが大切な理由

ファビコンがないサイトは、タブに白紙や地球のマークが表示されます。未完成な印象を与えるうえ、タブも見つけにくくなります。検索結果でも、わかりやすいファビコンがあるとクリックする前にサイトを見分けてもらえます。

よいファビコンの条件

ファビコンは最小 16×16 ピクセルで表示されるので、シンプルなデザインが基本です。

太い形が 1 つ、または 1〜3 文字だけ
アイコンと背景のコントラストをはっきりさせる
サイトやブランドの色を使う

細かいロゴ、細い線、長い文字は小さくすると消えてしまいます。日本語のサイトなら、画数の少ない漢字やひらがな 1 文字もおすすめです。

favicon に必要なファイル

現在は次の一式を用意するのが一般的です。

ファイル	用途
favicon.ico（16・32・48 を含む）	ほぼすべてのブラウザ
favicon-16x16.png / favicon-32x32.png	ブラウザのタブ
apple-touch-icon.png（180×180）	iPhone・iPad のホーム画面
android-chrome-192x192.png / 512x512.png	Android・PWA

ファビコンの作り方

もっとも簡単なのは、無料のファビコン作成ツールを使う方法です。ロゴ画像を選ぶだけで上の一式と HTML コードが ZIP でダウンロードできます。ロゴがない場合は、文字・絵文字からファビコンを作成することもできます。

作ったファイルをサイトに設定する方法は「ファビコンの設定方法（HTML）」で解説しています。