![とみー](https://www.beginner-blogger.com/wp-content/uploads/2021/08/o621_1.png)
サイトアイコンの設定はテーマによらず共通です!
参考 サイトアイコンの役割や作成ツールなど、前提知識に関してはこちらの記事をご覧ください。
サイトアイコンとして使う画像の用意
![サイトアイコンとして使う画像](https://www.beginner-blogger.com/wp-content/uploads/2021/09/6e0eba4f0901e4342a977efa90154458.png)
「理論編」でも触れましたが、WordPress が推奨するアイコンサイズは次の通りです。
また、Google は48ピクセルの倍数の画像を設定することを求めているため、この点に注意して画像を用意しましょう。
要求されているサイズ自体は 512 × 512 ピクセル以上と比較的余裕のあるサイズとなっていますが、ブラウザのタブ部分などの小さい場所に表示されるため、複雑なデザインや細かな装飾は控えましょう。
最小で 16 × 16 ピクセルのサイズで表示されるため、この大きさでもわかるようなシンプルなデザインが好ましいです。
サイドメニューから「外観」を開く
画像が用意できたらWordPressにログインし、管理画面左側のサイドメニューにある「外観」からカスタマイズを開きましょう。
![外観:カスタマイズ](https://www.beginner-blogger.com/wp-content/uploads/2021/07/91f3c85d60d4e2c3e207d15fcd88812c-1.png)
テーマカスタマイザーと呼ばれる次のような画面が開きます。
![テーマカスタマイザー](https://www.beginner-blogger.com/wp-content/uploads/2021/07/93f3dcfb9be682f3a9b8bf40752056c4.png)
テーマカスタマイザーでアイコンを設定
サイト基本情報を開く
テーマカスタマイザーから「サイト基本情報」を開きましょう。
![テーマカスタマイザー:サイト基本情報](https://www.beginner-blogger.com/wp-content/uploads/2021/07/83a5c4d3641f6758c4740fc19d62f318-e1625185798924.png)
「サイト基本情報」のタブが開きます。
サイトアイコンを選択
![サイトアイコンを選択](https://www.beginner-blogger.com/wp-content/uploads/2021/07/271d6dadfd9e3a827a4619dc7aeaec19-e1625186208960.png)
「サイトアイコンを選択」をクリックしましょう。
画像を選択する画面が開きます。
画像のアップロード・選択
![画像を選択](https://www.beginner-blogger.com/wp-content/uploads/2021/07/071bc68375ca4efc9370a8bacbc79507.png)
すでにアップロードが済んでいる画像をアイコンに設定したい場合はここから選びましょう。
新たにアップロードする場合は、左上の「ファイルをアップロード」から「ファイルを選択」です。
![画像をアップロード](https://www.beginner-blogger.com/wp-content/uploads/2021/07/fa1ccfe07177019c2fad05465d90b96c.png)
画像の切り抜き
画像を選択すると、画像を切り抜く画面に切り替わります。
![画像切り抜き](https://www.beginner-blogger.com/wp-content/uploads/2021/07/a7811592699b37e71bc0dc1241a4432a.png)
明るくなっているところの大きさや位置を調整してアイコンとして使われる部分を決めます。
選択した画像が正方形の場合は何もしないで大丈夫です。
画像の切り取りが完了したら、右下の「画像切り抜き」をクリックしましょう。
テーマカスタマイザーでアイコンを確認
「サイトアイコン」の部分を確認しましょう。
![テーマカスタマイザー:サイトアイコン](https://www.beginner-blogger.com/wp-content/uploads/2021/07/8fc33e207854d3da57b4282a4def401a.png)
ブラウザのタブに表示されているアイコンは非常に小さいので、デザインが崩れていないかをチェックします。
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2020/07/o619_1-1-e1595972856273.png)
右側の大きいのはショートカットを作成した場合のアイコンです。
あまりに小さくてデザインがよく分からないなどの理由で別の画像に差し替えたい場合は、「画像を変更」をクリックします。
問題がなければ右上の「公開」をクリックしましょう。
![サイトアイコン:公開済み](https://www.beginner-blogger.com/wp-content/uploads/2021/07/ccef0a149c8c0d7bbacb70a283664c30-e1625228462341.png)
「公開済み」に変われば完了です。
サイトアイコンが設定されていることを確認
設定が完了すると、ブラウザのタブ部分にアイコンが表示されます。
![Webブラウザのタブ](https://www.beginner-blogger.com/wp-content/uploads/2021/07/a3ab8ee91cc0f338d2b38d126ba73df2.png)
また、スマートフォンなどのモバイル端末で Google 検索をした場合にも表示されることを確認しましょう。
![サイトアイコン:検索結果](https://www.beginner-blogger.com/wp-content/uploads/2021/07/6d4a3d48ef36d60b38890a9dcb876003.png)
「公開済み」の状態になっても実際に反映されるまではしばらく時間がかかります。
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2021/08/o622_4.png)
1、2週間かかったという方もいるようです。
管理人とみーの場合は、アイコンを設定した直後からブラウザのタブ部分には問題なく表示されるようになりましたが、検索結果に反映されるまでは約2週間ほどかかりました。
ある程度様子を見てみて、それでも反映されなかったら何か他の機能(キャッシュやプラグインなど)が邪魔をしている可能性があります。その場合は少し手間ですが、使用しているプラグインなどについて1つ1つずつサイトアイコンとの互換性を調べましょう。
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2021/08/o621_1.png)
お疲れさまでしたー!
コメント