faviconを複数サイズ一括生成する完全ガイド

ブラウザのタブに表示されるアイコン（favicon）は、「なぜこんなに種類が必要なのか」と迷いやすい要素です。「faviconをアップロード」と書かれた設定画面で、何を用意すればいいか迷う方も多いです。この記事では favicon の仕様を整理し、Canvas API と Web Manifest を使った一括生成の仕組みを解説します。

なぜ favicon は複数サイズが必要なのか

favicon の歴史は古く、IE5（1999年）が favicon.ico を読む仕様から始まりました。ICO は複数サイズを 1 ファイルに格納できる形式で、この名残から「favicon = 複数サイズ」が定番になっています。

現代の用途は大きく 3 グループに分かれます。

グループ	サイズ	用途
ブラウザ基本	16×16, 32×32	タブ・ブックマーク・アドレスバー
Apple デバイス	180×180	iOS Safari のホーム画面追加・ブックマーク
PWA / Android	192×192, 512×512	ホーム画面アイコン・スプラッシュ画面

16px はタブに表示されるときの最小サイズです。32px はタスクバーのピンや高 DPI ディスプレイ向けです。

Apple Touch Icon の 180px はホーム画面追加時に使われます。指定がなければ Safari がスクリーンショットで代替します。PWA の 512px はインストール時のスプラッシュ画面に使われます。

Canvas API によるリサイズの仕組み

favicon生成ツールは HTML の Canvas API を使ってブラウザ内だけで画像を変換します。外部サーバーへの送信は一切ありません。

処理の流れは次のとおりです。

// 1. ファイルを ImageBitmap として読み込む（URL.createObjectURL より信頼性が高い）
const bitmap = await createImageBitmap(file);

// 2. 出力サイズごとに Canvas を作成してリサイズ描画
const sizes = [16, 32, 48, 64, 180, 192, 512];
const pngs = await Promise.all(sizes.map(size => {
  const canvas = document.createElement('canvas');
  canvas.width = canvas.height = size;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, size, size);
  return canvas.toDataURL('image/png');  // PNG の Base64 Data URL
}));

createImageBitmap() は Promise ベースで動作し、DOM への追加が不要な点が優れています。headless 環境や Service Worker 内でも安定します。

ZIP のパッキングには fflate ライブラリを使用しています。Tree-shaking 対応で圧縮後約 20KB と軽量です。

生成した ZIP の Blob URL は URL.revokeObjectURL() でダウンロード後に解放します。これでメモリリークを防いでいます。

Web Manifest とは何か

Web Manifest（site.webmanifest）は JSON ファイルです。PWA インストール時のアイコン・テーマカラー・表示名を定義します。Android Chrome がホーム画面追加するときや、デスクトップ Chrome がインストールするときに参照されます。

必要最小限の構成は次のとおりです。

{
  "name": "サイト名",
  "short_name": "短い名前",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

icons 配列の 192px は通常アイコン用、512px はスプラッシュ画面に使われます。どちらが欠けても Lighthouse の PWA 監査で警告が出るため、両サイズは必須です。

HTML への設置方法

favicon生成ツールが出力するHTMLスニペットは3種類のタグをセットで含んでいます。

<!-- ブラウザ基本（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 デバイス -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- PWA Manifest -->
<link rel="manifest" href="/site.webmanifest">

<link rel="icon"> の sizes 属性は省略しても動作しますが、最適サイズ選択のために明記が推奨されます。rel="apple-touch-icon" には type 属性は不要です。rel="manifest" は JSON ファイルのパスを href で指定します。

ファイルはすべてWebサイトのルートディレクトリ（/）に置くのが最も簡単です。サブディレクトリに配置する場合は href のパスを合わせて変更してください。

ICO ファイルは今でも必要か

結論として、現代のブラウザは PNG favicon をネイティブサポートしているため、ICO 形式は必須ではありません。

ただし ICO が有利な場面があります。/favicon.ico はブラウザが自動取得する慣習的なパスで、<link rel="icon"> を書かなくても読み込みます。

また一部の RSS リーダーや古い Windows アプリが ICO のみ対応する場合があります。

ICO を用意する場合は 16×16 と 32×32 を含む多サイズ ICO を作るとカバレッジが広がります。本ツールは現時点では PNG 専用です。生成した 32×32 PNG を ImageMagick の convert コマンドで ICO に変換する手順が最もシンプルです。

favicon が表示されないときのデバッグ

よくある原因と確認ポイントをまとめます。

キャッシュ問題: ブラウザは favicon を積極的にキャッシュします。開発中に新しい favicon に切り替えた場合は、ハードリロード（Ctrl+Shift+R）またはキャッシュクリアが必要です。

パスのミスマッチ: href のスラッシュ有り・無しが、サーバーの配信パスと一致しているか確認します。

MIME タイプ: PNG は type="image/png" が正しい値です。type="image/x-icon" は ICO 用です。

Manifest 404: site.webmanifest が存在しない場合、コンソールに 404 が出ます。PWA インストールが失敗します。Chrome DevTools の「Application」→「Manifest」で確認します。

まとめ

favicon の複数サイズは「タブ用・Apple 用・PWA 用」の 3 グループで役割が決まっています。Canvas API の drawImage() と toDataURL() でブラウザだけで全サイズを生成できます。Web Manifest を添えることで PWA 要件も満たせます。

favicon生成ツールを使えば、PNG・JPEG・WebP の画像を 1 枚用意するだけで全サイズ入りの ZIP を取得できます。HTML スニペットも付属するため、次の公開やリブランディングにすぐ使えます。