ファビコンのサイズ・形式・HTML タグ
ファビコンは小さなファイルですが、ブラウザ、スマートフォン、インストールされたウェブアプリは、それぞれ異なるサイズを探します。このガイドでは、ウェブサイトに必要なファイル、HTML での指定方法、そして16ピクセルでも見分けやすいアイコンのデザイン方法を説明します。
ファビコンとは
ファビコン（「favourites icon」の略）は、タブ、ブックマーク、履歴の一覧でウェブサイトを識別するための小さな画像です。サイトをホーム画面に追加するとスマートフォンではより大きなバージョンが使われ、インストールされたウェブアプリはマニフェストに記載されたアイコンを使います。また、一部の検索エンジンは検索結果の横にファビコンを表示します。これらの場所ではそれぞれ異なるサイズが使われるため、ウェブサイトでは通常、数種類のファイルを用意します。
ICO・PNG・SVG のファビコン
| 形式 | 中身 | 知っておきたいこと |
|---|---|---|
ICO（favicon.ico） |
1つのファイルに複数のサイズ。多くの場合 16、32、48 ピクセル | 最も古い形式です。ページからリンクされていなくても、多くのブラウザはサイトのルートの /favicon.ico をリクエストするため、フォールバックとして役立ちます。 |
| PNG | 1ファイルにつき1つのサイズ。透過に対応 | ブラウザが適切なファイルを選べるように、sizes 属性を付けて指定します。Apple Touch Icon やマニフェストのアイコンにも使われます。 |
| SVG | どんなサイズにも拡大縮小できるベクター画像 | 現在のデスクトップブラウザの多くが対応していますが、すべてのブラウザではないため、ICO や PNG のファイルも残しておきましょう。SVG のファビコンは、CSS でダークテーマに対応させることができます。 |
ICO ファイルは小さなコンテナです。ヘッダーに各画像のサイズと位置が記載され、画像は PNG データとして保存できます。LeedyBox のファビコン生成は、16、32、48 ピクセルの PNG 画像を含む favicon.ico と、ほかのサイズ用の PNG ファイルを作成します。
よく使われるサイズと用途
| サイズ（ピクセル） | 主なファイル | 主な用途 |
|---|---|---|
| 16 × 16 | favicon-16x16.png、favicon.ico 内 | 標準的な画面でのタブとブックマーク |
| 32 × 32 | favicon-32x32.png、favicon.ico 内 | 高密度の画面でのタブ、一部のショートカット |
| 48 × 48 | favicon.ico 内 | 一部のシステムでの大きめのショートカットやデスクトップのアイコン |
| 180 × 180 | apple-touch-icon.png | iPhone と iPad のホーム画面のアイコン |
| 192 × 192 | android-chrome-192x192.png | Android のホーム画面のアイコン（マニフェストに記載） |
| 512 × 512 | android-chrome-512x512.png | ウェブアプリのインストールダイアログやスプラッシュ画面 |
512 × 512 ピクセル以上の正方形の元画像か、SVG ファイルから作り始めましょう。元画像が小さいと、大きなアイコン用に拡大する必要があり、ぼやけて見えます。正方形でないロゴは、周りに余白を加えるか、トリミングする必要があります。
Apple Touch Icon は透過にしないでください。一部の Apple 製デバイスでは、透明な部分が黒く表示されます。代わりに背景を色で塗りつぶしましょう。iPhone と iPad は角を自動的に丸めるため、ファイルは普通の正方形で構いません。アルファチャンネルの基本については、PNG と JPG での透過の仕組みをご覧ください。
HTML タグとウェブアプリマニフェスト
ファイルをウェブサイトのルートフォルダーに置き、すべてのページの <head> 内に次のタグを追加します。
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">SVG のファビコンもある場合は、<link rel="icon" href="/favicon.svg" type="image/svg+xml"> を追加します。マニフェスト（site.webmanifest）は小さな JSON ファイルで、サイト名、短い名前、192 ピクセルと 512 ピクセルのアイコン、テーマカラー、背景色、そして standalone などの表示モードを記述します。ファイルを別のフォルダーに置く場合は、タグとマニフェスト内のすべてのパスを変更してください。
小さなサイズのためのデザイン
- シンプルにする。16ピクセルでは、細い線、小さな文字、細かい部分はぼやけてしまいます。スローガン入りのロゴ全体よりも、簡略化したマーク、1つの図形、または1〜2文字のほうが効果的です。
- はっきりしたコントラストにする。正確なブランドカラーよりも、アイコンと背景の明るさの差がはっきりしていることのほうが重要です。
- 余白は少なめにする。余白があると、目に見えるアイコンが小さくなります。大きなアイコンでは少しの余白が役立つこともありますが、小さなファビコンは正方形の大部分を埋めたほうが見分けやすくなります。
- 実際のサイズで確認する。拡大したプレビューだけでなく、タブ内で表示倍率 100% のアイコンを確認しましょう。
ブラウザのダークテーマ
暗いタブバーを使っている人は少なくありません。透明な背景の暗いロゴはそこではほとんど見えなくなることがあり、白いロゴはライトテーマで見えなくなることがあります。よくある解決策は、ロゴの後ろに塗りつぶしや角丸の背景図形を置く、明るい輪郭線を付ける、または prefers-color-scheme メディアクエリで色が変わる SVG ファビコンを使う（SVG ファビコンに対応している環境の場合）といった方法です。LeedyBox のファビコン生成では明るいタブバーと暗いタブバーが表示されるので、両方を見比べられます。
ファビコンの更新とブラウザのキャッシュ
ブラウザはファビコンをキャッシュに保存し、ときには長期間保持するため、新しいアイコンをアップロードしてもすぐには表示されないことがあります。強制再読み込みやプライベートウィンドウで、新しいバージョンが表示されることがあります。再訪問者に早く新しいアイコンを取得してもらうには、ファイル名を変えるか、タグ内の URL にバージョンを追加します（例: /favicon-32x32.png?v=2）。ブックマークや検索結果のアイコンは、更新にさらに時間がかかることがあります。変更した後は、自分にとって重要なブラウザや端末で結果をテストしましょう。
よくある質問
favicon.ico は今も必要ですか?
必須ではありませんが、手軽なフォールバックになります。多くのブラウザやほかのツールは、サイトのルートフォルダーにある /favicon.ico を探します。容量もわずか数キロバイトです。
JPG をファビコンに使えますか?
ブラウザは通常表示できますが、JPG には透過がなく、圧縮によって細かい部分がぼやけることがあります。アイコンには PNG、ICO、SVG ファイルのほうが適しています。
新しいファビコンが表示されないのはなぜですか?
最も多い原因は、古いアイコンがまだキャッシュに残っていること、または HTML タグのパスがファイルのアップロード先と一致していないことです。各ファイルの URL をブラウザで直接開いて、読み込まれるか確認しましょう。