この記事でわかること

  • サイトのロゴと、ブラウザのタブに出るサイトアイコンの違い
  • サイトロゴブロックでロゴを入れ、大きさや形を整える手順
  • ロゴの画像を、そのままサイトアイコンにも使う設定
  • ロゴと別の画像をサイトアイコンにする場所と、従来のテーマでの設定場所

サイトの上の部分に会社やお店のロゴを出したい、ブラウザのタブやブックマークにも同じ印を出したい。WordPressでは、この2つは別々の設定です。前者がサイトのロゴ、後者がサイトアイコン(ファビコンとも呼ばれます)で、設定する画面も違います。この記事では、2つの違いと、それぞれの設定のしかたを順に説明します。

内容は、WordPress.orgの公式の資料3つを、2026年10月27日に読んで確かめたものです。サイトロゴブロックの資料は、2026年8月18日にWordPress 7.1の内容に合わせて更新されています。画面のボタンや項目の名前は、WordPressの公式の日本語の訳(7.1系)で表記を確かめました。手元でWordPressを動かして操作したわけではありません。テーマや版が違うと、画面の並びや名前が変わることがあります。

結論: ロゴはサイトロゴブロック、アイコンは一般設定

結論から言うと、ページに出すロゴはサイトロゴブロックで入れ、タブに出すサイトアイコンは「設定」→「一般」で選びます。 ロゴと同じ画像でよければ、サイトロゴブロックの設定を1つオンにするだけで、サイトアイコンにも使えます。場面ごとの設定場所は次のとおりです。

やりたいこと 場所
ページにロゴを出す サイトロゴブロック
ロゴをアイコンにも使う ブロックの設定
別の画像をアイコンに 「設定」→「一般」
従来のテーマのロゴ 「サイト基本情報」
ロゴを外す 「置換」→「リセット」
ロゴの角を丸くする スタイルの「角丸」

ロゴとサイトアイコンは、出る場所が違う

公式の資料では、ロゴはサイトの印となる画像で、サイトアイコンやファビコンとは違い、トップページなどのサイトのページにだけ表示されるものだとしています。訪れた人がページを開いたときに、ヘッダーなどで目にする画像です。

サイトアイコンは、ブラウザのタブやアドレスの欄、ブックマークに出る小さな画像です。公式の資料によると、スマートフォンでアプリのアイコンとして使われることもあります。小さく表示されるため、ロゴの細かい文字は読めなくなることがあります。

サイトロゴブロックでロゴを入れる

ブロックテーマでは、ロゴはサイトロゴブロックで入れます。公式の資料では、このブロックは主に、サイトエディターでテンプレートを編集するときに使うとしています。

  1. ブロックを入れる: サイトエディターを開き、ブロックインサーターのアイコンを押して「サイトロゴ」を探します。新しい段落で「/site-logo」と打って入れることもできます
  2. 画像を選ぶ: ブロックの中のアイコンを押し、新しい画像をアップロードするか、メディアライブラリから選びます
  3. 大きさを整える: ブロックの端の印をドラッグするか、設定のサイドバーの「画像の幅」で数字を変えます

公式の資料によると、サイトロゴブロックに入れた画像を変えると、サイトの中のすべてのサイトロゴブロックに同じ変更が反映されます。ヘッダーとフッターの両方にロゴを置いていても、差し替えは1回で済みます。

ロゴの画像を、サイトアイコンにも使う

ロゴと同じ画像をタブにも出したいときは、サイトロゴブロックの設定のサイドバーで「サイトアイコンとして使用する」をオンにします。公式の資料では、この設定でブロックの画像がそのままサイトアイコンになるとしています。

この項目は、サイトロゴブロックに画像を入れた後にだけ表示されます。設定のサイドバーには、ほかに「画像にホームへのリンクを付ける」(最初からオン)と「新しいタブで開く」もあります。

ロゴと別の画像をサイトアイコンにする

