ファビコンとは？意味・用途・重要な理由

Q: PNGやSVGを使っていても、favicon.icoは必要ですか？

引き続き用意しておくのがおすすめです。ブラウザや一部のツールは、デフォルトで/favicon.icoを要求し、古いソフトウェアもそれに依存しています。サイトのルートにICOファイルを置いておけば、404エラーを防げるうえ、SVGやPNGがサポートされない場合の安全なフォールバックにもなります。

ファビコン（favicon、「favorite icon」の略）とは、ブラウザのタブ、ブックマーク、履歴リスト、Google検索結果、スマートフォンのホーム画面、インストールされたWebアプリでWebサイトを表す、小さな正方形の画像です。ファビコンが重要なのは、サイトに一目で分かる顔を与え、たくさん開いたタブの中から見つけやすくし、プロフェッショナルで信頼できるサイトであることを伝え、さらに今ではGoogleの検索結果にサイト名と並んで表示されるためです。ファビコンがないと、訪問者には汎用の地球儀や空白ページのアイコンが表示され、サーバーのログには404エラーが溜まっていきます。MakeFavファビコンジェネレーターを使えば、完全なファビコンセットを無料で作成できます。

ファビコンとは？

ファビコンとは、ロゴを簡略化したものや1文字、1つのシンボルなどで作られた小さなブランドグラフィックのことです。ブラウザなどのソフトウェアがWebサイトから取得し、コンパクトな視覚的識別子が必要な場所に表示します。デスクトップブラウザでは通常16×16 CSSピクセルで描画されますが、高密度ディスプレイでも鮮明に見えるよう、ファイル自体はもっと大きく作るのが望ましいです。

技術的には、ファビコンはHTMLから参照される（またはデフォルトの場所に置かれる）画像ファイルにすぎず、ユーザーエージェントがページの内容とは別にダウンロードします。現在では、「ファビコン」が1つのファイルだけということはほとんどありません。最近のサイトでは通常、ブラウザ、検索エンジン、iOS、Androidのそれぞれに適した形式とサイズが行き渡るよう、同じアイコンの複数バージョンを用意します。

ファビコンの簡単な歴史

ファビコンの歴史は1999年3月、MicrosoftがInternet Explorer 5をリリースしたときに始まります。このブラウザではページを「お気に入り」リストに保存でき、サイトのルートにあるfavicon.icoという名前の小さなアイコンファイルを探して、保存した各項目の横に表示していました。考え方は単純で、サイトが/favicon.icoを用意していれば、ブックマークの隣にそのアイコンが表示されるというものでした。

その後ほかのブラウザもこの機能を採用し、タブブラウジングによって有用性が大きく高まりました。タブが主要な移動手段になるにつれ、ファビコンはブックマークの飾りから、ナビゲーションを支える中核的な要素へと変わりました。長い年月の間に、手法は次のように進化しました。

2000年代前半：<link rel="icon">要素により、ルートだけでなく任意のURLのアイコンを指定できるようになり、IE以外のブラウザではPNGやGIFファイルも使えるようになりました。
2010年代：AppleがiOSのホーム画面向けにapple-touch-iconを導入し、AndroidやWindowsもマニフェストアイコンやタイル画像といった独自の規約を追加しました。
現在：SVGファビコン、Webアプリマニフェスト、ダークモード対応アイコン、Googleの検索結果向けファビコン要件により、ファビコンは小さいながらもサイトの技術的な構成の一部になっています。

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

ファビコンはブラウザのタブ以外にも、実に多くの場所に表示されます。主な場所は次のとおりです。

ブラウザのタブ：最も目に付く場所です。多くのタブを開いているとき、見えるのがアイコンだけということもよくあります。
ブックマークとお気に入り：ブックマークバーやメニューで、ページタイトルの横にアイコンが表示されます。
履歴とよくアクセスするページ：ブラウザは履歴リストや新しいタブのページにファビコンを表示します。
Google検索結果：モバイルでもデスクトップでも、Googleはサイト名とURLの横にサイトのファビコンを表示します。
ホーム画面：訪問者がiOSやAndroidでサイトをホーム画面に追加すると、タッチアイコンやマニフェストアイコンがアプリのようなショートカットになります。
インストールされたPWA：プログレッシブWebアプリは、Webアプリマニフェスト内のアイコンをランチャーアイコン、スプラッシュ画面、タスクスイッチャーに使用します。
Windowsのタイルとピン留めされたサイト：古いWindowsやEdgeでは、ピン留めサイト用に定義されたタイル画像が使われていました。最近のものは、主に標準のアイコンを再利用します。
一部アプリでのリンクプレビュー：一部のチャットツールや生産性ツール（Slackがよく知られた例です）では、展開されたリンクの横にサイトのファビコンを表示します。プレビューの多くは主にOpen Graph画像に頼っていますが、小さなブランドマークとしてファビコンが使われることもよくあります。

ファビコンがWebサイトにとって重要な理由

ブランドの認知

人は文章を読むよりも、色や形のほうがすばやく認識できます。タブ、ブックマーク、検索結果で一貫したアイコンが繰り返し目に入ることで、見るたびに親しみが生まれ、訪問のたびに無料でブランドを露出できます。

