WordPressサイトアイコンのカスタマイズ

WordPress4.3から管理画面（外観→カスタマイズ）でサイトアイコンを設定できるようになり便利になりましたが、favicon, apple-touch-icon等すべて同じ画像が元になります。
そこで個別に異なる画像に設定する方法を調べてみました。

方法1 : サイトアイコンのフィルターを利用する

サイトアイコンを表示する関数は、wp_site_icon で実装されています。
https://developer.wordpress.org/reference/functions/wp_site_icon/

で、カスタマイズ用にフィルターが用意されていました！

wp-includes/general-template.php/**
     * Filters the site icon meta tags, so Plugins can add their own.
     *
     * @since 4.3.0
     *
     * @param array $meta_tags Site Icon meta elements.
     */
    $meta_tags = apply_filters( 'site_icon_meta_tags', $meta_tags );
    $meta_tags = array_filter( $meta_tags );

    foreach ( $meta_tags as $meta_tag ) {
        echo "$meta_tag\n";
    }

$meta_tags の中には、管理画面で設定したサイトアイコンのURLが入ったものがセットされています。

$meta_tags<link rel="icon" href="https://...../cropped-logo.png" sizes="32x32" />
<link rel="icon" href="https://...../cropped-logo.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="https://...../cropped-logo.png" />
<meta name="msapplication-TileImage" content="https://...../cropped-logo.png" />

$meta_tags[0] : icon 32x32
$meta_tags[1] : icon 192x192
$meta_tags[2] : apple-touch-icon-precomposed 180x180
$meta_tags[3] : msapplication-TileImage 270x270

という順序で入っていますので、変更したい画像に差し替えればokです。
こんな感じ。

functions.phpadd_filter( 'site_icon_meta_tags', function( $meta_tags ){
	$meta_tags[0] = "<link rel='icon' href='...../favicon.ico'>";
	$meta_tags[2] = "<link rel='apple-touch-icon-precomposed' href='...../apple-touch-icon.png'>";
	$meta_tags[4] = "<meta name='msapplication-TileColor' content='#ed474d'>";
	return $meta_tags;
} );

※$meta_tags[4] = "";は、Windows スタートにピンするときの背景色セットを追加しました。
　（WordPressデフォルトでは出力されません。）

方法2 : サイトアイコンを使用しない

WordPress4.3になる前は、header.phpに直接書いたり、wp_headやlogin_headにadd_actionしたりしていたかと思いますが、管理画面でサイトアイコンを設定されるとコード上重複してしまいますので、サイトアイコンが設定されてもコード出力されないよう wp_site_iconをリムーブします。

functions.phpremove_action('wp_head', 'wp_site_icon',99); //公開ページ
remove_action('login_head', 'wp_site_icon',99); //ログインページ

以上です。ではでは。