【Wordpress】サイトアイコンの設定が反映されない時の対処法
サイトアイコンの設定方法
Wordpressでは、管理画面の「設定」＞「一般」から、「サイトアイコン」を設定することができます。ここに画像をアップロードすれば、WordPressが自動的に適切なサイズのfaviconやapple-touch-iconを生成し、ページに挿入してくれます。
以下は、サイトアイコンを設定した後に出力される例です。
<link rel="icon" href="/wp-content/uploads/2025/04/favicon-32x32.png" sizes="32x32">
<link rel="icon" href="/wp-content/uploads/2025/04/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" href="/wp-content/uploads/2025/04/favicon-180x180.png">
<meta name="msapplication-TileImage" content="wp-content/uploads/2025/04/favicon-270x270.png">
サイトアイコンの設定が反映されない
状況
私が遭遇したのは、サイトアイコンを管理画面で設定済みなのに、公開サイトでfaviconが表示されないという現象でした。
管理画面ではきちんと設定が反映されていて、上記のようなタグも確認できました。ですが、実際のサイトのHTMLにはそのタグがまったく出力されていなかったのです。
よく言われる原因
ネットで調べると「キャッシュの問題」や「画像サイズが不適切」といった原因が挙げられていました。しかし、それらを見直しても改善される気配はありませんでした。
確認すること
そこで思い当たったのが、WordPress本体をサブディレクトリ（例：/wp）に設置しているという点です。
- 管理画面（サブディレクトリ以下）では正しく出力される。
- 公開ページ（ルートディレクトリにある）では出力されない。
これは、サイトアイコンがサブディレクトリ以下のコンテキストで出力されているため、ルートにある表示ページには反映されていないのでは？という仮説にたどり着きました。
サイトアイコンを明示的に出力する
原因が推測されたところで、せっかくWordpressの標準機能としてサイトアイコンの設定が用意されているのに、手動で<head>に書き込むのはもったいないです。
WordPressには便利な関数 wp_site_icon()があり、これを使えば<head>タグ内に必要なアイコンタグを出力してくれます。
通常はwp_head()にフックされて自動出力されますが、上記のようにサブディレクトリ設置などの理由で出力されない場合は、明示的に呼び出すことで解決できます。
<?php wp_head(); ?>
<?php wp_site_icon(); ?>
これで、無事にfaviconやapple-touch-iconなどのメタタグが出力されます。