WordPress にファビコンを追加する方法

WordPress 4.3 以降、コアには、適切な <link> タグをトリミング、サイズ変更、挿入する Site Icon 機能が付属しています。標準サイトにはプラグインは必要ありません。

アップロードされたアイコンはメディア ライブラリに保存され、フロントエンドの wp_site_icon() を介して参照されます。 WordPress は、公開時にサーバー側で複数のサイズを生成します。

この機能は、ほとんどのブロガー、代理店、WooCommerce ストアの手動 favicon.ico アップロードに代わるものです。

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

wp-admin で、「外観」→「カスタマイズ」→「サイト ID」→「Site Icon」に移動します。

[Site Icon を選択] をクリックし、512 × 512 ピクセル以上の正方形の PNG をアップロードします。 WordPress はライブ クロッパーを示します。ロゴマークを正方形の安全領域内の中央に配置します。

「公開」をクリックします。コアは、次のフロントエンド ページの読み込み時に、apple-touch-icon、さまざまな PNG サイズ、およびメタ タグを出力します。

セクションごとのアイコンまたはサブディレクトリ ブランドについては、子テーマ functions.php で get_site_icon_url() をフィルターします。

ユースケースの例: 各サブサイトが個別のマークを必要とするが、1 つのテーマを共有するマルチサイト ネットワーク。 blog_id に基づいて異なる URL を返します。

上級チームは、デフォルトのサイトアイコン メタをキューから取り出して、header.php にカスタム <link> タグを出力できますが、作業コアの複製はすでにうまく機能しています。

単一ブログ: Customizer 経由で 512×512 PNG をアップロードします。完了 — FTP も .ico 編集もありません。

WooCommerce ストア: 同じフロー。ホームページだけでなく、チェックアウト ページやアカウント ページでもアイコンを確認してください。キャッシュ プラグインは CSS を遅延させることがありますが、アイコン タグをブロックすることはほとんどありません。

ヘッドレス WordPress: Site Icon タグは、PHP でレンダリングされたページにのみ表示されます。 Next.js フロントエンドは、そのアーキテクチャで独自の <link> タグを宣言する必要があります。

ステージング→本番: メディア ID を再アップロードまたは移行します。 CDN キャッシュの無効化を理解している場合にのみ、絶対アイコン URL をハードコードします。

人気の SEO プラグインも favicon 設定を公開する場合があります。 SEO プラグインと Site Icon の両方を別々に設定することは避けてください。信頼できる情報源を 1 つ選択してください。

キャッシュ プラグイン (WP Rocket、W3 Total Cache) はアイコン ファイルをブロックすべきではありませんが、パージされるまで新しいタグなしで HTML をキャッシュする可能性があります。

ファビコン プラグインは WordPress 4.3 より前では意味がありました。 2026 年には、アニメーション化またはスケジュールされたアイコンの交換が必要でない限り、それらは冗長になります。

どのような種類のファイルをアップロードすればよいですか? PNG が最も安全です。 WordPress は JPG を受け入れますが、透明性は失われます。

最小サイズ?公式には512×512。大きなソースはうまくダウンスケールします。

WordPress は favicon.ico を作成しますか? PNG サイズとメタ タグを発行します。ブラウザーは、ホスティングまたは子テーマを介して実際の .ico を Web ルートに配置することで利益を得ることができます。

マルチサイト: 各サイトには、独自の Customizer 内に独自の Site Icon があります。テーマが URL をグローバルにフィルタリングしない限り、ネットワーク管理者はサイトごとに設定します。

ブラウザは、favicon を HTML とは別にキャッシュします。 WordPress で公開した後、ハード更新するか、プライベート ウィンドウでテストします。

タグを手動でロールする場合にのみ、アイコン URL に ?ver=2 を追加します。 Site Icon URL には、再アップロード時に変更されるクエリ引数が含まれています。

HTML がまだ古い添付ファイル URL を参照している場合は、WordPress オブジェクト キャッシュと CDN (Cloudflare、Jetpack Boost) をクリアします。

