ファビコン（Favicon）の推奨サイズと設定方法｜現代のブラウザ対応
Web制作 デザイン フロントエンド 初心者
結論
「1つだけ作るなら SVG」、「互換性重視なら 32x32 の PNG」。かつての .ico 形式は、もはや必須ではありませんが、ルートディレクトリに置いておくと自動で認識されるため便利です。
現代の推奨セット
すべてを網羅するのは大変ですが、以下の3セットがあれば現代のブラウザとデバイス（iOS/Android）で美しく表示されます。
| ファイル形式 | 用途・推奨サイズ |
|---|---|
| favicon.ico | ルート配置用。16x16, 32x48のマルチサイズ推奨。レガシーブラウザ用。 |
| icon-192.png | 汎用。32x32, 192x192。Androidやブラウザタブ用。 |
| apple-touch-icon.png | iOS用。180x180。ホーム画面追加時のアイコン。 |
| favicon.svg | 【推奨】ベクター形式。1つで全サイズに対応でき、ダークモード対応も可能。 |
🎨 この場でFaviconを生成する
画像をアップロードすると、各サイズのFaviconが生成されます。クリックでダウンロード。
ダークモード対応のFavicon
SVGを使えば、ユーザーのOS設定に合わせてファビコンの色を変えることができます。
<!-- favicon.svg の中身 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
path { fill: black; }
@media (prefers-color-scheme: dark) {
path { fill: white; }
}
</style>
<path d="..." />
</svg>実装のコツ
- シンプルさを追求する — ファビコンは非常に小さく表示されるため、複雑なロゴや文字は読めません。シンボル化したデザインを心がけましょう。
- 背景を透過させる — ブラウザのタブの色は白とは限りません（特にダークモードやカスタムテーマ）。必ず背景を透明にして書き出しましょう。
- ツールを活用する — 1枚の大きな画像（512x512程度）から各サイズを一括生成するオンラインツールを使うのが、もっとも効率的でミスがありません。