ICO/Favicon 生成ガイド：サイトアイコンとPWAアイコンの全套作成

画像（更新: 2026年6月7日）

なぜFaviconが必要？

Faviconはブラウザタブ・ブックマークバー・スマホのホーム画面に表示される小さなアイコンです。専門的なサイトには必須です：

  • ブラウザタブが空白アイコンになり、ブランド認知度が下がる
  • ブックマークからサイトを見つけにくくなる
  • PWAをインストールしてもアイコンがない

Faviconサイズ仕様

プラットフォームや用途により必要なサイズが異なります：

サイズ 用途 形式
16×16 ブラウザタブ（最小） ICO/PNG
32×32 ブラウザタブ（標準） ICO/PNG
48×48 Windowsタスクバー ICO
180×180 Apple Touch Icon（iOS） PNG
192×192 Android Chrome PNG
512×512 PWA起動アイコン PNG

ICO形式について

ICOはコンテナ形式で、1つのICOファイルに複数サイズのアイコンを含められます。ブラウザは必要に応じて最適なサイズを自動選択します。

ICO生成ツールの使い方

手順1：ソース画像を準備

正方形の高解像度画像を選びます。推奨：

  • 解像度は最低512×512（1024×1024推奨）
  • シンプルな図形、縮小しても識別可能
  • 小さなテキストは避ける（16×16では読めない）

手順2：アップロードして生成

  1. ICO生成ツールを開く
  2. ソース画像をアップロード（PNG・JPG・SVG対応）
  3. 必要なサイズを選択（デフォルト全選択：16・32・48・180・192・512）
  4. 「生成」をクリック

手順3：ファイルをダウンロード

ツールは2種類のファイルを出力：

  • favicon.ico — 16×16・32×32・48×48を含むマルチサイズICO
  • favicon-*.png — 各サイズのPNGファイル

HTMLでFaviconを参照

生成したファイルをサイトルートまたは public/ に配置し、<head> に追加：

<!-- ICO（旧ブラウザ互換） -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- PNG（モダンブラウザ） -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">

フレームワーク別の設定

フレームワーク 設定方法
Next.js app/ ディレクトリに配置、自動認識
Vite public/ ディレクトリに配置
Nuxt public/ または assets/ に配置
Create React App public/ ディレクトリに配置

PWAアイコン設定

PWAは manifest.json でアイコンを宣言します：

{
  "name": "マイアプリ",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Maskable Iconの注意点

PWAの maskable アイコンは**セーフゾーン（内側80%）**に完全なコンテンツが必要です。外側20%はOSにより円形などに切り抜かれる可能性があります。

デザインのコツ

コツ1：図形をシンプルに

Faviconは16×16ピクセルしかありません。複雑な図形はぼやけます。核心要素だけを残す：

  • ❌ フルロゴ + テキスト
  • ✅ ロゴの核心図形またはイニシャル

コツ2：SVGをソースに使う

SVGベクター画像なら任意のサイズで鮮明に表示されます。フォーマット変換 でSVG→PNGに変換後、ICOを生成。

コツ3：ダークモード対応

モダンブラウザは media 属性でダークモードFaviconを切り替えられます：

<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">

よくある質問

生成したICOがブラウザに表示されない？

  1. ファイルパスが正しいか確認
  2. ブラウザキャッシュをクリア（Ctrl+Shift+Rで強制リロード）
  3. linkタグが <head> 内にあるか確認

ICOファイルがPNGより大きい？

ICOは複数サイズを含むため大きくなります。16+32+48の3サイズで約15-30KB、全く問題ありません。

ICOとPNGの両方が必要？

はい、両方提供を推奨します。ICOは旧ブラウザ互換、PNGはモダンブラウザで高品質にレンダリングされます。

関連ツール

まとめ

Faviconは小さくてもサイトブランディングの重要な要素です。ICO生成ツールを使えば、1枚のソース画像から全サイズのICOとPNGを一括生成でき、ブラウザタブ・Apple Touch Icon・Android Chrome・PWA起動アイコンなどすべてのシーンに対応できます。ポイント：ソースは高解像度でシンプルに、ICOはマルチサイズ、HTML参照は完全に。

#ICO#Favicon#网站图标#多尺寸#PWA