Faviconの最適なサイズは？
正しいFaviconサイズを選ぶことは、ブラウザ・デバイス・プラットフォームすべてでアイコンをきれいに表示するための重要なポイントです。
このガイドでは、用途別に推奨されるFaviconサイズと、それぞれの形式をいつ使うべきかを解説します。
まずは結論
ショートアンサー：
推奨されるFaviconサイズは 16×16, 32×32, および48×48（ブラウザ用）、180×180（Appleデバイス用）、192×192と512×512（Android・PWAアプリ用）です。
ブラウザ用Faviconサイズ
デスクトップおよびモバイルブラウザでは、複数サイズのPNGアイコンと、複数サイズを内包したICOファイルを用意しておくと高い互換性が期待できます。
| サイズ | ファイル名 | 用途 |
|---|---|---|
| 16×16 | favicon-16x16.png | ブラウザタブ |
| 32×32 | favicon-32x32.png | タスクバー / ブラウザUI |
| 48×48 | favicon-48x48.png | デスクトップショートカット |
| マルチサイズ | favicon.ico | レガシーブラウザ対応 |
Apple Touchアイコンのサイズ
Appleデバイスでサイトをホーム画面に追加した際には、より大きなアイコンサイズが使われます。
| サイズ | ファイル名 | デバイス |
|---|---|---|
| 152×152 | apple-touch-icon-152x152.png | iPad |
| 167×167 | apple-touch-icon-167x167.png | iPad Pro |
| 180×180 | apple-touch-icon.png | iPhone |
Android・PWA向けアイコンサイズ
Progressive Web AppやAndroid Chromeのインストールフローでは、アイコンサイズに関する明確な要件があります。
| サイズ | ファイル名 | 用途 |
|---|---|---|
| 192×192 | android-chrome-192x192.png | ホーム画面用アイコン |
| 512×512 | android-chrome-512x512.png | アプリアイコン・スプラッシュスクリーン |
これらのサイズは、PWAとしてインストール可能かどうかを判断するチェックにおいて必須となります。
SVG Faviconのサイズについて
SVG faviconはベクター形式のため、特定のピクセルサイズを固定する必要はありません。
おすすめの設定：
- 正方形のviewBoxを使用する（例：0 0 100 100）
- 図形を中心に配置する
- 細かすぎるディテールは避ける
SVG Faviconは高DPIディスプレイや拡大表示でも美しくスケーリングされます。
どのFavicon形式を使うべきか？
| 形式 | おすすめの場面 |
|---|---|
| PNG | もっとも一般的で、多くの環境で確実に動作させたいとき |
| ICO | 古いブラウザやWindows環境との互換性を重視する場合 |
| SVG | モダンブラウザ・スケーラブルなアイコン・ダークモード対応が必要な場合 |
Best practice: Use PNG + ICO + SVG together.
Recommended HTML Markup
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Common Favicon Mistakes
- Using only one favicon size
- Forgetting Apple Touch Icons
- Missing PWA icons
- Using low-resolution source images
Generate All Favicon Sizes Automatically
Instead of manually resizing icons, you can generate all required favicon sizes instantly using favicon.pub. Upload a single image and download a complete package containing ICO, PNG, SVG, Apple Touch Icons, Android icons, and a PWA manifest.
Internal Links
画像をアップロードして、完全なFaviconセットを生成