Faviconガイド2026：全サイズ・フォーマットと生成方法

Faviconはブラウザタブ、ブックマーク、ホーム画面、アプリスイッチャーに表示される小さなアイコンです。サイズは小さいですが、ブランド認知とユーザー体験に大きな影響を与えます。この完全faviconガイドでは、2026年に必要なもの、その理由、FigmaやNode.jsでのプログラム的な生成方法を詳しく説明します。

最小限のFavicon設定：実際に必要なのは3ファイルだけ

2026年では、すべてのモダンブラウザ、デバイス、プラットフォームをカバーするのに3つのファイルだけで十分です：

オプションで、無限のスケーラビリティとダークモードサポートのためにSVG faviconを追加できます。しかし、これら3つのファイルだけでChrome、Firefox、Safari、Edge、iOS、Androidを完全にカバーできます。

<!-- The minimal favicon setup for 2026 -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

完全なFaviconサイズリファレンス

すべてのfaviconサイズ、目的、使用場所の決定版リファレンステーブルです：

最も一般的に要求されるサイズは、32x32（ブラウザタブ）、180x180（Appleデバイス）、512x512（PWAスプラッシュスクリーン）です。この3つだけで99%以上のユースケースをカバーします。

フォーマット比較：ICO vs PNG vs SVG

正しいfaviconフォーマットの選択は重要です。各フォーマットには異なる利点とトレードオフがあります：

推奨：/favicon.icoフォールバックにはICO、Apple Touch Iconとマニフェストアイコンにはおよび PNG、サポートするモダンブラウザにはオプションでSVGを使用してください。

ステップバイステップ：Favicon作成

Figmaから

Sharp (Node.js) によるプログラム生成

sharpライブラリを使用して、単一の高解像度ソース画像からfavicon生成を自動化できます：

import sharp from 'sharp';

// Generate multiple sizes from a single source
const sizes = [16, 32, 48, 180, 192, 512];

async function generateFavicons(sourceFile: string) {
  for (const size of sizes) {
    await sharp(sourceFile)
      .resize(size, size, {
        fit: 'contain',
        background: { r: 0, g: 0, b: 0, alpha: 0 },
      })
      .png({ quality: 90, compressionLevel: 9 })
      .toFile(`favicon-${size}x${size}.png`);

    console.log(`Generated favicon-${size}x${size}.png`);
  }
}

generateFavicons('icon-source.png');

ICOファイルの生成にはpng-to-icoパッケージを使用します：

import pngToIco from 'png-to-ico';
import { writeFileSync } from 'fs';

async function generateIco() {
  // Include 16x16, 32x32, and 48x48 in a single ICO file
  const icoBuffer = await pngToIco([
    'favicon-16x16.png',
    'favicon-32x32.png',
    'favicon-48x48.png',
  ]);
  writeFileSync('favicon.ico', icoBuffer);
  console.log('Generated favicon.ico');
}

generateIco();

完全なビルドスクリプト

単一のソースPNGからすべての必要なfaviconファイルを生成する完全なNode.jsスクリプトです：

#!/usr/bin/env node
// generate-favicons.mjs
// Usage: node generate-favicons.mjs icon-source.png

import sharp from 'sharp';
import pngToIco from 'png-to-ico';
import { writeFileSync, mkdirSync } from 'fs';

const SOURCE = process.argv[2] || 'icon-source.png';
const OUT_DIR = './public';

mkdirSync(OUT_DIR, { recursive: true });

async function main() {
  // 1. Generate PNG sizes
  const pngSizes = [
    { size: 16, name: 'favicon-16x16.png' },
    { size: 32, name: 'favicon-32x32.png' },
    { size: 48, name: 'favicon-48x48.png' },
    { size: 180, name: 'apple-touch-icon.png' },
    { size: 192, name: 'icon-192x192.png' },
    { size: 512, name: 'icon-512x512.png' },
  ];

  for (const { size, name } of pngSizes) {
    await sharp(SOURCE)
      .resize(size, size, {
        fit: 'contain',
        background: { r: 0, g: 0, b: 0, alpha: 0 },
      })
      .png({ compressionLevel: 9 })
      .toFile(`${OUT_DIR}/${name}`);
    console.log(`  Created ${name}`);
  }

  // 2. Generate ICO (combines 16, 32, 48)
  const icoBuffer = await pngToIco([
    `${OUT_DIR}/favicon-16x16.png`,
    `${OUT_DIR}/favicon-32x32.png`,
    `${OUT_DIR}/favicon-48x48.png`,
  ]);
  writeFileSync(`${OUT_DIR}/favicon.ico`, icoBuffer);
  console.log('  Created favicon.ico');

  // 3. Generate manifest.webmanifest
  const manifest = {
    name: 'Your App Name',
    short_name: 'App',
    icons: [
      { src: '/icon-192x192.png', sizes: '192x192', type: 'image/png' },
      { src: '/icon-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' },
    ],
    theme_color: '#ffffff',
    background_color: '#ffffff',
    display: 'standalone',
  };
  writeFileSync(
    `${OUT_DIR}/manifest.webmanifest`,
    JSON.stringify(manifest, null, 2)
  );
  console.log('  Created manifest.webmanifest');

  console.log('\nDone! All favicon files generated.');
}

