WordPressテーマのFaviconカスタマイズ：開発者向けガイド

ThemeForestなどで重い有料WordPressテーマをインストールし、カスタマイザーからサイトアイコンをアップロードしたのに、Safariのタブにはテーマ作者のデフォルトロゴが表示されたまま…そんな経験はありませんか？テーマ開発者はしばしば独自のヘッダーロジックをハードコードし、WordPressのコア設定を完全に上書きしてしまいます。これは本当にイライラしますよね。

GitHubを見てみてください。彼らのFaviconは、OSのダークモード設定に応じて黒と白が動的に切り替わります。WordPressの標準画像アップローダーに頼っているだけでは、このレベルの洗練さは絶対に実現できません。ネイティブアプリのような操作感を得るには、コードレベルでの本格的なWordPressテーマのFaviconカスタマイズに踏み込む必要があります。

SVGサポートなどのモダンな機能を使いたいなら、WordPress内蔵のサイトエディターでFaviconを設定するのはやめることを強くお勧めします。子テーマのfunctions.phpを使ってアイコンスタックをハードコードする方が、高速でクリーンであり、テーマのアップデートでブランド設定が消去されるのも防げます。

テーマレベルの変更の前提条件

PHPファイルの編集を始める前に、必ず子テーマ（Child Theme）を有効にしてください。親テーマを直接編集すると、次回アップデートをクリックしたときにカスタムアイコンが消えてしまいます。また、画像ファイルをサーバーに直接アップロードするためのFTPアクセス、またはファイルマネージャープラグインも必要です。

ステップバイステップの実装

1. テーマのデフォルト出力を無効化する

まず、WordPressとテーマがデフォルトの512x512 PNGを注入するのを止める必要があります。これをスキップすると、ブラウザが複数のアイコンをダウンロードし、間違ったものを選ぶことがよくあります。子テーマのfunctions.phpを開き、このフック解除関数を追加します。

add_action('init', function() {
    remove_action('wp_head', 'wp_site_icon', 99);
});

この1行で、デフォルトのWordPressサイトアイコンのロジックが排除されます。（標準のアップローダーを使いたい場合は、私たちの基本的なWordPress Faviconガイドをご覧ください。ただし、モダンなSVG機能は使えなくなります）。

2. モダンなアイコンスタックを生成する

2026年現在、15種類もの異なるアイコンサイズは必要ありません。必要なのは3つのファイルだけです。モダンブラウザ用のSVG、Appleデバイス用の180x180 PNG、そしてフォールバック用の32x32 ICOです。ロゴをMzu favicondlにかけて、これらの正確なフォーマットを生成してください。ダークモードをサポートするには、ダウンロードしたSVGをテキストエディタで開き、<style>タグ内にCSSメディアクエリを追加します。これら3つのファイルを、子テーマ内の/assets/というフォルダにアップロードします。

3. カスタムコードを注入する

次に、最適化されたHTMLを直接wp_headフックに注入します。これにより、テーマの雑なコードをバイパスし、アイコンが意図した通りに読み込まれることが保証されます。

add_action('wp_head', 'custom_theme_favicon_stack');
function custom_theme_favicon_stack() {
    $theme_dir = get_stylesheet_directory_uri();
    echo "<link rel='icon' href='" . $theme_dir . "/assets/favicon.svg' type='image/svg+xml'>\n";
    echo "<link rel='apple-touch-icon' href='" . $theme_dir . "/assets/apple-touch-icon.png'>\n";
    echo "<link rel='alternate icon' href='" . $theme_dir . "/assets/favicon.ico'>\n";
}

get_stylesheet_directory_uri()を使用していることに注目してください。これにより、サイトを新しいドメインに移行しても、パスが常に子テーマを指すようになります。

4. ブロックテーマ（FSE）の対応

Twenty Twenty-Fourのようなモダンなフルサイト編集（FSE）テーマを使用している場合、ルールが少し変わります。ブロックテーマはしばしばparts/header.htmlでヘッダーを定義します。wp_headフックは引き続き機能しますが、一部のブロックテーマは「サイトロゴ」ブロックを強制的に適用します。コードが無視される場合は、サイトエディターを開いてサイトロゴブロックを完全に削除し、純粋にPHPの注入に頼る必要があるかもしれません。

よくある落とし穴

ハードコードされたヘッダー： 古いThemeForestのテーマの中には、header.php内に直接<link rel='shortcut icon'>をハードコードしているものがあります。PHPフックが失敗した場合は、header.phpを子テーマにコピーし、問題のHTML行を手動で削除してください。
強力なキャッシュ： WP RocketなどのWordPressキャッシュプラグインは、古いHTMLを保持し続けます。functions.phpを保存した後、ページキャッシュをパージしてください。それでもブラウザに古いアイコンが表示される場合は、ローカルでFaviconのキャッシュクリアを強制する必要があります。
SVGのMIMEタイプ： セキュリティ上の理由から、WordPressはデフォルトでSVGのアップロードをブロックします。私たちはFTP経由でアップロードし、テーマ内で直接リンクしているため、メディアライブラリの制限を完全に回避できます。

まとめ

WordPressテーマのFaviconカスタマイズをコントロールできるかどうかが、プロの構築と素人のセットアップを分けます。デフォルトのテーマ設定に頼ると、HTMLが肥大化し、ダークモードのサポートも欠落しがちです。子テーマ経由でクリーンな3ファイルのスタックを注入することで、どのデバイスでもサイトがネイティブに見えることを保証できます。