まずは favicon (ファビコン) を設置するのに必要なファイル群を DL する
- favicon (ファビコン) にする画像を用意する。
- 次に「favicon (ファビコン) のサイズは？簡単な作り方と設置方法」から必要なファイル群を DL 、 <head> タグ内に記述するコードをコピペする。
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-512x512.png",
...
}
], ...
↓
"icons": [
{
"src": "/wp-content/uploads/favicon/android-chrome-192x192.png",
...
},
{
"src": "/wp-content/uploads/favicon/android-chrome-512x512.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 -->
';
}