WordPressでブラウザで表示した時にタブやお気に入りに表示されるFaviconとスマホでホーム画面に追加したときに表示されるアプリアイコンを設定する方法を紹介します。
目次
Favicon、アプリアイコンとは?
Faviconとは、以下のようなブラウザのタイトルバーやお気に入りに入れた時のアイコンのことです。
![](https://lifehack.world/wp-content/uploads/2020/09/img_5f6e04c859e9c.png)
アプリアイコンとは、スマホでWebページをホーム画面に追加した時に表示されるアイコンです。
![](https://lifehack.world/wp-content/uploads/2020/09/img_5f6e04f2dcd0d.png)
WordPressでのFaviconとアプリ用アイコンの設定方法
WordPressでは、カスタマイザーで設定します。
ツール、カスタマイズの順にクリックします。
![](https://lifehack.world/wp-content/uploads/2020/09/img_5f6e05f25095b.png)
サイト基本情報をクリックします。
![](https://lifehack.world/wp-content/uploads/2020/09/img_5f6e05f84063b.png)
サイトアイコンを選択をクリックします。
![](https://lifehack.world/wp-content/uploads/2020/09/img_5f6e061fa2d03.png)
メディアライブラリに画像をアップロードします。
アップロードする画像は512 x 512 ピクセルのサイズの画像を指定してください。
以下のようにFaviconとアプリアイコンのプレビューが表示されます。
![](https://lifehack.world/wp-content/uploads/2020/09/img_5f6e064866996.png)
最後に、公開ボタンをクリックすれば完了です。
確認
実際にアイコンの表示を確認してみましょう。
パソコンのブラウザー上にアイコン表示
![](https://lifehack.world/wp-content/uploads/2020/09/img_5f6e08ace4a47.png)
iPhoneのアイコン表示
![](https://lifehack.world/wp-content/uploads/2020/09/img_5f6e11956fb7f.png)
Androidのアイコン表示
![](https://lifehack.world/wp-content/uploads/2020/09/img_5f6e1048d9b09.png)
それぞれ、設定されていることが確認出来ました。