[WordPress] 管理画面含めてfaviconをダークテーマに対応させる

2024/02/09

公開されるページのfaviconをダークテーマに対応させるだけであれば、header.phpの<head>タグ内にダークテーマに対応したfavicon.svgを記載すればよい。(方法はググったら出てくると思う)

管理画面のfavicon含めてダークテーマに対応させるのであれば、functions.phpに下記を記載すればよい。
管理画面の<head>タグはcoreファイル(admin-header.php)で生成されるので、直接いじるのはメンテナンス観点で良くない。

function add_my_favicon() {
  echo '<link rel="icon" href="' . esc_url( home_url( '/' ) . "favicon.svg") . '" sizes="any" type="image/svg+xml">';
  echo '<link rel="apple-touch-icon" sizes="180x180" href="' . esc_url( home_url( '/' ) . "apple-touch-icon.png") . '">';
}
add_action( 'wp_head', 'add_my_favicon' );
add_action( 'admin_head', 'add_my_favicon' );

1

2

3

4

5

6

function add_my_favicon() {

echo '<link rel="icon" href="' . esc_url( home_url( '/' ) . "favicon.svg") . '" sizes="any" type="image/svg+xml">';

echo '<link rel="apple-touch-icon" sizes="180x180" href="' . esc_url( home_url( '/' ) . "apple-touch-icon.png") . '">';

}

add_action( 'wp_head', 'add_my_favicon' );

add_action( 'admin_head', 'add_my_favicon' );

How to add favicon to my site - in both front end and admin panel

How can I add favicon to my WordPress site in both front end, and admin panel. I've tried many ways, but failed.I know, to show favicon the code is:<link rel="shortcut icon" href="images/fav...

WordPress Development Stack Exchange

上記を設定したら、[外観] -> [カスタマイズ] -> [サイト基本情報] -> [サイトアイコン] は削除しておいた方がよさそう。

どのfaviconを記載するかは下記サイトを参考にした。
ブラウザによってsvgが使える・使えないが変わるのはやめてほしいね。
早くsvg一個書けば全ブラウザで動作するようになってほしい...

ずぼらな私の2023年のファビコン事情（SVGでダークモード対応）

Favicon Generator for perfect icons on all browsers

The ultimate favicon generator. Design your icons platform per platform and make them look great everywhere. Including in Google results pages.

RealFaviconGenerator.net

ソフトウェア WordPress favicon

タイトルとURLをコピーしました

この記事へのコメントはこちらコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

LiPoバッテリーを使うにあたって調べたメモ...