Web サイトのファビコンを作る方法（全サイズ）

ファビコンは、ブラウザのタブ、ブックマーク、ホーム画面のショートカットに表示される小さなアイコンです。正しく設定するには複数のサイズを作り、HTML で正しく指定する必要がありますが、要件さえわかれば手順は簡単です。

ファビコンとは

「Favicon」は「favorites icon（お気に入りのアイコン）」の略です。もともとは Internet Explorer のお気に入り用の 16×16 ピクセルのアイコンでした。現在のブラウザや端末では多くのサイズが必要です。

| ファイル | サイズ | 用途 |
|------|------|----------|
| favicon.ico | 16×16、32×32 | ブラウザのタブ、Windows のタスクバー |
| favicon-16x16.png | 16×16 | 小さなタブのアイコン |
| favicon-32x32.png | 32×32 | 標準のタブ |
| apple-touch-icon.png | 180×180 | iOS のホーム画面のショートカット |
| android-chrome-192x192.png | 192×192 | Android のホーム画面 |
| android-chrome-512x512.png | 512×512 | Android の起動画面、PWA |

ZapFile で全サイズのファビコンを作る

1. ZapFile のファビコン作成を開きます
2. 正方形の画像をアップロードします（PNG 推奨、512×512 ピクセル以上）
3. サイズを生成します
4. すべてのサイズと .ico ファイルが入った ZIP をダウンロードします

Web サイトにファビコンを追加する

HTML の セクションに、次のタグを追加します。

<link rel="icon" href="/favicon.ico" sizes="any">
<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">

PWA（プログレッシブ Web アプリ）の場合は、site.webmanifest ファイルも追加します。

{
  "name": "Your App",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

良いファビコンをデザインするコツ

シンプルにする

コントラストを高くする

512×512 から作る

SVG ファビコン（最新のブラウザ）

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

よくある失敗

• 低解像度の元画像を使う：必ず 512px 以上から始めましょう
• .ico だけを用意する：最近の端末は PNG のサイズを必要とします。ICO だけでは iOS や Android で適切なアイコンが表示されません
• キャッシュを忘れる：ファビコンを更新しても、ブラウザは古いものを強くキャッシュします。開発中はバージョンのパラメーター（favicon.ico?v=2）を付けて更新を強制しましょう

まとめ

• ファビコンには、ブラウザ・iOS・Android・PWA 用に複数のサイズが必要
• 512×512 の正方形 PNG から、すべてのサイズを一度に作る
• ZapFile のファビコン作成なら、必要なすべてのサイズと ICO ファイルを数秒で作れます