横に長いロゴは、タブの小さな四角の中では見づらくなりがちです。ロゴの頭文字だけの画像など、別の画像をアイコンにしたいときは、サイトアイコンの設定で選びます。公式の資料によると、WordPress 6.5からは、サイトアイコンは一般設定で設定します。

  1. 画像を用意する: 縦と横が512ピクセル以上の正方形の画像を作り、メディアライブラリにアップロードします。形式はPNGがすすめられています
  2. 一般設定を開く: 管理画面の「設定」→「一般」を開きます
  3. アイコンを選ぶ: 「サイトアイコンを選択」を押し、用意した画像を選びます

画像のアップロードや、アップロードした画像の整理のしかたは、WordPressのメディアライブラリで画像を管理する方法にまとめています。

従来のテーマでの設定場所

ブロックテーマでないテーマを使っている場合は、「外観」→「カスタマイズ」の「サイト基本情報」で、ロゴとサイトアイコンの両方を設定します。公式の資料では、ここにロゴ・サイトのタイトル・キャッチフレーズ・サイトアイコンの項目が並んでいます。

ロゴは「ロゴを選択」から、サイトアイコンは「画像を選択」から、メディアライブラリの画像を選ぶかアップロードします。公式の資料によると、WordPress 4.3から6.4までは、サイトアイコンはこの画面で設定していました。公式の資料は、favicon.icoのファイルを自分で用意してテーマのファイルに書き足すより、このサイトアイコンの機能を使うよう強くすすめています。

ロゴを差し替える・形を整える

サイトロゴブロックのツールバーの「置換」から、別の画像に替えられます。同じメニューの「リセット」を選ぶと、ロゴの画像を外せます。

ツールバーの「切り抜き」では、エディターの中で画像の一部を切り出したり、回したり、裏返したりできます。公式の資料によると、切り抜いた画像は新しいファイルとして保存されるため、元の画像はメディアライブラリに残ります。設定のサイドバーの「スタイル」のタブで「角丸」を選ぶと、ロゴの形を丸くできます。

自分で設定するか、任せるかの判断

目安は、「使うロゴの画像がもう決まっていて、テーマのヘッダーにロゴの場所があるか」です。決まっていれば、この記事の手順で自分で入れられます。差し替えも、ブロックの「置換」で戻せます。

ロゴのデザインそのものを作るところから始める場合や、ヘッダーの並びを大きく作り直したい場合は、作業が画像の設定を超えます。サイトを作った人や、デザインを頼む相手に相談してから進めます。

つまずきやすいところ

  • ロゴを入れればアイコンも変わると思う: ロゴとサイトアイコンは別の設定です。「サイトアイコンとして使用する」をオンにするか、一般設定で選びます
  • 「サイトアイコンとして使用する」が見つからない: サイトロゴブロックに画像を入れる前は表示されません
  • 長方形の画像をアイコンにする: サイトアイコンは、512ピクセル以上の正方形を用意します
  • ロゴの近くにメニューを並べたい: ヘッダーのメニューは、ナビゲーションブロックで作ります。手順はWordPressでサイトのメニューの作り方で紹介しています
  • ロゴの下に同じ案内の文をページごとに貼る: どのページにも同じブロックを入れたいときは、WordPressの同期パターンで同じブロックを使い回す方法が使えます

まとめ

  • ロゴはサイトのページに出る画像、サイトアイコンはブラウザのタブやブックマークに出る小さな画像で、設定は別です
  • ブロックテーマでは、ロゴをサイトロゴブロックで入れ、「サイトアイコンとして使用する」でアイコンにも使えます
  • 別の画像をアイコンにするときは、512ピクセル以上の正方形を用意し、「設定」→「一般」の「サイトアイコンを選択」から選びます
  • 従来のテーマでは、「外観」→「カスタマイズ」の「サイト基本情報」で両方を設定します