ワードプレス　ファビコン表示方法完全網羅！？

2023年08月10日

WordPress

本日はワードプレスにファビコンを表示する方法をご説明させていただきます。

今回のやりたいことは、

①オリジナルのファビコンを表示させる（背景無し・透過）
②管理画面のファビコンもオリジナルに（背景無し・透過）
③ソースコード画面のファビコンもオリジナルに（背景無し・透過）
④apple-touch-icon（iphoneのホーム画面に表示するやつ）は別画像（背景あり・別画像）

こちらを設定していきたいと思います。

今回の記事の経緯

すいません。少し今回の記事を書くにあたり、少し経緯をお話しさせてください。

今回の記事は上記４つがクリアできる方法を書いていくのですが、③番に大きくつまずいてしまいました。ことの経緯はサイトを見ていてソースコードを表示した際に（ブラウザでコントールボタン＋Uで表示される画面）

「そういえばソースコード画面にオリジナルのファビコン表示されてなくね？？」

ってなりました。かなりどうでもいいですが、かなりきになってしまいました。

腐ってもWeb制作会社のマリオ君、当然どのサイトにもオリジナルのファビコンは入れています。

<link rel="icon" href="img/favicon.ico">

ワードプレスではこちら

<link rel="icon" href="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/favicon.ico">

※imgというフォルダの中にfavicon.icoを入れています。

上記の設定で表示させていました。しかし、これではソースコードの画面にはオリジナルのファビコンは表示されません。

他社様のサイトを調べてみたら、ワードプレスのアイコンが表示されているサイトもありますがオリジナルのアイコンのサイトもありましたのでマリオ君もやらねば！！となりました。

そこで、どうしたらいいんだろうってググったものを今回は記事にさせていただきました。

②のワードプレスの管理画面にオリジナルのファビコンを表示させるのはfunctions.phpに記述してもともとやっていたのですが、③のソースコードの画面にオリジナルのファビコンを表示させる方法はやっていませんでした。

調べた結果、ルートに置けばいいとか、functions.phpでファビコンのリダイレクトをするとかいろいろありましたが、調べるのには数時間かかりましたが、終わってみれば、瞬殺で終わるぐらい簡単でしたのでそちらをご紹介させていただきます。

ファビコン表示方法完全網羅設定方法

それでは設定方法です。

④だけすこし、functions.phpに記述しますが基本的には①～④はそもそもワードプレスの管理画面で設定できました。無知って罪ですね。

ファビコンに使用する画像は512×512で拡張子はpngで制作してください。背景は透明がおすすめです。
PNGで背景透明の画像を準備してください。
透明がいい理由は、背景に白などを入れておくと、色がついている場所に表示される際に少し違和感がでます。デザインによっては背景が入っていても全然問題はありません。

マリオ君のサイトは顔をアイコンにしようとしているので、背景がない方が合う感じですね。

ファイル名は任意ですが英数字でお願いします。

それではワードプレス管理画面の外観の中のカスタマイズをクリックしてください。

次にサイト基本情報をクリック

クリックすると一番下にサイトアイコンを選択が出てきますので、ご準備した画像を選択してください。
※ワードプレスのバージョンによってはサイトアイコンがありません。ない場合はぺージ下部に別のやり方を書いております。

画像選択が完了するとプレビューが表示されます。

背景が透明の画像はiphoneなどのホーム画面では黒で表示されます。（解消方法は後述します。）
画像に問題がなければ一番上にある公開をクリックで完了です。

これで、
①オリジナルのファビコンを表示させる（背景無し・透過）
②管理画面のファビコンもオリジナルに（背景無し・透過）
③ソースコードのファビコンもオリジナルに（背景無し・透過）

が完了しました。たったこれだけで、一番の問題のソースコード画面にオリジナルファビコンを表示するが解決しました。

iphoneのホーム画面にファビコンと同じデザインで背景が黒でよければ、これですべて完了です。

しかし、マリオ君はiphoneのホーム画面にはファビコンとは違うデザインを入れたいのでもうひと手間加えます。

