WordPress での Favicon (ファビコン) 設定方法

最終更新:2021-11-22 by Joe

WordPress での Favicon (ファビコンの設定方法) についてです。

WordPress でのFavicon (ファビコン)の設定方法は2つのアプローチがあります。

  • 方法1:管理画面で「サイトアイコン」を設定する
  • 方法2:テーマ実装でファビコン画像のURLを設定する(ハードコーディング)

購入したテーマで、カスタマイザー機能が利用でいる場合は、(1)が簡単です。一方で、テーマ開発者は(2)のほうが管理しやすいでしょう。それぞれ見ていきましょう。

[方法1] Favicon (ファビコン) をWordPress管理画面で設定する

WordPress管理画面でのFavicon (ファビコン)の設定方法

WordPressの管理画面で、下記の手順で簡単に設定できます。

  1. WordPress 管理画面にログインする
  2. サイドバーのメニューから、[外観] > [カスタマイズ] を開く
  3. [サイト基本情報] を開き、[サイトアイコン] を設定する

[外観] > [カスタマイズ] から、WEBのサイトの各種設定ができる画面に移動できますが、これをWordPressでは、「カスタマイザー」と呼んでいます。テーマによっては削除されていたり、独自実装のテーマではサポートしていない場合もあります。

カスタマイザーのサイトアイコン(=Favicon)の設定。

また、カスタマイザーがこの「サイトアイコン」をサポートし始めたが、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をセット

実は2を行っても、対応しきれていないFavicon設定があります。

画像やCSSなどに、ブラウザーで直接アクセスした場合のファビコンです。ブラウザーの開発モードを開くとわかりますが、ブラウザーが勝手に「<ドメインルード>/favicon.icon 」をリクエストして表示しているのです。これはHTMLページ内にファビコンを指定する<ilnk> タグがない場合のデフォルトの動作でもあります。

普通はユーザが目にすることは無い場所なのですが、ファビコン変更を徹底したい場合は、この部分もケアが必要です。

WordPress version 5.4 以降では、WordPress本体が勝手にこのリクエストを処理し「W」アイコンを表示させる処理が追加されました。

デフォルトのWアイコン

アクションフィルター 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.icon へのアクセスが有った場合に呼ばれるアクションです。(デフォルトの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 内で、exit; してしまえば デフォルトの「W」が出力されることはありません。

正直ここまではやらなくてもよいじゃろ。たぶん、だれも気づかんのじゃ・・。

おまけ:Googleの検索結果にFaviconを表示するには・・・

モバイルの検索結果には、ファビコンが表示されます。これに表示させるには、Googleの仕様要件を満たす必要gああります。

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 テーブルの値を一覧できますので、そこで確認できます。

たくさんの値が表示されますが、うかつに変更するとサイトにアクセスできなくなったりしますので、よく理解していない方は決して触らないでくださいね。