ファビコン形式の解説：ICO、PNG、SVGとブラウザーが必要とするもの

ファビコンが今でも妙に複雑な理由

ファビコンは小さな画像ひとつに見えますが、ブラウザーのUI、ブックマーク、タブ、ピン留めショートカット、検索結果、モバイルのホーム画面、プログレッシブWebアプリのインストールなどが交差する場所にあります。それぞれの文脈で、期待されるものが少しずつ異なります。

そのため、ファビコンに関する助言はしばしば雑然として見えます。かつてはそれで十分だったため、単一の favicon.ico だけを配信するチームもあります。一方で、実際にどれが使われているのか分からないまま十数個のファイルを生成するチームもあります。妥当な中間地点はもっと小さくできます。ICO、PNG、SVGがそれぞれ何に向いているかを理解し、現在のブラウザーと一般的なデバイス文脈をカバーするコンパクトな構成を配信することです。

ファビコンは、画像パイプラインを見せびらかす場所ではありません。退屈なくらい明示的で、互換性を重視すべき場所です。

ICO：消えない古い形式

ICOは古典的なWindowsアイコンコンテナーです。一般的には16×16、32×32、48×48ピクセルなど、異なるサイズのビットマップ画像を複数格納できます。これは重要です。ファビコンはブラウザーのタブでは非常に小さく表示され、ブックマーク一覧ではより大きく表示され、Windowsショートカットではまた別の形で扱われることがあるからです。

重要なのは、ICOが単なる1枚の画像ではなくコンテナーであることです。良い favicon.ico には通常、複数のラスターサイズが含まれており、ブラウザーやOSが小さなビットマップ1枚を拡大縮小するのではなく、最も近いものを選べるようになっています。

ICOが今でも有用な理由は3つあります。

• HTMLでリンクしていなくても、ブラウザーが /favicon.ico を自動的に要求することがあります。
• 一部の古いブラウザーや連携先がそれを期待しています。
• 新しいアイコン宣言が無視されたときの安全なフォールバックになります。

だからといって、ICOだけを用意すればよいという意味ではありません。編集しづらく、現代的なワークフローに特に馴染むわけでもなく、ブランドマークの信頼できる原本としては不向きです。互換性のためのフォールバックとして扱いましょう。

実務上は、サイトルートに実体のある /favicon.ico を置きます。騒がしいログや不要なブラウザーの再試行を楽しみたいのでなければ、そこを404にしないでください。

PNG：信頼できる働き者

PNGは、ファビコンやタッチアイコンにおいて今でも最も予測しやすいラスター形式です。透過をサポートし、広く対応されており、ブラウザーやプラットフォームをまたいで一貫して動作します。

ファビコンでは、32×32や48×48のように明示的なピクセルサイズのアイコンが欲しい場合にPNGが役立ちます。モバイルのホーム画面アイコンでは、一部の環境でPNGが事実上必須です。たとえばApple touch iconは、通常の本番利用ではPNGベースです。

いくつかの実用的なルールが役立ちます。

• すでに小さいビットマップではなく、ベクターソースから書き出す。
• 大きなサイズを気にする前に、16×16で判読できるようにする。
• 角丸やマスクがかかる文脈でマークが切れて見えないよう、十分な余白を入れる。
• 細かい文字、細い線、詳細なイラストは避ける。

ファビコンはファイルが小さいため、PNG圧縮に過度にこだわる価値は通常ありません。それでも、デザインツールからそのまま書き出された500 KBのタッチアイコンを配信しないようにしましょう。より広い画像選定をすでに見直しているなら、現代Webにおける画像形式の判断で使うのと同じ規律ある考え方がここにも当てはまります。流行しているからではなく、目的に合う形式を選ぶことです。

SVG：現代的で柔軟な選択肢

SVGファビコンの魅力は、解像度に依存しないことです。小さなファイルひとつでさまざまなサイズにきれいに描画でき、コード上で直接編集したり、デザインソフトから書き出したりできます。

現代のChromium、Firefox、SafariはSVGファビコンをサポートしています。そのためSVGは、多くのサイトにとって優れた主要ファビコン形式になります。特に、アイコンがシンプルなロゴ、グリフ、幾何学的なマークである場合に向いています。

ただし、SVGファビコンには注意点があります。

まず、SVGは自己完結しているべきです。外部フォント、リモート画像、スクリプトに依存しないでください。ブラウザーは画像として使われるSVGに制限を適用しますし、あるブラウザーで動くものが別のブラウザーでは失敗することもあります。

次に、見た目をシンプルに保つことです。SVGは16ピクセル問題を魔法のように解決してくれるわけではありません。詳細なベクターイラストは、タブに押し込まれればやはりぼやけます。

3つ目に、動的なスタイリングには注意が必要です。一部のチームは、SVGファビコン内で prefers-color-scheme を使い、暗いブラウザーテーマと明るいブラウザーテーマにアイコンを適応させています。これは機能する場合もありますが、ブラウザーの挙動やキャッシュは一様ではありません。ブランド認知が重要なら、巧妙な適応型アイコンよりも、単一で堅牢なアイコンのほうが勝ることがよくあります。