apple-touch-iconに関する記事は下記にも書いておりますの、気になる方はご覧ください。

iPhoneのホーム画面にオリジナルアイコン表示

このままでは、ファビコンと同じデザインになってしまいますので、別途サイズ180×180の拡張子pngでファイル名はapple-touch-icon.pngで画像を準備してください。

ファイル名はapple-touch-icon、拡張子はpngで

準備ができたら画像をアップロードして、<head>～</head>の中に下記を貼り付けます。

<link rel="apple-touch-icon" href="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/apple-touch-icon.png">

これで、ファビコンとは違うデザインの180×180で作ったデザインがiphoneのホーム画面に表示されます。

最後にもうひと手間。

先ほどワードプレスの管理画面の外観からカスタマイズで行った作業をすると、下記のコードが生成されています。

<link rel="icon" href="https://mariokun.com/cmswp/wp-content/uploads/2023/08/cropped-favicon-1-32x32.png" sizes="32x32" />
<link rel="icon" href="https://mariokun.com/cmswp/wp-content/uploads/2023/08/cropped-favicon-1-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://mariokun.com/cmswp/wp-content/uploads/2023/08/cropped-favicon-1-180x180.png" />
<meta name="msapplication-TileImage" content="https://mariokun.com/cmswp/wp-content/uploads/2023/08/cropped-favicon-1-270x270.png" />

１行目がファビコンを表示するタグ
２行目がアンドロイドで表示するタグ？
３行目がiphoneのホーム画面で表示するタグ
４行目がwindowsのピン止め用のタグ

になります。

３行目は先ほどhead内にいれたタグとかぶっていて不要なので消します。
また、４行目のwindowsのピン止め用のタグも必要なさそうなので消します。

消し方はfunctions.phpに下記をコピーしてください。

/////////////////管理画面からファビコン設定した時に必要なものだけ表示
function my_site_icon_meta_tags($meta_tags) {
  $meta_tags = array(
      sprintf( '<link rel="icon" href="%s" sizes="32x32" />', esc_url( get_site_icon_url( 32 ) ) ),
      sprintf( '<link rel="icon" href="%s" sizes="192x192" />', esc_url( get_site_icon_url( 192 ) ) )
  );
  return $meta_tags;
}
add_filter( 'site_icon_meta_tags', 'my_site_icon_meta_tags' );
/////////////////管理画面からファビコン設定した時に必要なものだけ表示

これで４行あった先ほどのコードが

<link rel="icon" href="https://mariokun.com/cmswp/wp-content/uploads/2023/08/cropped-favicon-1-32x32.png" sizes="32x32" />
<link rel="icon" href="https://mariokun.com/cmswp/wp-content/uploads/2023/08/cropped-favicon-1-192x192.png" sizes="192x192" />

となり、かぶっていたタグと、必要なさそうなタグが消えました。
以上で完了です。

バージョンが古くサイトアイコンがない場合

バージョンが古くサイトアイコンがない場合は、functions.phpに下記をコピーでできます。

///////////// オリジナルアイコン表示
/*add_action( 'do_faviconico', 'wwwc_no_wp_favicon' );
function wwwc_no_wp_favicon() {

// imgフォルダにいれています。imgフォルダに入れない場合はimg/を消してください。
wp_redirect( get_theme_file_uri( 'img/favicon.ico' ) ) ;
exit;

}*/
///////////// オリジナルアイコン表示

favicon.icoを制作して、アップロードしておいて、上記をfunctions.phpにコピーと

<link rel="apple-touch-icon" href="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/apple-touch-icon.png">

をhead内にコピーすれば同じ感じになります。

以上ワードプレスのファビコン表示方法完全網羅する方法になります。

ソースコード画面にオリジナルのファビコンを表示させたい（完全なる自己満足）と軽く思っただけで結構時間がかかりました。

私以外にも気になったという方は是非試してみてください。

最後に本記事にあたり、２つのサイト様を参考にさせていただきました。
大変勉強になりましたありがとございます。

参考サイト様①はこちら
参考サイト様②はこちら