ファビコン（favicon）はブラウザのタブ・ブックマーク・検索結果に表示される小さなアイコンです。サイトのブランドイメージを伝える重要な要素ですが、サイズや形式のルールを知らないと正しく表示されないことがあります。
ファビコンとは
favicon は「Favorites Icon」の略で、Internet Explorerがお気に入り登録時に使ったことが始まりです。現在はブラウザタブ・アドレスバー・スマートフォンのホーム画面アイコンなど、さまざまな場所で使われています。
推奨するファビコンのサイズと形式
環境ごとに必要なファイルが異なるため、最低限の構成から始めて必要に応じて追加するのが効率的です。
最低限必要なファイル
まずはこの2ファイルがあれば主要ブラウザのほとんどの環境に対応できます。
| ファイル | サイズ | 用途 |
|---|---|---|
favicon.ico | 16×16・32×32（マルチサイズ） | ブラウザタブ・ブックマーク（IE含む） |
favicon.png | 32×32 | モダンブラウザのタブ |
完全対応する場合
iOS・Androidのホーム画面アイコンや高解像度ディスプレイにも対応させるためのファイル一覧です。
| ファイル | サイズ | 用途 |
|---|---|---|
favicon.ico | 16×16 + 32×32 + 48×48 | 全ブラウザ対応 |
favicon-32x32.png | 32×32 | Safariピン留めタブ |
apple-touch-icon.png | 180×180 | iOSホーム画面アイコン |
android-chrome-192x192.png | 192×192 | Androidホーム画面アイコン |
android-chrome-512x512.png | 512×512 | Android起動スプラッシュ |
favicon.svg | ベクター | 高解像度ディスプレイ対応（Chromeなど） |
HTMLへの記述方法
ファビコンはすべて <head> 内に記述します。基本の2行から始めて、必要に応じて追加してください。
<head> 内に記述します。
<!-- 基本（これだけで多くの環境に対応） -->
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<!-- Apple（iOS ホーム画面） -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- SVG（モダンブラウザ・ダークモード対応） -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
SVGファビコンのダークモード対応
SVGファビコンはCSSメディアクエリを内包できるため、ダークモード時に色を切り替えることが可能です。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
.icon { fill: #ffffff; }
}
.icon { fill: #017387; }
</style>
<rect class="icon" width="32" height="32" rx="4"/>
</svg>
ファビコンの作り方
既存のロゴ画像を変換する方法と、小サイズでも視認性を保つデザインのポイントを解説します。
既存の画像から作る
手持ちのロゴやアイコン画像をICO形式に変換する基本的な手順です。専用ツールを使うと簡単に行えます。
- ロゴ・アイコン画像（PNG推奨）を用意する
- 正方形にトリミングする（横長・縦長のロゴはマージンを付けて正方形に）
- 16×16 / 32×32 / 48×48 にリサイズする
- ICO形式に変換する
ファビコン生成ツールでは、PNGまたはJPEGをアップロードするとマルチサイズの favicon.ico をブラウザ内で生成・ダウンロードできます。
デザインのポイント
16×16pxという極小サイズでも認識できるよう、シンプルさとブランドカラーの活用が重要です。
- シンプルに: 16×16pxでも識別できるデザインにする。細いフォントや複雑な図形は潰れる
- 正方形: タブでは必ず正方形で表示される
- ブランドカラーを使う: サイトのメインカラーを使うと認識しやすい
- 背景は透過か白: 透過PNGがもっとも汎用性が高い
よくある問題と解決方法
ファビコンに関するトラブルの多くはキャッシュや記述方法に起因します。症状別に原因と対処法を確認してください。
ファビコンが更新されない
ファビコンはブラウザにキャッシュされやすく、変更後も古いアイコンが表示され続けることがあります。
- ハードリフレッシュ（Ctrl+Shift+R / Cmd+Shift+R）
- ブラウザのキャッシュをクリア
- URLにクエリ文字列を付ける:
href="/favicon.ico?v=2"
特定のブラウザで表示されない
ブラウザごとに参照するファイルと記述形式が異なるため、以下の点を順番に確認してください。
favicon.icoはルートディレクトリ（/favicon.ico）に置く<link rel="shortcut icon">は古い書き方。rel="icon"を使う- Safari はSVGを優先するためSVGが壊れていると表示されない
スマートフォンのホーム画面に追加したとき画像が出ない
apple-touch-icon.png（180×180px）が必要です。<link rel="apple-touch-icon"> の記述も確認してください。