2026年6月28日

WordPressのファビコン（サイトアイコン）を設定する方法｜6.5以降の設定場所と表示されないときの確認

テーマ・デザイン

ファビコン（favicon）は、ブラウザーのタブ、ブックマーク、スマートフォンのホーム画面などに表示される小さなアイコンです。WordPress には「サイトアイコン」という機能があり、画像を1枚選ぶだけで、必要なサイズのアイコンと HTML のタグを用意してくれます。テーマのファイルを編集したり、favicon.ico を自分で作ったりする必要はありません（2026年10月時点）。

用意する画像

WordPress の公式ドキュメントでは、次の画像を用意するよう案内しています。

正方形
幅・高さとも 512px 以上
形式は PNG を推奨

ファビコンはタブの中で16〜32px程度の大きさで表示されます。細かい文字や細い線は潰れて見えなくなるので、ロゴの一部や頭文字など、小さくても形が分かる図柄にします。透過 PNG にすると、ブラウザーのタブの色に合わせて自然に見えます。

設定方法（WordPress 6.5以降）

WordPress 6.5 で、サイトアイコンの設定場所が「一般設定」に移りました。

管理画面の「設定」→「一般」を開く
「サイトアイコン」の項目で、サイトアイコンを選ぶボタンを押す
メディアライブラリーから画像を選ぶか、新しくアップロードする
画面下の「変更を保存」を押す

設定方法（WordPress 4.3〜6.4、またはカスタマイザーを使うテーマ）

管理画面の「外観」→「カスタマイズ」を開く
「サイト基本情報」を開く
「サイトアイコン」の「画像を選択」から画像を選ぶ
必要なら表示範囲を切り抜き、「公開」を押す

ブロックテーマでは、サイトエディターの「サイトのロゴ」ブロックの設定に、ロゴをサイトアイコンとしても使う切り替えがあります。ロゴとアイコンを同じ画像にする場合に使えます。

テーマ独自の設定画面でファビコンを指定する方式のテーマもあります。SANGO の例はSANGOでロゴ・ファビコンを設定する手順を参照してください。テーマの設定とサイトアイコンの両方を設定すると、タグが二重に出ることがあるので、どちらか一方にします。

出力されるタグ

サイトアイコンを設定すると、WordPress は wp_head で次の4つのタグを出力します（wp_site_icon() 関数）。画像は、選んだ画像から各サイズに縮小されたものです。

<link rel="icon" href="https://example.com/wp-content/uploads/2026/10/cropped-icon-32x32.png" sizes="32x32" />
<link rel="icon" href="https://example.com/wp-content/uploads/2026/10/cropped-icon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://example.com/wp-content/uploads/2026/10/cropped-icon-180x180.png" />
<meta name="msapplication-TileImage" content="https://example.com/wp-content/uploads/2026/10/cropped-icon-270x270.png" />

タグ	主な用途
`rel="icon"` 32×32	パソコンのブラウザーのタブ・ブックマーク
`rel="icon"` 192×192	Android のホーム画面など、大きめのアイコン
`rel="apple-touch-icon"` 180×180	iPhone・iPad のホーム画面
`msapplication-TileImage` 270×270	Windows のタイル

/favicon.ico へのアクセス

HTML のタグを読まずに、サイトの /favicon.ico を直接取りに来るプログラムもあります。WordPress 5.4 以降では、/favicon.ico のファイルが実際には無く、リクエストが WordPress に渡された場合、WordPress がサイトアイコンの32×32の画像へリダイレクトします。サイトアイコンが未設定なら、WordPress のロゴ画像へリダイレクトします。

WordPress のフォルダーに favicon.ico のファイルを置いていると、Webサーバーがそのファイルを直接返すため、こちらが使われます。昔の設定で置いたファイルが残っていて、古いアイコンが出続けることがあるので、サイトアイコンに切り替えたら不要な favicon.ico を削除します。

表示が変わらないときの確認

ブラウザーはファビコンを長くキャッシュするため、設定しても表示がすぐには変わらないことがあります。次の順に確かめます。

HTML にタグが出ているか：ログアウトした状態で、トップページのソースを表示（Ctrl＋U）し、rel="icon" を検索する。新しい画像のURLになっていれば、WordPress 側の設定はできている
ページキャッシュ：キャッシュプラグインや CDN を使っている場合は、キャッシュを削除してからもう一度ソースを確かめる
ブラウザーのキャッシュ：シークレットウィンドウや別のブラウザーで開く。アイコンの画像URLを直接開いて、新しい画像が表示されるかも確かめる
古い favicon.ico やテーマ独自のタグ：ソースの中に rel="icon" や rel="shortcut icon" が複数ある場合は、テーマやプラグインの設定、header.php に直接書かれたタグを探して、どちらかにそろえる

コマンドで確かめる場合は、次のようにします（example.com は自分のドメインに置き換えます）。

# HTML に出ているアイコンのタグを表示する
curl -s https://example.com/ | grep -Eo '<link rel="(icon|apple-touch-icon)"[^>]*>'

# /favicon.ico のリダイレクト先を確かめる
curl -sI https://example.com/favicon.ico

Google 検索結果に表示されるファビコンは、Google がクロールしたときに更新されるため、反映までに時間がかかります。

コードで扱う場合

タグを追加・変更する

site_icon_meta_tags フィルターで、WordPress が出力するタグの配列を変更できます。たとえば SVG のアイコンを別に用意している場合に、タグを1つ追加する例です（子テーマの functions.php に書きます。SVG ファイルは子テーマの images フォルダーに置いた想定です）。

<?php
function lsc_add_svg_site_icon( $meta_tags ) {
	$meta_tags[] = sprintf(
		'<link rel="icon" href="%s" type="image/svg+xml" />',
		esc_url( get_stylesheet_directory_uri() . '/images/icon.svg' )
	);
	return $meta_tags;
}
add_filter( 'site_icon_meta_tags', 'lsc_add_svg_site_icon' );

このフィルターは、サイトアイコンが設定されているときに使われます。WordPress のメディアライブラリーは、初期状態では SVG ファイルのアップロードを受け付けないため、SVG はテーマのフォルダーなどに置きます。

テンプレートでアイコンのURLを使う

get_site_icon_url() で、指定したサイズのアイコンのURLを取得できます。

<?php
$icon_url = get_site_icon_url( 192 );
if ( $icon_url ) {
	printf( '<img src="%s" width="48" height="48" alt="" />', esc_url( $icon_url ) );
}

header.php に <link rel="icon"> を直接書く方法もありますが、サイトアイコンと二重になるうえ、テーマを変えると消えます。特別な理由が無ければ、サイトアイコンの機能を使います。

まとめ

512×512px 以上の正方形の PNG を用意する
WordPress 6.5 以降は「設定」→「一般」の「サイトアイコン」、それより前はカスタマイザーの「サイト基本情報」で設定する
WordPress が4サイズのアイコンとタグを自動で用意し、/favicon.ico へのアクセスもサイトアイコンへリダイレクトする（5.4以降、実ファイルが無い場合）
変わらないときは、ソースのタグ、ページキャッシュ、ブラウザーのキャッシュ、古い favicon.ico の順に確かめる