今回は、WordPressでサイトアイコン（ファビコン）を設定する方法を解説していきます。
【WordPress】サイトアイコン（ファビコン）を設定する方法
1.ファビコン用の画像をWordPressにアップロードしておく
2.「外観→カスタマイズ → サイト基本情報」に移動する
3.「サイトアイコン」の項目で画像を選択する
これで完了です。👍 pic.twitter.com/Rb2IPp1OgS
— マルユメ@WordPressテーマ開発してブログ運営 (@maruyumeblog) December 7, 2022
という方は、本記事が参考になるはずです。
サイトアイコンは以下の画像のように、ブラウザのタブの横に表示されるアイコンです。
WordPressではこのアイコンを簡単に設定できます。
手順は簡単なので、1分くらいで読めます。
サイトアイコン（ファビコン）の設定方法
具体的な手順は、以下の通りです。
- ファビコン用の画像を用意する
- 画像をWordPressにアップロードする
- ファビコンを設定する
詳しく解説していきます。
ファビコン用の画像を用意する
まず、ファビコン用の画像を用意します。
512×512ピクセル以上のものであれば、どんな画像でも設定できます。
例えば、当サイトのファビコンはアルファベット一文字の画像を設定しています。
下記に使えそうなフリー素材があるサイトを貼っておくので、使えそうなものを探してみてください。
画像をWordPressにアップロードする
こちらに関しては、以下の記事をご覧ください。
ファビコンを設定する
最後に、管理画面にログインして「外観 → カスタマイズ → サイト基本情報 → サイトアイコンを選択」でファビコンを設定すれば完了です。
おまけ：サイトにコードを追加してファビコンを設定する
おまけとして、サイトのプログラムにファビコンのコードを追加する方法を解説していきます。
とはいっても、やることは簡単です。
下記コードを、「header.php」のheadタグ内に追加するだけです。
<head>
<!-- ・・・省略 -->
<!-- 追加する↓ -->
<link rel="icon" href="ファビコンとして表示したい画像のURLを入力する">
<!-- ・・・省略 -->
</head>「header.php」は、WordPress管理画面の「外観→テーマファイルエディター」から編集できます。
また、「ファビコンとして表示したい画像のURL」については、WordPress管理画面のメディアのページからURLを取得できます。
「URLをクリップボードにコピー」をクリックするとURLをコピーできるので、href=のところにペーストすればOKです。
カスタマイザーとheader.phpの両方でファビコンを設定するとどうなる？
ちなみに、「カスタマイザー」と「header.php」の両方でファビコンを設定すると、カスタマイザーでの設定が優先されます。
Chromeのデベロッパツールでサイトのプログラムを見てみると、カスタマイザー、header.phpの両方の設定が出力されていますが、実際の表示はカスタマイザーでの設定が優先されるようです。
以上になります。本記事を参考にして、ファビコンを設定してみてください。
WordPressテーマ「SIMPLE」
「SIMPLE」は、シンプルなデザインと多彩な機能を兼ね備えたオリジナルWordPressテーマです。
RELATED POSTS
【WordPress】サイトのキャッチフレーズを設定・取得する方法を解説【コードあり】
【WordPress】サイトのタイトルを変更・取得する方法を解説【コードあり】
PREV POST
【WordPress】サイトのタイトルを変更・取得する方法を解説【コードあり】
NEXT POST
【WordPress】カテゴリーを追加する方法