main().catch(console.error);

HTMLマークアップ：正確なLinkタグとManifest

サイトの各ページの<head>にこれらのタグを追加します：

<head>
  <!-- Favicon: ICO fallback for legacy browsers -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- Favicon: SVG for modern browsers (scalable + dark mode) -->
  <link rel="icon" href="/icon.svg" type="image/svg+xml">

  <!-- Apple Touch Icon: iOS home screen -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- Web App Manifest: Android + PWA -->
  <link rel="manifest" href="/manifest.webmanifest">

  <!-- Optional: theme color for browser chrome -->
  <meta name="theme-color" content="#ffffff"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#1a1a2e"
        media="(prefers-color-scheme: dark)">
</head>

ルートディレクトリにmanifest.webmanifestを作成します：

{
  "name": "Your Application Name",
  "short_name": "AppName",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

マニフェストファイルはAndroidとPWA環境にどのアイコンを使用するかを伝えます。"purpose": "any maskable"の値により、アイコンが通常のアイコンとしてもAndroidのアダプティブアイコンマスク内でも機能します。

SVGによるダークモードFavicon

SVG faviconの最も強力な機能の一つは、SVG内部のCSS prefers-color-schemeを使用してユーザーの配色に適応できることです：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <style>
    /* Light mode (default) */
    .icon-bg { fill: #1a1a2e; }
    .icon-fg { fill: #ffffff; }

    /* Dark mode override */
    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: #e0e0e0; }
      .icon-fg { fill: #1a1a2e; }
    }
  </style>

  <!-- Background circle -->
  <circle class="icon-bg" cx="64" cy="64" r="60" />

  <!-- Foreground shape (your logo/icon) -->
  <path class="icon-fg"
        d="M44 40 h40 v12 H56 v8 h24 v12 H56 v16 H44 V40z" />
</svg>

このSVG faviconは、ユーザーのOS・ブラウザテーマに基づいてダーク版とライト版を自動的に切り替えます。JavaScriptは不要で、純粋に宣言的です。Chrome、Firefox、Edgeで動作します。

Reference this SVG in your HTML:

<!-- SVG favicon with automatic dark mode -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- ICO fallback for browsers that don't support SVG favicons -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

全プラットフォームでのFaviconテスト

favicon生成後、すべてのプラットフォームでテストして正しくレンダリングされることを確認します：

Quick checklist for verifying your favicon setup:

# Verify all favicon files exist and are accessible
curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/favicon.ico
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/icon.svg
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/apple-touch-icon.png
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/manifest.webmanifest
# Expected: 200

# Validate manifest JSON
curl -s https://yoursite.com/manifest.webmanifest | python3 -m json.tool
# Should output formatted JSON without errors

よくある質問

最低限必要なfaviconファイル数は？

最低3ファイル必要です：ブラウザタブとレガシーサポート用のfavicon.ico（32x32）、iOSホーム画面ブックマーク用のapple-touch-icon.png（180x180）、AndroidとPWAプラットフォーム用にmanifest.webmanifestで参照される512x512 PNG。2026年ではこの3ファイルでデバイスとブラウザの99%以上をカバーします。

faviconにはSVGとPNGのどちらを使うべき？

両方使います。PNGはApple Touch IconとWebマニフェストアイコンに必須です。SVGはブラウザタブのfaviconとして優れており、完全にスケーリングし、CSS prefers-color-schemeによるダークモードをサポートします。

faviconサイズはページ読み込み速度に影響する？

Faviconファイルは通常非常に小さく（15KB未満）、ブラウザによって積極的にキャッシュされるため、ページ読み込み速度への影響は無視できます。

ダークモードでfaviconを変更するには？

@media (prefers-color-scheme: dark)クエリを含む<style>ブロックが埋め込まれたSVG faviconを使用します。Chrome、Firefox、Edgeで動作します。

Webマニフェストのmaskableアイコンの目的は？

MaskableアイコンはAndroidのアダプティブアイコンシステム用に設計されています。OSがアイコンを様々な形状（円形、角丸四角形など）にクロップします。maskableアイコンには余分なパディング（「セーフゾーン」）が含まれ、マスク時に重要な部分が切り取られません。

2026年でもfavicon.icoファイルは必要？

はい。モダンブラウザはPNGとSVGのfaviconをサポートしていますが、多くのツールやサービスがルートディレクトリから/favicon.icoを自動的にリクエストします。含めるコストはほぼゼロで、サーバーログの404エラーを防ぎます。