サイトのアイコンはファビコンと呼ばれています。
WordPressで作ったサイトのファビコンは何も設定していない状態だとWordPressのマークが表示されます。
![](https://affinger418.com/wp-content/uploads/75c7c9650c51d34365b74daa03681579.png)
![](https://affinger418.com/wp-content/uploads/1d3e5dff9f7df7cdf0e5c28861c190e2.png)
AFFINGER6ではファビコンは簡単に設定することができます。
ファビコン設定時のワンポイントなどを踏まえて解説したいと思います。
今回はAFFINGER6でファビコンの設定方法について解説していきます。
サイトアイコン(ファビコン)
ファビコンはサイトのアイコンに当たる部分になります。
PC表示でサイトを表示している時のタブによく目がいきますが、様々なところで表示されています。
- 検索結果のURL
- お気に入りやブックマーク
- スマホ表示のアプリアイコン
実際にかなり目にする機会は多いと思います。
![](https://affinger418.com/wp-content/uploads/IMG_4520.jpg)
![](https://affinger418.com/wp-content/uploads/IMG_4521.jpg)
スマホ表示ではこんな感じで表示されています。
ファビコンの設定方法
![](https://affinger418.com/wp-content/uploads/ffbfc333a7a26a3443ecd6bcdef59836.png)
サイトアイコンに任意の画像をアップロードすれば設定完了になります。
画像のサイズは「正方形で512×512」と説明欄に書いてありますので気をつけましょう。
サイズは大きめならWordPressの方でリサイズされた画像が設定されるようになっているので、大きめの画像がおすすめです。
![](https://affinger418.com/wp-content/uploads/224c1cc68a450b5db2c3746ca0e828db.png)
画像が設定できればこのような画面になります。
Googleのファビコンのガイドラインがあるので、こちらも読んでみてください。
おすすめ設定
ファビコンの画像保存形式ですが、当サイトでは「背景透過のpng形式」をおすすめしています。
有名なサイトも最近では透過pngが多いイメージです。
![](https://affinger418.com/wp-content/uploads/020b44f67aa538f8de8a4caa5477f9c1.png)
![](https://affinger418.com/wp-content/uploads/4334f387067e77d7140737e29b21db16.png)
![](https://affinger418.com/wp-content/uploads/9b37c2152e27e24e3cb5f2570a757b51.png)
![](https://affinger418.com/wp-content/uploads/5b93ae708ccbd51065d85477baa3a1e9.png)
背景を透過pngしておくと、上記のように背景色が変わっても綺麗なアイコンで表示されます。
当サイトも背景透過で設定しています。
よくある質問
ファビコンについてよくある質問を掲載しておきます。
不具合等やうまく設定できないときに試してみてください。
サイトアイコン(ファビコン)がうまく設定されたか分かりません
ファビコンの設定画面でサイトアイコンの場所に設定したい画像が表示されていれば問題ありません。また、サイトアイコンが最初に反映されるのは投稿画面のタブなどです。
アイコンを設定しても検索結果に表示されません。
検索結果に表示されるのには時間がかかるので待ちましょう。当サイトも立ち上げ時から使っていたファビコンを最近変更しましたが、3日程度経過した時点で変更されていません。
アイコンを設定しましたが、うまく反映されません。
反映には時間がかかることもあります。すぐに反映させたい場合はスーパーリロード(Win:ctrl+F5 Mac:comand+F5)を試してみてください。
ファビコンはロゴ画像と同じくらい重要になります。
自分だけのファビコンを設定してみましょう!