【初心者】WordPressファビコン表示【やり方】

こんにちは、ひなたです。

WordPressのファビコン表示方法についていろいろ調べてみたところ2種類のやり方でできました。

  • その1 サーバー上のフォルダにfavicon.icoを直接置く。
  • その2 WordPressのメディアにfavicon.icoをアップロードする。

手順はほとんど同じです。
まずはその1を紹介します。


その1 サーバー上のフォルダにfavicon.icoを直接置く。

  • 手順① favicon.icoを準備する。
  • 手順② サーバー上のフォルダにfavicon.icoを置く。
  • 手順③ header.phpを編集する。

手順① favicon.icoを準備する。

自作かフリーのサイトから気に入ったファイルをダウンロードします。
.icoファイルに変換します。

私は下記サイトを使わせてもらいました。
png→ico変換
https://convertio.co/ja/png-ico/

手順② サーバー上のフォルダにfavicon.icoを置く。

エックスサーバーにログイン。
[ファイルの管理]を開きます。
ドメイン名の下の任意のフォルダにfavicon.icoをアップロードします。

私は下記に置きました。
hinatablog.me/public_html/wp-content/favicon.ico

手順③ header.phpを編集する。

WordPressの外観から
header.phpを選択して、
</head>の上あたりに
<link rel="shortcut icon" href="favicon.icoのパス">
を追加します。

私の場合。
<link rel=”shortcut icon” href=”https://hinatablog.me/wp-content/favicon.ico”>

ファビコンが表示されているはずです。




その2 WordPressのメディアにfavicon.icoをアップロードする。

  • 手順① favicon.icoを準備する。
  • 手順② wp-config.phpを修正する。
  • 手順③ favicon.icoをアップロードする。
  • 手順④ wp-config.phpの修正を元に戻す。
  • 手順⑤ header.phpを編集する。

.icoファイルはそのままだとメディアにアップロードできないので一時的に設定を変更してアップロードするやり方です。

手順① favicon.icoを準備する。

その1と同じです。

自作かフリーのサイトから気に入ったファイルをダウンロードします。
.icoファイルに変換します。

私は下記サイトを使わせてもらいました。
png→ico変換
https://convertio.co/ja/png-ico/

手順② wp-config.phpを修正する。

エックスサーバーにログイン。
[ファイルの管理]を開きます。
ドメイン名/public_html/wp-content/wp-config.php を編集します。

一番下の行に
define('ALLOW_UNFILTERED_UPLOADS', true);
を追加して保存します。

wp-config.phpどこにあるの? は下記サイトを参考にしました。
https://matatabi-travel.net/wp-config-doko/

icoファイルが置けない! は下記サイトを参考にしました。

WordPressでファビコン(.ico)をアップロードする方法

手順③ favicon.icoをアップロードする。

WordPressのメディアにファイルをアップロードします。

手順④ wp-config.phpの修正を元に戻す。

手順②で追加した
define('ALLOW_UNFILTERED_UPLOADS', true);
を削除して保存します。

セキュリティ的に戻したほうが良いそうです。

手順⑤ header.phpを編集する。

その1と同じです。

WordPressの外観から
header.phpを選択して、
</head>の上あたりに
<link rel="shortcut icon" href="favicon.icoのパス">
を追加します。

ファビコンが表示されているはずです。

その2の手順の場合、ファビコンのパスが下記のようになってしまうみたいです。
アップロードした年/月のフォルダに入る。
../wp-content/uploads/2022/05/favicon.ico