SVGは優れたソースであり、現代的な配信形式としても優れています。しかし、フォールバックファイルを省く理由にはなりません。

ブラウザーが実際に探すもの

ブラウザーがファビコンを発見する方法は主に2つあります。明示的なHTMLリンクと、暗黙的なルートへの要求です。

暗黙的な挙動は古い方式です。ブラウザーがアイコンを必要とし、まだ見つけていない場合、/favicon.ico を要求することがあります。これが、現代のサイトでもルートのICOファイルが有用であり続ける理由です。

明示的な挙動では、ドキュメントのhead内の <link> 要素を使います。コンパクトな現代的構成は次のようになります。

<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="/site.webmanifest">

manifestでは、インストール可能なWebアプリで使う大きめのPNGアイコンを指すことができます。

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

これだけが唯一の正しい構成ではありませんが、良いベースラインです。現代のブラウザーにはSVGを渡し、従来のICOフォールバックを提供し、iOSのホーム画面保存に対応し、アプリインストールの文脈もサポートできます。

多くのサイトが配信すべきファビコン構成

通常のマーケティングサイト、ドキュメントサイト、SaaSアプリ、メディアであれば、次の構成で十分です。

• 16×16と32×32、任意で48×48を含む /favicon.ico。
• 現代的なスケーラブルファビコンとしての /icon.svg。
• 180×180の /apple-touch-icon.png。
• Web app manifestがある場合は /icon-192.png と /icon-512.png。

特定のプラットフォームに明確な要件があるなら、さらにサイズを追加しても構いません。ただし、習慣だけで10個のファイルを生成しないでください。余分なファイルはそれぞれ、キャッシュされ、忘れられ、名前を間違えられ、リブランド後に古いまま残る可能性のあるものです。

サイトがインストール可能ではなくmanifestもない場合、192ピクセルと512ピクセルのアイコンは不要かもしれません。サイトがアプリのように振る舞うなら、おそらく必要です。

よくある失敗パターン

最も一般的なファビコンのバグは、芸術性の問題ではありません。配信の問題です。

ひとつは強いキャッシュです。ブラウザーはファビコンを頑固に保持します。テスト中、アイコンを変更しても、ハードリフレッシュ、サイトデータの削除、新しいファイル名の使用、新しいプロファイルでのテストを行うまで表示されないことがあります。本番のリブランドでは、HTML内で /icon.svg?v=2 のように変更すると役立つ場合がありますが、ルートの /favicon.ico はブラウザーが直接要求するため厄介です。ファイルを置き換え、キャッシュが切れるのを待つことも作業の一部になりがちです。

もうひとつの一般的な問題は、誤ったMIMEタイプです。SVGは image/svg+xml、PNGは image/png、ICOは一般に image/x-icon または image/vnd.microsoft.icon として配信すべきです。多くのブラウザーは寛容ですが、すべての文脈がそうではありません。あるブラウザーでだけ失敗する場合は、アイコンを描き直す前にネットワークレスポンスを調べましょう。本番環境でリダイレクトとHTTPヘッダーをデバッグするときと同じ習慣がここでも有効です。CMSが配信していると言っているものではなく、実際のレスポンスを見てください。

3つ目の問題はデザイン密度です。Webサイトのヘッダーでは美しく機能するロゴが、ファビコンとしては失敗することがよくあります。タブアイコンは過酷なテストです。文字を取り除き、形状を単純化し、コントラストを高め、実際のサイズでテストしてください。アイコンがページ内の意味のあるコンテンツであるなら、altテキストのようなアクセシビリティ上の配慮が重要です。一方、ファビコン自体はブラウザーインターフェイスの装飾であり、ページコンテンツではありません。この違いについては、画像のaltテキストに関する実践ガイドを参照してください。

<!-- tool-cta:start -->

💡 お試しください: 最新のブラウザーが期待する ICO、PNG、SVG バリアントを Ultimate Favicon Generator で一度に生成しましょう。

<!-- tool-cta:end -->

シンプルな実装チェックリスト

配信前にこのチェックリストを使ってください。

1. クリーンなベクターのマスターから始める。
2. マークを16×16と32×32でテストする。
3. 自己完結したSVGファビコンを書き出す。
4. 複数サイズを含むICOフォールバックを生成する。
5. 180×180のApple touch iconを書き出す。
6. manifestを使う場合は192×192と512×512のPNGを追加する。
7. /favicon.ico をサイトルートに置く。
8. ステータスコード、MIMEタイプ、キャッシュヘッダーを確認する。
9. 少なくとも1つのChromiumブラウザー、Firefox、そしてオーディエンスにAppleデバイスが含まれるならSafariでテストする。

ファビコンは小さいですが、非常に目につく存在でもあります。壊れていると、サイトは未完成に見えます。よく作られたファビコンはインターフェイスの中に自然に溶け込みます。それこそが目的です。