WordPress での Favicon (ファビコンの設定方法) についてです。
WordPress でのFavicon (ファビコン)の設定方法は２つのアプローチがあります。
- 方法１：管理画面で「サイトアイコン」を設定する
- 方法２：テーマ実装でファビコン画像のURLを設定する（ハードコーディング）
購入したテーマで、カスタマイザー機能が利用でいる場合は、（１）が簡単です。一方で、テーマ開発者は（２）のほうが管理しやすいでしょう。それぞれ見ていきましょう。
目次
[方法1] Favicon (ファビコン) をWordPress管理画面で設定する
WordPress管理画面でのFavicon (ファビコン)の設定方法
WordPressの管理画面で、下記の手順で簡単に設定できます。
- WordPress 管理画面にログインする
- サイドバーのメニューから、[外観] > [カスタマイズ] を開く
- [サイト基本情報] を開き、[サイトアイコン] を設定する
[外観] > [カスタマイズ] から、WEBのサイトの各種設定ができる画面に移動できますが、これをWordPressでは、「カスタマイザー」と呼んでいます。テーマによっては削除されていたり、独自実装のテーマではサポートしていない場合もあります。
また、カスタマイザーがこの「サイトアイコン」をサポートし始めたが、WordPress version 4.3 以降ですので、それ以前のバージョンのWordPressでは、この方法は利用できませんので、ご注意下さい
[方法2] テーマ実装からFavicon (ファビコン) を設定する
テーマ開発を行っているコーダーなら、テーマ実装から直接上記の「サイトアイコン」のURLを指定することができます。
1get_site_icon_url フィルターでファビコン画像URLを指定
用意されている「get_site_icon_url 」フィルターを使います。
独自のフィルターの追加は add_filter( フィルタ名, コールバック, [優先度, 引数の数] ) でしたね。
// 使用例：テーマ内の /img/favicon.png を指定
add_filter ( 'get_site_icon_url', 'my_site_icon_url' );
function my_site_icon_url( $url ) {
return get_theme_file_uri ( 'img/favicon.png' );
}
このフィルターの引数は「URL, サイズ、ブログID」です。ブログIDは、マルチサイト機能を使っている場合のみケアすればいいので、ほとんどの場合は不要ですね。（必要であれば、add_filter の第三引数に、2 や 3 を与えて、残りの引数を要求して下さい。デフォルトは1です。）
こういった行が、自動でHEAD内に出力されるようになります。
<HEAD>
...
<link rel="icon" href="<テーマのURL>/img/favicon.png" sizes="32x32" />
<link rel="icon" href="<テーマのURL>/img/favicon.png" sizes="192x192" />
<link rel="apple-touch-icon" href="<テーマのURL>/img/favicon.png" />
<meta name="msapplication-TileImage" content="<テーマのURL>/img/favicon.png" />
...
</HEAD>一応、ドキュメントも抜粋しておきます。
ファビコンのURLを指定できるアクションフック get_site_icon_url：
ちなみに、このフィルターは同じ名前の関数内で apply_filter されています。通常は、管理画面で設定された favicon の URL 文字列を返す関数ですね
ファビコンのURLを取得する関数 get_site_icon_url()：
/**
* Returns the Site Icon URL.
*
* @since 4.3.0
*
* @param int $size Optional. Size of the site icon. Default 512 (pixels).
* @param string $url Optional. Fallback url if no site icon is found. Default empty.
* @param int $blog_id Optional. ID of the blog to get the site icon for. Default current blog.
* @return string Site Icon URL.
*/
function get_site_icon_url( $size = 512, $url = '', $blog_id = 0 ) {
$switched_blog = false;
if ( is_multisite() && ! empty( $blog_id ) && get_current_blog_id() !== (int) $blog_id ) {
switch_to_blog( $blog_id );
$switched_blog = true;
}
$site_icon_id = get_option( 'site_icon' );
if ( $site_icon_id ) {
if ( $size >= 512 ) {
$size_data = 'full';
} else {
$size_data = array( $size, $size );
}
$url = wp_get_attachment_image_url( $site_icon_id, $size_data );
}
if ( $switched_blog ) {
restore_current_blog();
}
/**
* Filters the site icon URL.
*
* @since 4.4.0
*
* @param string $url Site icon URL.
* @param int $size Size of the site icon.
* @param int $blog_id ID of the blog to get the site icon for.
*/
return apply_filters( 'get_site_icon_url', $url, $size, $blog_id );
}※この関数とフィルターがサポートされたのは、version 4.4 ですので、ご注意下さい！
2WordPress の管理画面に別のファビコンを指定する
すこし上級編（？）です。ここからはテーマ実装が必須になります。下記のコードをテーマ内に実装することで、管理画面とログイン画面では、別のファビコンを指定します。
同時にたくさんタブを開いていると、どれが管理画面なのかブラウザーのタブを見ても、わかりにくくなることがありますので、そんなときに便利かもしれません。
add_filter ( 'get_site_icon_url', 'wwwc_site_icon_url' );
function wwwc_site_icon_url( $url ) {
if ( is_admin() || wwwc_is_login_page() )
return get_theme_file_uri( 'img/favicon-admin.png' );
else
return get_theme_file_uri( 'img/favicon.png' );
}
function wwwc_is_login_page() {
return in_array( $GLOBALS['pagenow'], array('wp-login.php', 'wp-register.php') );
}
is_admin() は、管理画面かどうかを返す関数です。WordPressのログインページではこの関数は false が帰ってきますので、wwwc_is_login_page() を、自前で実装する必要があります。
フィルター get_site_icon_url は、HEADタグの出力中で実行されるはずですので、すでに、is_admin の値はセットされています。ですので、この add_filter() 直接記載してかまいません。
ま、このくらいはええじゃろ・・・
3デフォルトのFaviconのURLをセット
実は２を行っても、対応しきれていないFavicon設定があります。
画像やCSSなどに、静的なファイルにブラウザーで直接アクセスした場合に表示されるファビコンです。
ブラウザーの開発モードで確認するとわかりますが、ブラウザーが勝手に「<ドメインルート>/favicon.ico 」をリクエストして取得、表示しているのです。これはWordPress ではなく、ブラウザーがHTMLページ内にファビコンを指定する<ilnk> タグがない場合のデフォルトの動作です。
普通はユーザが目にすることは無い場所なのですが、ファビコン変更を徹底したい場合は、この部分もケアが必要です。
WordPress version 5.4 以降では、WordPress本体が勝手にこのリクエストを処理し、Wordpressn内の「W」アイコン（/wp-includes/images/w-logo-blue-white-bg.png）へリダイレクトする表示させる処理が追加されました。
このため、静的ファイルを開くと、ファビコンとして「W」アイコンが表示されてしまいjます。
アクションフィルター do_favicoinico を使って、これをキャンセルし、独自のファビコンのURLをセットできます。
// 「W」アイコンの表示をやめるアクションを追加
add_action( 'do_faviconico', 'wwwc_no_wp_favicon' );
function wwwc_no_wp_favicon() {
// 必要があれば、アイコン画像をセット
wp_redirect( get_theme_file_uri( 'img/favicon.png' ) ) ;
exit;
}念の為WordPress本体のソースコードも確認しておきましょう。
/wp-includes/functions.php でアクションが定義されています。関数 do_favicon() 自体は、/favicon.ico へのアクセスがあった場合に呼ばれるアクションです。（デフォルトのrewrite rules に定義されています）
// wp-includes/functions.php
/**
* Display the favicon.ico file content.
*
* @since 5.4.0
*/
function do_favicon() {
/**
* Fires when serving the favicon.ico file.
*
* @since 5.4.0
*/
do_action( 'do_faviconico' );
wp_redirect( get_site_icon_url( 32, includes_url( 'images/w-logo-blue-white-bg.png' ) ) );
exit;
}
do_favicionicon 内で、別の画像URLを返し、そのまま exit; すれば、 デフォルトの「W」画像へリダイレクトが中断されるというわけです。
正直ここまではやらなくてもよいのじゃが、GoogleがWEBサイト全体の Faviconの判別に影響する可能性があるぞよ。
おまけ：Googleの検索結果にFaviconを表示するには・・・
モバイルの検索結果には、ファビコンが表示されます。これに表示させるには、Googleの仕様要件を満たす必要がああります。
Googleのファビコン仕様
- 画像サイズが 48 ピクセルの倍数になっていること（例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）。
- SVG ファイルの場合は、サイズに関して特別な指定はありません。
詳しくは、直接 GoogleのDeveloperサイトをご覧ください。
wp-admin/options.php で設定されたファビコンURLを確認
ちょっと上級者むけの情報。カスタマイザーで設定した画像は、URLとして、データベースでは「options」テーブルの「site_icon」という値に文字列で格納されます。ご存じの方も多いですが、WordPress では、ログインしてれば、/wp-admin/options.php という隠しページで、options テーブルの値を一覧できますので、そこで確認できます。
たくさんの値が表示されますが、うかつに変更するとサイトにアクセスできなくなったりしますので、よく理解していない方は決して触らないでくださいね。
なんかよくわかんないけど、このままコピペするよ〜