信頼性と信用

ファビコンがないと、サイトは未完成のように見えます。きれいに正しく表示されるアイコンは、細部にまで気を配っているという小さなサインになり、サイトが正当なものだという印象を支えます。セキュリティ機能ではなく、フィッシングサイトがアイコンをコピーすることもありますが、空白のデフォルトアイコンでは、ビジネスがしっかりしているようには見えにくいでしょう。

検索結果でのクリック率

Googleはリスティングの横にファビコンを表示するため、ファビコンは競合と並んだときの検索結果の見え方の一部になります。Googleはファビコンによるランキングへの影響を公表しておらず、順位が上がることを期待すべきではありません。メリットは視覚的な認識にあります。アイコンを知っているユーザーは、特に検索結果がコンパクトなモバイルで、あなたの結果を見つけて選んでくれる可能性が高くなります。

多数のタブを開いたときの使いやすさ

ブラウザで20個のタブを開くと、タイトルは省略されて何も読めなくなり、ファビコンだけが残ります。特徴的なアイコンがあれば、ユーザーはすぐにあなたのタブを見つけて戻ることができ、重複して開いたり、忘れてしまったりすることがありません。

プロフェッショナルな印象

よくデザインされたファビコンは、サイトのほかの部分と同じ細部へのこだわりを示します。製品ページ、ドキュメント、ブログ、Webアプリのいずれでも、ファビコンは手軽に追加できる仕上げの要素のひとつです。

タブを見つけやすくするアクセシビリティ

アイコンは、文章を読むより視覚的に探す人、たとえば読字障害や認知特性のある人や、作業をすばやく切り替える人の助けになります。コントラストが高く、形がシンプルなアイコンのほうが見分けやすくなります。ただしファビコンはあくまで補助的なものであり、スクリーンリーダーなどの支援技術が頼りにする、分かりやすいページタイトルの代わりにはなりません。

ファビコンがないとどうなるか

HTMLに記述がなくても、ブラウザは自動的にドメインのルートから/favicon.icoを要求します。ファイルが存在しない場合、いくつかの問題が起こります。

汎用アイコン：訪問者には、タブやブックマークにデフォルトの地球儀、ドキュメント、空白のアイコンが表示され、無個性な印象になります。
ログに404エラー：ファイルを要求するブラウザごとに、失敗したリクエストが発生します。アクセスの多いサイトでは、アクセスログ、エラー監視、アナリティクスにノイズが増え、本当の問題が見えにくくなることがあります。
Google検索結果にアイコンが出ない：有効でクロール可能なファビコンがないと、Googleはリスティングの横にデフォルトのプレースホルダーを表示します。
無駄なリクエスト：ブラウザが再試行することがあり、サーバーにわずかですが無意味な負荷がかかります。

ごく単純なアイコンでも、ないよりははるかに良いものです。404エラーがなくなり、ユーザーにも見分けやすい目印を提供できます。

ファビコンの形式を解説

すべてのプラットフォームに対応できる単一の形式はないため、ほとんどのサイトでは少数のファイルを組み合わせて使います。

形式／ファイル	一般的なサイズ	用途	備考
ICO（`favicon.ico`）	1ファイルに16、32、48 px	レガシーブラウザ、ルートへのデフォルト要求、Google	複数のサイズを格納でき、互換性が最も広い
PNG	32、96、192 px以上	最新のブラウザ、Google検索結果	透過をサポートし、作成が簡単
SVG	拡大縮小可能	最新のデスクトップブラウザ	どのサイズでも鮮明で、CSSでダークモードに対応可能。ICOまたはPNGのフォールバックを用意すること
Apple Touchアイコン	180 x 180 px	iOSとiPadOSのホーム画面	不透明な背景を使用。iOSが角を丸くする
マニフェストアイコン	192 x 192 と 512 x 512 px	Android、PWAのインストール、スプラッシュ画面	`site.webmanifest`に記載。適応型シェイプ用にマスカブル版を追加する

従来のWindowsタイル画像（browserconfig.xmlで設定）は、Internet Explorer 11や旧Edgeで必要でした。それらの環境をサポートする必要がない限り、現在ではほとんど不要です。

Google検索結果向けファビコンのガイドライン

Google検索にアイコンを表示させたい場合は、Googleが公開している要件に従ってください。

サイズ：画像は正方形（1:1）で、48ピクセルの倍数（48x48、96x96、144x144など）である必要があります。Googleは表示時に16x16へ縮小します。サポートされる最小サイズは8x8ですが、48x48以上が推奨されます。
形式：ICO、PNG、SVGなど、ブラウザがサポートする形式であればどれでも使えます。
安定したURL：ファビコンのURLを頻繁に変更しないでください。アドレスが安定していれば、Googleがアイコンを最新の状態に保ちやすくなります。
クロール可能：ファビコンファイルとホームページの両方に、Googlebotがアクセスできる必要があります。robots.txtでブロックしたり、ログインの内側に置いたりしないでください。
サイトごとに1つの宣言：アイコンはサイトのホームページに紐づくため、<link>タグはホームページのheadに記述します。
代表的で適切であること：アイコンはブランドを反映したものであるべきで、不適切または誤解を招くものはGoogleによってデフォルトに置き換えられることがあります。