ドメインを移行した場合は、データベースでシリアル化オプションの古いアイコン URL を検索します。一部のインポーターは siteicon_id を見逃します。

アップロード後のアイコンがぼやける: ソース画像が 512×512 より小さいか、正方形ではありません。より大きなマスターから再生成します。

Google の結果にアイコンが表示されない: Google は独自のキャッシュを使用します。 Site Icon を更新した後、Search Console でインデックスの再作成をリクエストします。

アイコンはデスクトップ上にありますが、iPhone にはありません: iOS には apple-touch-icon が必要です。 Customizer に下書きとして保存されるだけでなく、Site Icon が公開されていることを確認します。

ロゴの周りの白いボックス: 透明な PNG ではなく、白い背景の JPG をアップロードしました。

管理対象 WordPress ホスト (WP Engine、Kinsta、SiteGround) は、エッジで HTML をキャッシュします。 Site Icon を変更した後、ホスト ダッシュボードからすべてのキャッシュを削除します。

Cloudflareのオレンジ色の雲のプロキシは、/wp-content/uploads/ アイコンをキャッシュせずに HTML をキャッシュできます。通常は問題ありませんが、アイコンの添付 URL が変更されると消去されます。

多言語プラグイン (WPML、Polylang) は、デフォルトでは言語ごとに Site Icon を複製しません。 URL をフィルタリングしない限り、1 つのアイコンがすべてのロケールに対応します。

Bedrock またはヘッドレス セットアップでは、アップロードが再配置される場合があります。 CDN が期待するフロントエンド HTML ポイントでメディア URL を確認します。

静的エクスポート (Simply Static、WP2Static) を提供する場合は、オフライン HTML が新しい添付ファイル ID を取得できるように、アイコンの変更後にエクスポートを再生成します。

Site Icon を変更できるのは、カスタマイズ機能を持つユーザー (通常、標準インストールの管理者と編集者) のみです。著者は、高い権利を持たずにマークを交換することはできません。

マルチサイトでは、スーパー管理者はネットワーク全体のテーマをアップロードできますが、カスタム コードが 1 つの添付 URL を共有しない限り、Site Icon はサイトごとに残ります。

「外観」→「カスタマイズ」を非表示にするサードパーティの管理テーマを監査します。 Customizer を再度有効にするか、Customizer ディープ リンク ?autofocus[section]=title_tagline を使用する必要がある場合があります。

サイトをクライアントに引き渡すとき、favicon の変更に関する文書はメディア ライブラリだけではなくカスタマイズに保存されます。Site Icon を割り当てずにそこに PNG をアップロードしても何も起こりません。

WooCommerce チェックアウトでは、ストアの他の部分と同じテーマ ヘッドが使用されます。 Site Icon はカートとサンキューページに自動的に表示されます。

フロントエンド テンプレートを置き換えるメンバーシップ プラグインは、依然として wp_head() を呼び出す必要があるため、Site Icon メタ出力になります。

ホワイトラベルのクライアント ポータルでは、ブランディング フックが削除されることがあります。クライアントが独自のアイコンをアップロードする場合、サブスクライバー ロールでカスタマイズ機能が無効になっていないことを確認します。

電子メール テンプレートは Site Icon を使用しません。 WooCommerce メール ロゴは、[外観] → [カスタマイズ] → [WooCommerce] で個別に設定します。

以前に favicon.ico を Web ルートに FTP アップロードした場合、Site Icon はそれを削除しません。ブラウザーは予期せず、一方のソースを他方のソースよりも優先する場合があります。

アプローチを 1 つ選択してください。Site Icon PNG 出力に依存するか、一致するデザインを持つ手作りの ICO をルートに保持します。 QA 後に重複を削除します。

header.php にハードコードされたリンク rel=icon を持つクラシック テーマは、コア Site Icon と競合する可能性があります。 Site Icon を有効にする場合は、手動タグを削除します。

移行後、キャッシュを削除し、プライベート ブラウジングでテストして、どのアイコンが優先されるかを確認します。

次の開発者が競合する 2 番目の favicon プラグインを追加しないように、選択したアプローチを Runbook に文書化します。