ウェブサイトにfaviconを追加することは、最もシンプルでありながら、非常に効果的な改善の一つです。ここでは、最低限の設定からプロフェッショナルな完全設定まで、HTMLコードの完全ガイドをご紹介します。

ステップ1：Faviconファイルを準備する

HTMLを記述する前に、実際のアイコンファイルが必要です。選択肢は2つあります。

最低限、以下のものが必要です。

ステップ2：ファイルをルートディレクトリに配置する

faviconファイルをウェブサイトのルート（index.htmlと同じ階層）にアップロードしてください。ブラウザは、HTML宣言がなくても、ルートにある/favicon.icoを自動的に探します。

your-website/
├── index.html
├── favicon.ico
├── favicon-32x32.png
├── favicon-16x16.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── site.webmanifest

ステップ3：<head>にHTMLを追加する

最小限の設定（2行）

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

これはブラウザのタブとiOSのホーム画面に対応します。ほとんどの個人プロジェクトにはこれで十分です。

推奨設定（5行）

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">
<link rel="manifest" href="/site.webmanifest">

これは、すべてのモダンブラウザ、iOS、Android、およびPWAに対応します。本番環境のウェブサイトには、この設定を推奨します。

完全なプロフェッショナル設定（テーマカラー付き）

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">
<meta name="msapplication-TileColor" content="#ffffff">

site.webmanifestファイル

このJSONファイルは、AndroidとPWAにアイコンについて伝えます。

{
  "name": "Your Site Name",
  "short_name": "Site",
  "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"
}

フレームワーク別の手順

React (Create React App / Vite)

faviconファイルをpublic/フォルダに配置し、public/index.html (CRA) または index.html (Vite) にリンクタグを追加してください。

Next.js (App Router)

favicon.icoをapp/ディレクトリに配置してください。Next.js 13以降は自動的にこれを配信します。他のフォーマットについては、layout.tsxのmetadataエクスポートを使用してください。

WordPress

外観 → カスタマイズ → サイト基本情報 → サイトアイコンに移動してください。512×512のPNGをアップロードすると、WordPressがすべてのサイズを自動的に生成します。

Faviconのテスト

コードを追加した後：

  1. ブラウザをハードリフレッシュしてください（Ctrl+Shift+RまたはCmd+Shift+R）— faviconは強力にキャッシュされます。
  2. キャッシュを完全にバイパスするために、シークレット/プライベートモードで開いてください。
  3. Googleリッチリザルトテストで、検索結果にfaviconがどのように表示されるかを確認してください。
  4. 実際のiPhone/iPadで、ホーム画面に追加してテストしてください。

避けるべき一般的な間違い