WordPressのファビコンの設定方法と仕様
WordPressでのファビコンの設定方法について、WordPressで用意された機能を使って、コントロールパネルから簡単に設定する方法とオリジナルのコードとファイルで設定する方法について紹介します。
本記事では、favicon（ファビコン）とは何なのか、通常のWEBサイトではどのように設定するのかは、ある程度理解している前提ですすめます。
WordPress 5.4以降では、デフォルトアイコンが強制表示されることについて
まず、事前知識として、オリジナルのファビコンを設定していない場合、WordPress 5.4以降では、強制的にWordPressのデフォルトのアイコンが表示される仕組みになっています。
仕様の確認
これは、どういう仕様になっているかというと、「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;
}という、関数が設定されており、「/favicon.ico」の設定がない場合には、これが呼ばれて、WordPressのデフォルトのアイコンのパスにリダイレクトされるようになっているようです。
実際にブラウザでアクセスして確認してみると、デフォルトのファビコン設定がない状態で、「/favicon.ico」にアクセスすると、「/wp-includes/images/w-logo-blue-white-bg.png」にリダイレクトされ、WordPressのロゴ画像が表示されます。
リダイレクトされ、左のWordPressのロゴ画像が表示されます。
WordPressのデフォルトアイコンが表示される設定を解除
単に、デフォルトで設定されるWordPressのデフォルトアイコンの設定を解除したいだけであれば、functions.phpに以下のように設定すれば解除することができます。要するに何もしないように処理を止めます。
function default_favicon_cancel(){
exit;
}
add_action('do_faviconico', 'default_favicon_cancel');また、デフォルトアイコンが表示されるのを止める方法として、そもそも、先にも述べたように、デフォルトアイコンが表示される処理は、オリジナルのファビコンを設定していない場合に設定される仕様ですので、オリジナルのファビコンを設定すれば、オリジナルが優先され、デフォルトアイコンは表示されなくなります。
WordPress標準機能のサイトアイコン機能を使ったファビコンの設定
オリジナルのファビコンを簡単に設定する方法として、WordPressの標準機能にファビコンを設定するサイトアイコン機能が備わっています。特にこだわりがない場合にはこれを設定すれば良いかと思います。
設定は、比較的簡単で、ファビコン画像を用意して、以下にそってコントロールパネルから設定を行えば完了します。
「外観」-「カスタマイズ」の順に押下して、テーマのカスタマイズ画面を開きます。
「サイト基本情報」を押下します。
ここからがサイトアイコンの設定です。
「サイトアイコン選択」を押下します。
記載があるように、ファビコンに設定される画像のサイズは、512×512ピクセル以上の正方形の画像である必要があります。
メディアライブラリが開きます。
「ファイルをアップロード」から、512×512ピクセル以上の正方形の画像をアップロードします。
アップロードした画像を選択します。
設定されました。
イメージのプレビューが表示されるので、確認して、「公開」ボタンを押下するれば設定完了です。
ファビコン設定の確認
設定が完了したので、ファビコンが適切に設定されていることを確認します。
ブラウザでページを開くと、ファビコンが設定されていることが確認できます。
また、「/favicon.ico」にアクセスすると、デフォルトアイコンの画像パスにリダイレクトされていた設定が、アップロードしたオリジナルのファビコン画像のパスにリダイレクトされるように変更されており、オリジナルの画像が表示されます。
リダイレクト先がオリジナルのファビコン画像ファイルに変更されています。
ページのソースコードを確認すると、各ページに下記のようなファビコンの設定コードが追記されるようになっています。
<link rel="icon" href="/wp-content/uploads/cropped-favicon-32x32.png" sizes="32x32" />
<link rel="icon" href="/wp-content/uploads/cropped-favicon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="/wp-content/uploads/cropped-favicon-180x180.png" />
<meta name="msapplication-TileImage" content="/wp-content/uploads/cropped-favicon-270x270.png" />独自の設定でオリジナルファビコンを設定
上記までのWordPress標準機能による設定で、十分といえば十分と考えられるのですが、例えば、きちんとICOファイルを設定したいとか、標準で指定されるコードでは足りず、それ以外にも指定すべきものがあると考えるのであれば、独自の設定でファビコンを設定する必要があります。
設定方法
その場合の設定方法を紹介します。まず、WordPress標準機能のサイトアイコンの設定がある場合には、「削除」を押下して設定を削除します。これは、設定が残ったままだと、ページにコードが自動的に追記されるので、独自でコード設定するものと被ってしまうことを防ぐためです。
次に必要だと考えるアイコンファイルを用意して、テーマフォルダの適切なフォルダにアップロードして、意図したオリジナルのコードをfunctions.phpに以下のように設定します。
// favicon
function favicon() {
$site_name = get_bloginfo('name');
$theme_file_uri = get_theme_file_uri();
echo <<<EOF
<link rel="icon" href="{$theme_file_uri}/icon/favicon.ico">
<link rel="apple-touch-icon" href="{$theme_file_uri}/icon/apple-touch-icon.png">
<meta name="application-name" content="{$site_name}"/>
<meta name="msapplication-square70x70logo" content="{$theme_file_uri}/icon/70.png"/>
<meta name="msapplication-square150x150logo" content="{$theme_file_uri}/icon/150.png"/>
<meta name="msapplication-wide310x150logo" content="{$theme_file_uri}/icon/310-150.png"/>
<meta name="msapplication-square310x310logo" content="{$theme_file_uri}/icon/310.png"/>
<meta name="msapplication-TileColor" content="#111111"/>
EOF;
}
add_action('wp_head', 'favicon');すると、以下のようなコードが各ページで追記されるようになり、これで各ページでは、オリジナルのファビコンが表示されるようになります。
<link rel="icon" href="https://www-dev.hopes.host/wp-content/themes/hopes.host/icon/favicon.ico">
<link rel="apple-touch-icon" href="https://www-dev.hopes.host/wp-content/themes/hopes.host/icon/apple-touch-icon.png">
<meta name="application-name" content="HOPES"/>
<meta name="msapplication-square70x70logo" content="https://www-dev.hopes.host/wp-content/themes/hopes.host/icon/70.png"/>
<meta name="msapplication-square150x150logo" content="https://www-dev.hopes.host/wp-content/themes/hopes.host/icon/150.png"/>
<meta name="msapplication-wide310x150logo" content="https://www-dev.hopes.host/wp-content/themes/hopes.host/icon/310-150.png"/>
<meta name="msapplication-square310x310logo" content="https://www-dev.hopes.host/wp-content/themes/hopes.host/icon/310.png"/>
<meta name="msapplication-TileColor" content="#111111"/>しかし、このままでは不足があり、WordPress標準機能のサイトアイコンの設定を削除した時点で、「/favicon.ico」にアクセスした際の表示は、WordPressのデフォルトアイコンにリダイレクトされるように設定が戻ってしまっており、それによって、「/favicon.ico」に直接くるアクセスやページの設定コードが追記されないコントロールパネルのファビコンは、WordPressのデフォルトアイコンが設定されることになってしまっています。
そこで、サイトのメインディレクトリ（/favicon.icoで表示されるフォルダ）にもfavicon.icoをアップロードします。
サイトのメインディレクトリにも favicon.ico をアップロードします (例: http://example.com/favicon.ico)。これでサイトの購読者のフィードリーダーにも favicon が表示されます。
これで、設定は完了です。「/favicon.ico」でもオリジナルのファビコンが表示されるようになり、すべてのページでファビコンが適切に表示されるようになっていることが確認できるかと思います。
2022年01月05日に投稿されました。
2022年01月16日に更新されました。