WordPress サイトアイコンの設定手順を徹底解説

ブラウザのタブ左上に赤いサイトアイコンが表示されている様子を示すスクリーンショット AIブログ副業

あなたが WordPress でブログを運営している場合、サイト全体の印象を左右するサイトアイコンを設定しておくことが大切です。

サイトアイコンは、ブラウザのタブやスマートフォンのホーム画面などに表示される小さな画像であり、ブログの認識性や信頼性を高める役割を持ちます。

この記事では、WordPress でサイトアイコンを設定するための具体的な手順について分かりやすく解説していきます。

※当ブログ内で使用している専門用語の意味については、「AI副業でよく使われる用語集(初心者向け)」のページをご参照ください。

サイトアイコンとは

サイトアイコンとは、以下のようにブラウザのタブやスマホのホーム画面などに表示される、小さな丸いシンボル画像のことです。

サイトアイコン設定手順1

このアイコンを設定することで、あなたのブログがひと目で認識できるようになり、信頼感やブランドイメージの向上にもつながります。

サイトアイコン用の画像の準備

サイトアイコンを設定するためには、まずサイトアイコンとして表示するための画像が必要となります。

サイトアイコン画像の推奨値は、以下の通りです。
画像サイズ:512×512ピクセル以上
拡張子:PNG

*拡張子とは、ファイル名の末尾につく「.jpg」や「.png」などの文字列で、ファイルの種類を示します。PNGは、画像を劣化させずに保存できる形式。

サイトアイコン画像を設置する際の推奨サイズは512×512ピクセル以上と大きなものですが、実際に見るときの実サイズは 16〜32px 程度ですので、かなり単純で目立つものにする必要があります。

下の画像は、私のサイトで使用しているサイトアイコンです。

サイトアイコンの例

上のような単純なデザインであれば、当ブログ内で紹介しているAI画像生成ツール「Leonardo.Ai」を使わなくても、ChatGPTに「こんな画像作って」とお願いすれば、すぐに作ってくれます。

ChatGPTの基本的な使い方については、以下の記事を参考にして下さい。

ChatGPTに指示を出す文章(プロンプト)は、以下のような程度で十分です。

「ブログ用のサイトアイコンを作成して。背景色は〇色で、中央に△の白文字(又は女性の顔など)の正方形の画像」

すると、今回は以下の画像をChatGPTが生成してくれました。

赤枠内のアイコンをクリックして画像をダウンロードしましょう。

サイトアイコン設定手順2

ブラウザ右上隅にあるダウンロードアイコンをクリックすると、「最近のダウンロード履歴」が表示されますので、一番上のフォルダアイコンをクリックします。

サイトアイコン設定手順3

すると、「Downloads」フォルダが自動的に開き、その中にダウンロードした画像が保存されていますので、それをダブルクリックしてください。

サイトアイコン設定手順4

開いた画像の最上部にはファイル名が表示され、拡張子は「png」となっているのでOK。

但し、画像最下部に表示されている画像サイズを見ると、「1024×1024」となっていますので、サイトアイコンの推奨サイズ「512×512」に合致していません。

ChatGPTに画像生成を指示する際にサイズを指定すれば良さそうですが、仮にサイズを指定したとしても、ChatGPTの仕様で正方形の場合は、このサイズでのみ出力されるようです。

サイトアイコン設定手順5

このままのサイズでサイトアイコンに設定することも可能かもしれませんが、念のため推奨サイズの「512×512」に縮小しておきたいと思います。

ここでは、画像サイズの変更だけではなく、かなり幅広い機能を持ち、しかもログインなしで無料で使用できる画像編集用オンラインツール「iLoveIMG」をご紹介します。

以下のリンクをクリックして「iLoveIMG」を開いたら、「画像のサイズ変更」をクリックします。

https://www.iloveimg.com/ja

サイトアイコン設定手順6

下の画面が表示されますので、「画像を選択」へ縮小する画像をドラッグ&ドロップします。

サイトアイコン設定手順7

以下の画面で「幅 (px):」に「512」と入力します。

「横縦比を維持」にチェックが入っていれば、高さは自動的に「512」に変わります。

最後に「画像のサイズ変更」ボタンをクリックします。

サイトアイコン設定手順8

すると、Downloadsフォルダに縮小された画像が保存されていますので、それをダブルクリックして開いてみてください。

サイズがきちんと「512×512」に縮小されていることが確認出来ました。

なおファイル名が「ChatGPT Image 2025年11月7日 10_56_44 (1).png」のようになっていると思いますので、短い名前(半角英数字)に変更しておきましょう。

サイトアイコン設定手順9

ここまでで、サイトアイコン用画像の準備が整いました。

サイトアイコンの設置手順

次に出来上がったサイトアイコンを、あなたのブログへ設置しましょう。

WordPress の管理画面から「外観 → カスタマイズ」をクリックします。

サイトアイコン設定手順10

次のページで「サイト基本情報」をクリックします。

サイトアイコン設定手順11

次に「サイトアイコンを選択」をクリックします。

サイトアイコン設定手順12

以下の画面内に、先ほど作成したサイトアイコン用の画像をドラッグ&ドロップします。

サイトアイコン設定手順13

以下の画面が表示されたら、そのまま画面右下隅にある「選択」ボタンをクリックします。

サイトアイコン設定手順14

以下の画面で「サイトアイコン」のところに今設定した画像が表示されていることを確認し、「公開」ボタンをクリックします。

サイトアイコン設定手順15

あなたのブログを開き、タブの左端にサイトアイコンが表示されていたら、設定作業は完了です。

サイトアイコン設定手順16

まとめ

サイトアイコンを設定しておくことで、あなたのブログを訪れた読者が視覚的に認識しやすくなります。

ブラウザのタブやスマートフォンのホーム画面でも統一されたデザインが表示され、信頼性の向上にもつながります。

WordPress の管理画面から簡単に設定できるため、まだ設定していない場合は早めに整えておくことをおすすめします。

アイコン画像は 512 × 512 の正方形で用意し、見た目が潰れないシンプルなデザインにしておくと安心です。

コメント

タイトルとURLをコピーしました