ファビコンはなくても大丈夫ですか？

技術的にはなくても問題ありませんが、ないとブラウザタブに「?」のような汎用アイコンが表示され、ブランドイメージを損ねます。またGoogleのモバイル検索結果ではファビコンが表示されるため、CTR向上の観点からも用意することをおすすめします。

favicon.icoとPNGはどちらが良い？

両方用意するのが理想です。favicon.icoには16/32/48の3サイズを格納し、さらにモダンブラウザ向けにPNGを複数サイズ用意します。これで古いブラウザから最新のスマホまで幅広くカバーできます。

画像のどこに置けばいい？

慣習的にサイトルート（https://example.com/favicon.ico）に置きます。ここに置くとブラウザが自動的に読み込んでくれます。別のパスに置く場合は、HTMLのタグで明示的に指定する必要があります。

apple-touch-iconって何？

iOSのSafariで「ホーム画面に追加」したときに使われるアイコンです。180×180ピクセルのPNGを用意し、で指定します。指定しない場合はスクリーンショットが使われるため、必ず用意しておくとよいでしょう。

ダークモード対応はできる？

SVGファビコンを使えばCSSのprefers-color-schemeメディアクエリでライト/ダークを切り替えられます。ただしSafariの対応状況が限定的なため、シンプルに両モードで見やすい単色デザインを選ぶのが無難です。

favicon.icoとは？ファビコンの作り方と推奨サイズ一覧

ファビコン（favicon）はブラウザのタブやブックマーク、検索結果に表示される小さなアイコンです。作り方と推奨サイズ、設置方法を解説します。

ファビコンとは

ファビコン（favicon）は「Favorites icon（お気に入りアイコン）」の略で、Webサイトを識別するための小さなアイコン画像のことです。ブラウザのタブ、ブックマークバー、検索結果、スマートフォンのホーム画面などに表示され、サイトの「顔」として重要な役割を持ちます。

1999年にInternet Explorer 5で導入された当初はブラウザのお気に入り（Favorites）にだけ使われていましたが、現在ではほぼすべての環境で表示される必須要素になっています。

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

ブラウザのタブ：タブの左側にアイコンとタイトルが並んで表示
ブックマーク：ブックマーク一覧でサイトを識別しやすくする
アドレスバー：一部ブラウザではURL入力欄の左に表示
検索結果：Google・Bingなどモバイル検索結果でタイトル横に表示
スマホのホーム画面：サイトをホーム画面に追加したときのアイコン
履歴・読書リスト：Safari等のブラウザ機能内で表示

ファビコンの推奨サイズ一覧

ファビコンはデバイスや表示場所によって必要なサイズが異なるため、複数サイズを用意するのが一般的です。最低限揃えておきたい主要サイズは次のとおりです。

サイズ	フォーマット	用途
16×16	ICO/PNG	ブラウザタブ・アドレスバー（標準解像度）
32×32	ICO/PNG	ブラウザタブ（Retinaディスプレイ）
48×48	ICO/PNG	Windowsのタスクバー・デスクトップショートカット
96×96	PNG	Googleデスクトップ検索結果・古いAndroid
180×180	PNG	iOS（apple-touch-icon）
192×192	PNG	Androidホーム画面（Chromeで利用）
512×512	PNG	PWAスプラッシュスクリーン・マニフェスト

favicon.icoとPNGの違い

ファビコンで使われる主なフォーマットはICOとPNGの2種類です。

フォーマット	特徴
ICO	Windowsのアイコン形式。1ファイルに複数サイズを格納可能（16/32/48など）。古いIEにも対応。`favicon.ico`はサイトルート直下に置く慣習がある
PNG	高解像度の表示に向く。透過対応。サイズごとに別ファイルが必要。モダンブラウザはPNGに対応済み
SVG	ベクター形式のためどのサイズでも鮮明。ダークモード対応も可能。ただしSafariの対応状況に注意

実務では、favicon.ico（16/32/48を格納）＋複数サイズのPNGという組み合わせが推奨されます。

ファビコン生成ツールで一括作成する

ファビコンの作り方

1. デザインする

ファビコンはとても小さく表示されるため、複雑なデザインは避け、シンプルなシンボルやイニシャルを使うのがコツです。サービスロゴの一部を切り出す、頭文字を装飾するなどの方法が一般的です。

2. 各サイズに書き出す

元画像（512×512以上の正方形）を用意し、そこから各サイズにリサイズします。手作業でやると大変なので、ファビコン生成ツールを使うのが効率的です。

3. HTMLに設置する

生成したファビコンファイルをサーバーに配置し、HTMLの<head>内に以下のような<link>タグを追加します。

<!-- favicon.ico（ブラウザが自動検出する標準パス） -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- モダンブラウザ向けのPNG -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- iOSホーム画面 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android/PWA -->
<link rel="manifest" href="/site.webmanifest">

favicon.icoをサイトルート（https://example.com/favicon.ico）に置いておくと、Chrome・Firefox・Safari・Edgeを含む主要ブラウザがこのパスを自動的に取得するため、<link>タグがなくても表示されます。

デザインのコツ

16×16でも判別できること：小さく表示されることを前提にシンプルに
余白を少なめに：タブ表示時はすでに余白があるため、アイコン自体は枠いっぱいに
色のコントラスト：ライトモード・ダークモード両方で見やすい色を選ぶ
正方形の構図：円形や縦長・横長だと16pxで判別しにくい
サービスカラーを活用：ブランドカラーを使うとサイト識別に役立つ

ファビコンが更新されないときは

ファビコンを差し替えたのに古いものが表示され続けることがあります。これはブラウザがファビコンを長期間キャッシュするためです。

ブラウザのキャッシュを削除する（Ctrl+Shift+Delete）
/favicon.ico?v=2のようにクエリパラメータを付けてバージョン管理
プライベートブラウジングモードで確認する
サーバーのCache-Controlヘッダーを短めに設定

よくある質問

Q. ファビコンはなくても大丈夫ですか？: 技術的にはなくても問題ありませんが、ないとブラウザタブに「?」のような汎用アイコンが表示され、ブランドイメージを損ねます。またGoogleのモバイル検索結果ではファビコンが表示されるため、CTR向上の観点からも用意することをおすすめします。
Q. favicon.icoとPNGはどちらが良い？: 両方用意するのが理想です。favicon.icoには16/32/48の3サイズを格納し、さらにモダンブラウザ向けにPNGを複数サイズ用意します。これで古いブラウザから最新のスマホまで幅広くカバーできます。
Q. 画像はどこに置けばいい？: 慣習的にサイトルート（https://example.com/favicon.ico）に置きます。ここに置くとブラウザが自動的に読み込んでくれます。別のパスに置く場合は、HTMLの<link rel="icon">タグで明示的に指定する必要があります。
Q. apple-touch-iconって何？: iOSのSafariで「ホーム画面に追加」したときに使われるアイコンです。180×180ピクセルのPNGを用意し、<link rel="apple-touch-icon">で指定します。指定しない場合はスクリーンショットが使われるため、必ず用意しておくとよいでしょう。
Q. ダークモード対応はできる？: SVGファビコンを使えばCSSのprefers-color-schemeメディアクエリでライト/ダークを切り替えられます。ただしSafariの対応状況が限定的なため、シンプルに両モードで見やすい単色デザインを選ぶのが無難です。

ファビコン生成ツールで一括作成する