WordPress のサイトや管理ページに favicon (ファビコン) を表示させる

まずは favicon (ファビコン) を設置するのに必要なファイル群を DL する

Wordpress に favicon (ファビコン) を設置する

  • Favicon Generator からファイル群を DL する。
  • 解凍したフォルダの名前を favicon に変更。 (分かりやすい名前であればなんでも良い)
  • フォルダのアップロード先は /wp-content/uploads にする。 (管理しやすければどこでも良い)
  • 子テーマを作り、 各ファイル (header.php, functions.php) を編集する。

アップロードしたファイルを少し修正する

  • browserconfig.xml
<square150x150logo src="/mstile-150x150.png"/>
↓
<square150x150logo src="/wp-content/uploads/favicon/mstile-150x150.png"/>
  • site.webmanifest
"icons": [
	{
		"src": "/android-chrome-192x192.png",
		...
	},
	{
		"src": "/android-chrome-256x256.png",
		...
	}
], ...

↓

"icons": [
	{
		"src": "/wp-content/uploads/favicon/android-chrome-192x192.png",
		...
	},
	{
		"src": "/wp-content/uploads/favicon/android-chrome-256x256.png",
		...
	}
], ...

ウェブサイト

  • /wp-content/themes/your-theme/header.php
  • <head> タグ内に記述する
<!-- header.php -->

<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/wp-content/uploads/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/wp-content/uploads/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/wp-content/uploads/favicon/favicon-16x16.png">
<link rel="manifest" href="/wp-content/uploads/favicon/site.webmanifest">
<link rel="mask-icon" href="/wp-content/uploads/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<!-- /favicon -->

管理画面

  • /wp-content/themes/your-theme/functions.php
    • /wp-admin/admin-header.php に直接記述するのではなく、子テーマを使用して記述する。
    • do_action( 'admin_head' )
      Fires in head section for all admin pages.
# function.php

/**
 * 管理画面で favicon を表示させる
 * https://developer.wordpress.org/reference/hooks/admin_head/
 */
add_action( 'admin_head', 'admin_head_override' );
function admin_head_override() {
	echo '
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/wp-content/uploads/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/wp-content/uploads/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/wp-content/uploads/favicon/favicon-16x16.png">
<link rel="manifest" href="/wp-content/uploads/favicon/site.webmanifest">
<link rel="mask-icon" href="/wp-content/uploads/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<!-- /favicon -->
	';
}