ファビコンを公開または変更した後、Googleが再クロールして更新するまでには数日から数週間かかることがあるため、すぐに変わると期待しないでください。

MakeFavでファビコンをすばやく作成する方法

デザインソフトもコマンドラインも必要ありません。MakeFavジェネレーターが、1つの元画像から上記のファイルを作成します。

アートワークを準備します。512 x 512 px以上の正方形のロゴまたはシンボルを使用してください。アイコンは16 pxで表示されるため、シンプルな形が最適です。
MakeFavのホームページでアップロードするか、エディターを開いて、書き出す前に画像、背景、余白を調整します。
小さいサイズや、明るい背景と暗い背景で結果をプレビューし、読み取りやすさが保たれているか確認します。
パッケージをダウンロードします。ICO、各サイズのPNG、Apple Touchアイコン、マニフェストアイコン、貼り付け用のHTMLスニペットが含まれています。
/favicon.icoなどのパスでアクセスできるよう、ファイルをWebサイトのルートにアップロードします。
すべてのページの<head>、または共通のレイアウトやテンプレートにHTMLを追加します。
ファビコンチェッカーで確認し、ブラウザのキャッシュをクリアして再読み込みすると、新しいアイコンが表示されます。

HTMLスニペットの例

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

ICOのlinkに付けたsizes="48x48"属性により、SVGをサポートするブラウザではSVGが優先され、ICOはフォールバックとして残ります。96 pxのPNGは、Googleの48の倍数というルールを満たします。

Webアプリマニフェストの例

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

ビルドパイプラインを利用している場合やアイコン作成を自動化したい場合は、開発者向けリソースをご覧ください。

効果的なファビコンのデザインのコツ

シンプルにする。16 pxでつぶれてしまう細かいロゴよりも、1つの図形、1文字、または太いモノグラムのほうが優れています。
強いコントラストを使う。ブラウザのライトテーマでもダークテーマでもアイコンが見えるようにしましょう。色付きの背景タイルが役立ちます。
文字を避ける。頭文字1文字ならよいですが、単語はこのサイズでは読めません。
マスカブルアイコンや角丸アイコンでは、重要な部分が切り取られないよう、少し余白を残します。
ファビコンが認知を強化できるよう、ロゴやブランドカラーと一貫性を保ちます。
実機でテストし、タブ、ブックマーク、Google検索結果での見え方を確認します。

ファビコンのよくある問題

アイコンが表示されない場合、よくある原因はキャッシュ、誤ったパス、ブロックされたファイルです。ブラウザはファビコンを強力にキャッシュするため、スーパーリロードや新しいプライベートウィンドウだけで更新が反映されることもよくあります。ファイルのURLが200ステータスと正しいコンテンツタイプを返していること、<link>タグが<head>内にあることを確認してください。検索については、robots.txtでアイコンやホームページがブロックされていないことを確認してください。MakeFavチェッカーを使えば、こうした問題をすばやく見つけられます。

よくある質問

favicon（ファビコン）は何の略ですか？

faviconは「favorite icon」の略です。この名前は、1999年にInternet Explorer 5が、ブラウザの「お気に入り」リストの項目を飾るために小さなアイコンファイルを初めて使ったことに由来します。現在ではアイコンが他の多くの場所にも表示されますが、この呼び名はそのまま定着しました。

ファビコンはSEOに役立ちますか？

ファビコンは直接的なランキング要因ではありません。ただし、モバイルでもデスクトップでもGoogle検索結果のサイト名の横に表示されるため、ブランドの認知やリスティングの見た目の魅力を高め、間接的にクリックを後押しする可能性があります。アイコンが表示される対象になるには、Googleのガイドラインに従うことが大切です。

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

Google検索向けには、48x48や96x96など、48ピクセルの倍数の正方形の画像を使用してください。より幅広く対応するには、ICOファイル、180x180のApple Touchアイコン、192x192と512x512のマニフェストアイコンも用意しましょう。拡大縮小に強いSVGを加えるのもおすすめです。

PNGやSVGを使っていても、favicon.icoは必要ですか？

引き続き用意しておくのがおすすめです。ブラウザや一部のツールは、デフォルトで/favicon.icoを要求し、古いソフトウェアもそれに依存しています。サイトのルートにICOファイルを置いておけば、404エラーを防げるうえ、SVGやPNGがサポートされない場合の安全なフォールバックにもなります。

ファビコンが更新されないのはなぜですか？

ブラウザや検索エンジンは、ファビコンを長期間キャッシュします。スーパーリロード、プライベートウィンドウ、キャッシュのクリアを試してください。ファイルパスが正しく、新しいファイルが配信されていることも確認しましょう。Google検索では、変更したアイコンが再クロールされて更新されるまでに、数日から数週間かかることがあります。

ファビコンとは？Webサイトにとって重要な理由