サイトアイコンはブラウザのタブやブックマークに表示される小さな画像です。正方形で見分けやすい画像を用意し、WordPressのサイト基本情報から設定します。
画像を準備する
正方形で、縮小しても形が分かる画像を用意します。細い文字や小さな説明文はつぶれるため、記号や頭文字などシンプルな要素が向いています。
設定場所
ブロックテーマではサイトエディターのサイト基本情報、テーマによっては「外観」→「カスタマイズ」→「サイト基本情報」から設定します。
「設定場所」まで進めたら、最初より画面の意味が分かってきました。
でも、保存した後にどこを見れば成功なのか、まだ少し心配です。
その不安は自然だよ。
設定画面の保存表示だけで終わらせず、公開側で変化を一つ確認すれば判断しやすい。
一度に全部を確認しなくていいんですね。
今回変えた場所だけ見るなら、私も見落とさずに進められそうです。
そう。
変えた項目と確認する画面を一組にして進めれば、原因が分からなくなるのを防げるよ。
切り抜きを確認
アップロード後に正方形の切り抜き位置を確認します。画像の端に重要な要素があると小さく見えにくいため、中央に余白を持たせます。
反映されない時
ブラウザが古いアイコンを保持することがあります。別のブラウザやプライベートウィンドウでも確認し、少し時間を置いて再読み込みします。
最後に確認すること
- 変更前に、何を直す操作かを確認した
- 保存または更新が完了したことを確認した
- 公開画面をPCとスマートフォンで開いた
- 分からない項目を推測だけで変更していない
一度で完璧に覚える必要はありません。この記事の順番どおりに一項目ずつ操作し、結果を確認してから次へ進めば、初心者でも安全に設定できます。
結論：512px以上の正方形PNGを用意する
サイトアイコンは、ブラウザのタブ、ブックマーク、WordPressアプリなどでサイトを見分ける小さな画像です。WordPress公式は、縦横512px以上の正方形とPNG形式を案内しています。細かい文字は読めないため、ロゴの記号や頭文字など単純な図柄にします。
サイトロゴとの違い
| 比較 | サイトアイコン | サイトロゴ |
|---|---|---|
| 主な表示 | ブラウザタブ・ブックマーク | サイトのヘッダー |
| 形 | 正方形 | 横長などテーマに合わせる |
| 文字 | 小さくても識別できる最小限 | サイト名を含める場合がある |
画像を作る時の確認
- 512×512px以上の正方形
- PNG形式を基本にする
- 四隅へ重要な要素を置かない
- 16〜32px程度でも形が分かる
- 背景色と図柄のコントラストがある
- 他社ロゴや権利のない素材を使わない
サイト名全体を小さな正方形へ入れると、タブではつぶれて読めません。「W」の一文字、特徴的なマーク、ロゴの記号部分などへ絞ります。
WordPress 6.5以降の一般設定から設定する手順
- 「設定」→「一般」を開きます。
- 「サイトアイコン」を探します。
- 画像を選択し、用意した正方形画像をアップロードします。
- 表示されるプレビューで切り抜きを確認します。
- 変更を保存します。
- 別タブでトップページを開き、ブラウザタブの小さな画像を確認します。
サイトエディターから設定する場合
ブロックテーマでは「外観」→「エディター」でサイトロゴブロックを使い、その画像をサイトアイコンとして利用できます。
- 「外観」→「エディター」でヘッダーを開きます。
- サイトロゴブロックを選択します。
- 画像を設定し、右側のブロック設定を開きます。
- 「サイトアイコンとして使用」をオンにします。
- 保存対象を確認し、「保存」を押します。
ロゴが横長の場合、そのままサイトアイコンへ使うと小さく切り抜かれます。アイコン用には正方形の別画像を用意したほうが見分けやすくなります。
クラシックテーマで設定する場合
- 「外観」→「カスタマイズ」を開きます。
- 「サイト基本情報」または同等の項目を開きます。
- 「サイトアイコン」で画像を選択します。
- 切り抜きを確認して公開します。
一般設定、サイトエディター、カスタマイザーのどれが表示されるかはWordPressとテーマの構成で異なります。同じ画像を複数画面へ重複登録する前に、現在使える正式な設定場所を一つ選びます。
変更したのに古いアイコンが出る時
| 症状 | 原因候補 | 確認 |
|---|---|---|
| 一般設定は新しい | ブラウザキャッシュ | 別ブラウザ・シークレットウィンドウで開く |
| 一部ページだけ古い | サイトキャッシュ | キャッシュ削除後に再読み込み |
| 検索結果だけ古い | 検索エンジンの再取得待ち | 公開HTMLを確認して待つ |
| タブがぼやける | 元画像が小さい | 512px以上の正方形へ交換 |
| ロゴの端が切れる | 重要部分が四隅にある | 余白を入れた正方形画像へ変更 |
公開後に確認する場所
- トップページのブラウザタブ
- 記事ページのブラウザタブ
- スマートフォンのブックマーク追加画面
- WordPress管理画面やサイトエディター左上
- シークレットウィンドウ
成功の目印は、一般設定へ画像が保存され、キャッシュのないブラウザでトップと記事のタブに同じアイコンが表示されることです。
サイト名変更時の扱い
サイト名やブランドカラーを変更した時は、ロゴだけでなくサイトアイコン、OG画像、SNSプロフィールも確認します。アイコンURLが変わっても、ブラウザや検索結果には古い画像が一時的に残るため、何度も設定し直さず公開HTMLの状態を基準にします。
小さく表示して読めるか確認する方法
作成した512px画像をそのまま見て判断せず、32px程度まで縮小したプレビューを作ります。線が細すぎる、文字がつぶれる、背景と同化する場合は、要素を減らし線を太くします。PCのタブは背景色が明るい場合と暗い場合があるため、輪郭が失われないかも確認します。
アイコンに向かない画像
- サイト名を一行すべて入れた横長ロゴ
- 細かな写真や人物の集合写真
- 淡い色だけで境界が分からない図柄
- 端まで文字やマークが詰まった画像
- 他社の商品ロゴと似た画像
サイトアイコンは説明用画像ではなく、見分けるための標識です。情報量より識別しやすさを優先します。
画像を差し替える前の記録
現在のアイコン画像URLと元ファイルを控えてから差し替えます。新しい画像が見えにくかった場合に戻しやすくなります。メディアライブラリの古い画像は、公開側で新アイコンを確認するまで削除しません。ヘッダーのサイトロゴと同じファイルを共有している場合、削除するとロゴまで消える可能性があります。
複数サイトを運営する場合
同じブラウザで複数のWordPress管理画面を開くなら、サイトごとに色や記号を変えると誤操作を防ぎやすくなります。似たアイコンを使い回さず、タブだけで本番・検証サイトを見分けられるデザインにします。
よくある質問
ロゴと同じ画像でよいですか？
小さくしても判別できれば使えます。横長ロゴはサイトアイコン用に正方形へ整える必要があります。
すぐに変わらないのは失敗ですか？
キャッシュで古い画像が残ることがあります。設定保存を確認し、別環境でも確認してください。