WordPressアイコンの設定方法｜ファビコンの作り方・推奨サイズ・表示されない時の対処法まで解説

はじめに

WordPressサイトを運営するなら、記事の内容やデザインだけでなく「WordPressアイコン」の設定も重要です。WordPressアイコンとは、ブラウザのタブ、ブックマーク、スマートフォンのホーム画面、検索結果などに表示される小さな画像のことです。WordPressでは一般的に「サイトアイコン」と呼ばれ、ファビコンとほぼ同じ意味で使われます。WordPress.comの公式サポートでも、ファビコンはWordPressではサイトアイコンと呼ばれ、ブラウザタブ・ブックマーク・検索結果などに表示される画像だと説明されています。

ワードプレス アイコンを設定していないと、ブラウザタブに汎用的なアイコンが表示されたり、検索結果でサイトの印象が弱くなったりすることがあります。一方、サイト名やブランドに合ったアイコンを設定しておけば、ユーザーが複数のタブや検索結果の中からあなたのサイトを見つけやすくなります。

この記事では、WordPressアイコンの意味、ファビコンとの違い、推奨サイズ、作り方、管理画面からの設定方法、ブロックテーマでの設定方法、表示されない時の対処法までまとめて解説します。

1. WordPressアイコンとは？ファビコン・サイトアイコンとの違い

WordPressアイコンとは、WordPressサイトを視覚的に識別するための小さな画像です。一般的には「サイトアイコン」「ファビコン」と呼ばれます。とくに初心者の方は、WordPressアイコン、ファビコン、サイトアイコン、アプリアイコンの違いで混乱しやすいため、まずは用語を整理しておきましょう。

1-1. WordPressアイコンはブラウザタブや検索結果に表示される小さな画像

WordPressアイコンは、サイトを開いたときにブラウザタブの左側に表示される小さな画像です。たとえば企業サイトなら会社ロゴ、個人ブログなら頭文字やキャラクター、メディアサイトならブランドカラーを使ったマークなどがよく使われます。

Google検索結果にもファビコンが表示されることがあります。Google公式ドキュメントでは、サイトにファビコンが設定されている場合、Google検索の検索結果に表示されることがあると案内されています。

WordPressアイコンは小さなパーツですが、サイトの第一印象に関わります。特にスマートフォンでは検索結果やホーム画面上で目立ちやすいため、サイトの信頼感や認知度を高めるうえでも設定しておきたい要素です。

1-2. 「サイトアイコン」「ファビコン」「アプリアイコン」の違い

「サイトアイコン」は、WordPress管理画面で使われる名称です。WordPressでアイコンを設定する場合、多くの画面では「サイトアイコン」と表示されます。

「ファビコン」は、Web全般で使われる呼び方です。英語の「favorite icon」に由来し、ブラウザのタブやブックマークでサイトを見分けるための小さなアイコンを指します。

「アプリアイコン」は、スマートフォンのホーム画面にWebサイトを追加したときなどに表示されるアイコンです。WordPressでサイトアイコンを設定しておくと、ブラウザタブやブックマークだけでなく、端末やブラウザの仕様に応じてホーム画面用アイコンとしても使われることがあります。

つまり、WordPressでは「サイトアイコン」と呼ばれる設定が、一般的な「ファビコン」や一部の「アプリアイコン」の役割も兼ねると考えるとわかりやすいです。

1-3. WordPressアイコンを設定するメリット

WordPressアイコンを設定する主なメリットは、サイトを見つけてもらいやすくなることです。ユーザーが複数のブラウザタブを開いているとき、アイコンがあると目的のページに戻りやすくなります。

また、検索結果やブックマーク一覧でも視覚的な目印になります。サイト名だけでは似たようなページに埋もれてしまう場合でも、ブランドカラーやロゴを使ったアイコンがあれば、ユーザーに覚えてもらいやすくなります。

さらに、サイト全体の信頼感も高まります。アイコンが未設定のままだと、初期状態のサイトのように見えたり、細部まで整備されていない印象を与えたりすることがあります。特に企業サイト、店舗サイト、士業サイト、メディアサイトでは、WordPressアイコンの設定は基本的なブランディング施策のひとつです。

1-4. WordPressアイコンが表示される主な場所

WordPressアイコンは、主に次のような場所に表示されます。

  • ブラウザのタブ

  • ブックマーク一覧

  • ブラウザの履歴

  • Googleなどの検索結果

  • スマートフォンでホーム画面に追加したときのアイコン

  • WordPress.comのダッシュボード上のサイト名横

WordPress.com公式サポートでも、サイトアイコンはブラウザタブ、ブックマーク、検索結果、ホーム画面アプリアイコン、ダッシュボード内などに表示されると説明されています。

設定した直後にすべての場所へすぐ反映されるとは限りません。ブラウザキャッシュ、サーバーキャッシュ、CDN、Googleの再クロールなどの影響で、反映まで時間がかかる場合があります。

2. WordPressアイコンに適した画像サイズ・形式・デザイン

WordPressアイコンをきれいに表示するには、画像サイズ、ファイル形式、デザインのシンプルさが重要です。大きすぎても問題になりにくいですが、小さすぎる画像や横長の画像を使うと、ぼやけたり見切れたりする原因になります。

2-1. WordPress推奨サイズは512×512px以上の正方形

WordPressアイコンには、512×512px以上の正方形画像を用意するのがおすすめです。WordPress.com公式サポートでも、サイトアイコン用画像は正方形で、サイズは少なくとも512×512pxと案内されています。

WordPress本体側でもサイトアイコン関連の処理では512pxのサイトアイコンURLが使われます。開発者向けドキュメントでは、has_site_icon() が512サイズのサイトアイコンURLを取得して判定していることが確認できます。

実際の表示サイズは16×16px、32×32px、180×180px、192×192pxなど、ブラウザや端末によって変わります。WordPressではサイトアイコンを設定すると、必要に応じて複数サイズのアイコン用タグが出力されます。WordPressのwp_site_icon()は、32×32、192×192、180×180、270×270などのアイコン用メタタグを出力する処理を持っています。

2-2. ファイル形式はPNG・JPG・ICOのどれがよいか

WordPressアイコンには、PNG形式がおすすめです。PNGは背景透過に対応しており、ロゴやマークをきれいに表示しやすいからです。背景を透明にしたい場合や、円形・角丸のデザインにしたい場合はPNGが向いています。

JPG形式も利用できますが、背景透過には対応していません。また、圧縮によって細部がにじむ場合があるため、文字や線の細いロゴにはあまり向いていません。

ICO形式は昔からファビコンで使われてきた形式です。複数サイズのアイコンを1つのファイルに含められるため、手動でファビコンを設置する場合には便利です。ただし、WordPress管理画面から設定するなら、通常はPNG画像を用意すれば十分です。

SVG形式については、環境によって扱いが異なります。Googleのファビコンガイドラインでは有効なファビコン形式がサポートされると説明されていますが、WordPress側ではセキュリティ上の理由で標準のメディアアップロードにSVGを許可していない場合があります。初心者はPNGで作成するのが無難です。

2-3. 背景透過・余白・視認性で失敗しないデザインのコツ

WordPressアイコンは非常に小さく表示されます。そのため、通常のロゴをそのまま縮小すると、文字が読めなかったり、細部がつぶれたりすることがあります。

失敗しないためには、次の点を意識しましょう。

  • 背景を透明にするか、ブランドカラーで塗る

  • アイコンの周囲に適度な余白を入れる

  • 細い線や小さい文字を避ける

  • 白背景・黒背景・グレー背景のすべてで見やすいか確認する

  • ロゴ全体ではなく、象徴的な一部だけを使う

特にダークモード環境では、黒や濃いグレーのアイコンが見えにくくなる場合があります。白いブラウザ背景だけでなく、黒っぽい背景でも視認性を確認しておくと安心です。

2-4. 小さく表示されても認識しやすいアイコンの作り方

小さく表示されても認識しやすいWordPressアイコンを作るには、情報量を減らすことが大切です。会社名やブログ名をすべて入れるのではなく、頭文字1文字、ロゴマーク、シンボル、単純な図形などに絞りましょう。

たとえば「Sample Blog」というブログなら、「S」や「SB」の文字だけを使ったアイコンにする方法があります。カフェのサイトならカップのシルエット、税理士事務所なら頭文字とブランドカラー、写真ブログならカメラの簡単なマークなどが適しています。

16×16px程度まで縮小しても何のアイコンか判別できるかを確認するのがポイントです。Canvaや画像編集ソフトで作った後は、実際に小さく表示してチェックしましょう。

2-5. ロゴ画像をWordPressアイコン用に加工する際の注意点

既存のロゴ画像をWordPressアイコンに使う場合は、正方形に加工する必要があります。横長ロゴをそのまま設定すると、左右が切れたり、文字が小さくなりすぎたりします。

横長ロゴの場合は、ロゴマーク部分だけを切り出す、頭文字だけにする、シンボルと背景色を組み合わせるなど、アイコン専用デザインに調整しましょう。

また、ロゴの周囲ギリギリまでデザインを配置すると、ブラウザや端末によって窮屈に見えることがあります。512×512pxのキャンバスを用意し、中央にロゴを配置し、外側に10〜20％程度の余白を残すとバランスが取りやすくなります。

3. WordPressアイコン・ファビコン画像の作り方

WordPressアイコンは、専門的なデザインソフトがなくても作れます。Canva、画像編集ツール、ファビコン生成サービス、既存ロゴなどを使えば、初心者でも短時間で作成できます。

3-1. CanvaでWordPressアイコンを作成する方法

Canvaを使う場合は、まず512×512pxの正方形デザインを作成します。検索窓で「ロゴ」「アイコン」「Instagramアイコン」などを探してもよいですが、最終的にはWordPress用にシンプルな正方形画像として整えます。

作成手順は次のとおりです。

  1. Canvaでカスタムサイズ「512×512px」を作成する

  2. 背景色をブランドカラーにする、または透明背景にする

  3. 中央に文字、ロゴ、シンボルを配置する

  4. 小さいサイズでも見やすいように要素を絞る

  5. PNG形式でダウンロードする

  6. ファイル名をsite-icon.pngなどの半角英数字にする

Canvaの無料プランでは透明背景の書き出しが制限される場合があります。その場合は、白背景やブランドカラー背景にしても問題ありません。大切なのは、ブラウザタブや検索結果で見たときに認識しやすいことです。

3-2. 既存ロゴから正方形アイコンを作る方法

すでにサイトロゴがある場合は、そのロゴを正方形に加工してWordPressアイコンを作れます。ただし、横長ロゴをそのまま縮小するのはおすすめしません。

作り方は次の流れです。

  1. ロゴ画像を画像編集ツールで開く

  2. 512×512pxの正方形キャンバスを作る

  3. ロゴのシンボル部分や頭文字だけを切り出す

  4. 中央に配置し、周囲に余白を残す

  5. 背景色や透明背景を調整する

  6. PNG形式で保存する

ロゴに文字が多い場合は、文字を省略してマークだけにしましょう。たとえば企業名が長い場合、正式な社名をすべて入れるより、頭文字1〜2文字やロゴマークだけの方が見やすくなります。

3-3. 無料素材サイトを使う場合の注意点

無料素材サイトのアイコンを使う場合は、必ずライセンスを確認してください。「無料」と書かれていても、商用利用が禁止されていたり、クレジット表記が必要だったり、ロゴ利用が許可されていなかったりする場合があります。

特に企業サイトや収益化ブログで使う場合は、商用利用可能か、加工可能か、再配布に該当しないか、商標的な使い方が許可されているかを確認しましょう。

また、誰でも使える素材をそのまま使うと、他サイトと似たアイコンになる可能性があります。ブランド認知を高めたい場合は、色や形を調整し、サイト独自の印象に近づけることが大切です。

3-4. ICO形式のファビコンを作成する方法

ICO形式のファビコンを作りたい場合は、オンラインのファビコンジェネレーターを使うと簡単です。PNGやJPG画像をアップロードすると、favicon.icoとして変換してくれるサービスがあります。

一般的な手順は次のとおりです。

  1. 512×512pxまたは256×256pxの元画像を用意する

  2. ファビコンジェネレーターに画像をアップロードする

  3. ICO形式を選んで生成する

  4. favicon.icoをダウンロードする

  5. 必要に応じてサーバーのルートディレクトリへアップロードする

ただし、WordPress管理画面からサイトアイコンを設定する場合は、ICOファイルを手動で設置しなくても問題ありません。初心者はPNG画像を管理画面から設定する方法が簡単です。

3-5. ファイル名は半角英数字にしておく

WordPressアイコン用のファイル名は、半角英数字にしておきましょう。たとえば次のようなファイル名がおすすめです。

site-icon.png
favicon.png
wordpress-icon.png
brand-icon-512.png

日本語ファイル名でもアップロードできることはありますが、サーバー環境やURLエンコード、キャッシュ、CDNの影響でトラブルになる場合があります。表示されない原因を減らすためにも、ファイル名は半角英数字、ハイフン、アンダースコア程度にしておくと安心です。

4. WordPress管理画面からアイコンを設定する方法

WordPressアイコンを設定するもっとも基本的な方法は、管理画面から「サイトアイコン」を設定する方法です。クラシックテーマを使っている場合は、「外観」から「カスタマイズ」を開いて設定する流れが一般的です。

4-1. 外観メニューから「カスタマイズ」を開く

WordPress管理画面にログインし、左側メニューから「外観」→「カスタマイズ」をクリックします。

テーマによっては「カスタマイズ」が表示されない場合があります。その場合はブロックテーマを使用している可能性があるため、後述する「サイトエディター」から設定する方法を確認してください。

クラシックテーマでは、「外観」→「カスタマイズ」からサイトタイトル、キャッチフレーズ、ロゴ、サイトアイコンなどを設定できることが多いです。

4-2. 「サイト基本情報」からサイトアイコンを選択する

カスタマイズ画面を開いたら、「サイト基本情報」または「サイトアイデンティティ」をクリックします。テーマやWordPressの表示言語によって名称が少し異なる場合があります。

その中に「サイトアイコン」という項目があります。「サイトアイコンを選択」または「画像を選択」をクリックし、用意したWordPressアイコン画像を選びます。

このとき、512×512px以上の正方形PNG画像を選ぶと、切り抜きや表示崩れが起きにくくなります。

4-3. メディアライブラリに画像をアップロードする

まだ画像をアップロードしていない場合は、メディアライブラリの「ファイルをアップロード」タブから画像を追加します。

アップロードする前に、次の点を確認しておきましょう。

  • 画像サイズが512×512px以上か

  • 正方形になっているか

  • ファイル形式がPNGまたはJPGか

  • ファイル名が半角英数字か

  • 小さく表示しても見やすいか

アップロード後、画像を選択して「選択」または「サイトアイコンとして設定」をクリックします。

4-4. 画像を切り抜く・切り抜かないを選ぶ

画像が正方形でない場合、WordPress側で切り抜き画面が表示されます。必要な部分が中央に収まるように切り抜き範囲を調整しましょう。

すでに512×512pxの正方形画像を用意している場合は、切り抜かずにそのまま使えることがあります。WordPress.comの公式サポートでも、完全な正方形画像であればそのまま設定され、正方形でない場合は切り抜きが必要になると説明されています。

横長画像を無理に切り抜くと、ロゴの一部が見切れることがあります。切り抜き画面でうまく収まらない場合は、画像編集ツールであらかじめ正方形に加工してから再アップロードしましょう。

4-5. 公開してブラウザで表示を確認する

サイトアイコンを選択したら、「公開」または「保存」をクリックします。保存後、サイトを開き直してブラウザタブにアイコンが表示されているか確認しましょう。

すぐに反映されない場合は、ブラウザの再読み込み、キャッシュ削除、シークレットモードでの確認を試してください。キャッシュが残っていると、古いアイコンや初期アイコンが表示され続けることがあります。

5. ブロックテーマ・フルサイト編集でWordPressアイコンを設定する方法

近年のWordPressでは、ブロックテーマやフルサイト編集に対応したテーマが増えています。ブロックテーマでは、従来の「外観」→「カスタマイズ」ではなく、「外観」→「エディター」から設定するケースがあります。

5-1. ブロックテーマで設定画面が見つからない理由

ブロックテーマを有効化している場合、「外観」メニューに「カスタマイズ」が表示されず、「エディター」が表示されることがあります。WordPress.orgの公式ドキュメントでも、サイトエディターはブロックテーマをインストールして有効化している場合に利用できると説明されています。

つまり、設定画面が見つからないのは不具合ではなく、テーマの種類によって管理画面の構成が変わっているためです。

5-2. サイトエディターからサイトロゴ・サイトアイコンを設定する手順

ブロックテーマでWordPressアイコンを設定する場合は、次の手順で進めます。

  1. WordPress管理画面にログインする

  2. 「外観」→「エディター」を開く

  3. 左側メニューから「スタイル」または「アイデンティティ」を探す

  4. 「サイトアイコン」を選択する

  5. メディアライブラリから画像を選ぶ、または新規アップロードする

  6. 「保存」をクリックする

WordPress.com公式サポートでも、ブロックテーマを使っている場合は「外観」→「エディター」→「Identity」→「Site Icon」から設定できると案内されています。

テーマやWordPressのバージョンによって表示名や場所が異なる場合があります。見つからない場合は、サイトエディター内の検索やコマンドパレットで「サイトアイコン」「Site Icon」と検索してみましょう。

5-3. クラシックテーマとブロックテーマの設定方法の違い

クラシックテーマとブロックテーマの違いは、設定画面の入口です。

クラシックテーマでは、多くの場合「外観」→「カスタマイズ」→「サイト基本情報」から設定します。

ブロックテーマでは、「外観」→「エディター」からサイト全体のデザインやテンプレートを編集し、その中でサイトアイコンやサイトロゴを設定します。

どちらの方法でも、最終的に設定する画像の考え方は同じです。512×512px以上の正方形で、シンプルで視認性の高い画像を使いましょう。

5-4. テーマ変更時にアイコン設定が消えた場合の確認ポイント

テーマを変更した後にWordPressアイコンが消えたように見える場合は、まず管理画面の「サイトアイコン」設定を確認してください。サイトアイコン自体はWordPress側の設定として残っている場合がありますが、テーマやキャッシュの影響で表示が変わっていることがあります。

確認するポイントは次のとおりです。

  • 新テーマがブロックテーマかクラシックテーマか

  • 「外観」→「エディター」または「カスタマイズ」にサイトアイコン設定があるか

  • メディアライブラリにアイコン画像が残っているか

  • キャッシュ系プラグインが古い情報を出していないか

  • ブラウザタブだけでなく、ページのHTMLにアイコンタグが出力されているか

テーマ変更直後は、サイトロゴとサイトアイコンの設定場所が変わることもあります。見た目上は消えていても、再設定すれば解決するケースが多いです。

6. WordPressアイコンを手動で設定する方法

通常は管理画面から設定すれば十分ですが、テーマの仕様や独自実装の都合で、手動でファビコンを指定したい場合もあります。ここではHTML、functions.php、FTP、プラグインを使う方法を紹介します。

6-1. HTMLのheadタグにfaviconを指定する方法

手動でファビコンを指定する場合は、HTMLのheadタグ内に次のようなコードを追加します。

HTML
<link rel="icon" href="/favicon.ico">

PNGを使う場合は、次のように指定できます。

HTML
<link rel="icon" href="/favicon.png" type="image/png">

Google公式ドキュメントでも、検索結果にファビコンを表示するには、ホームページのヘッダーに<link rel="icon" href="/path/to/favicon.ico">のようなタグを追加すると説明されています。

ただし、WordPressテーマを直接編集すると、テーマ更新時に変更が消える場合があります。直接編集する場合は、子テーマを使うか、後述するfunctions.phpやプラグインで管理するのが安全です。

6-2. functions.phpでファビコンを読み込む方法

子テーマのfunctions.phpにコードを追加して、wp_headにファビコンタグを出力する方法もあります。

PHP
function my_custom_favicon() {
    echo '<link rel="icon" href="' . esc_url( home_url( '/favicon.ico' ) ) . '">' . "\n";
}
add_action( 'wp_head', 'my_custom_favicon' );

この方法では、サイトのルートディレクトリにfavicon.icoを置いておく必要があります。

ただし、WordPressには標準でサイトアイコンを出力する仕組みがあります。管理画面からサイトアイコンを設定している場合、重複してファビコンタグを出力しないよう注意しましょう。重複すると、ブラウザや検索エンジンがどちらを優先するか分かりにくくなる場合があります。

6-3. FTPでfavicon.icoをアップロードする方法

昔ながらの方法として、FTPソフトを使ってfavicon.icoをサーバーのルートディレクトリにアップロードする方法があります。

一般的には、次の場所にアップロードします。

https://example.com/favicon.ico

ルートディレクトリとは、WordPressのwp-contentやwp-adminが入っている階層、または公開ディレクトリ直下を指します。サーバーによってはpublic_html、www、htdocsなどの名前になっています。

この方法はシンプルですが、WordPress管理画面とは別管理になります。後から画像を変更するときにFTP操作が必要になるため、初心者にはやや扱いにくい方法です。

6-4. プラグインを使って設定する方法

ファビコン設定に対応したプラグインを使う方法もあります。テーマが特殊で管理画面からうまく設定できない場合や、複数サイズのファビコン、Apple Touch Icon、Webアプリ用アイコンなどを細かく指定したい場合に便利です。

ただし、サイトアイコンの設定だけのためにプラグインを増やすと、管理項目が増えたり、表示速度やメンテナンスに影響したりする可能性があります。すでにWordPress標準機能で設定できるなら、無理にプラグインを使う必要はありません。

6-5. 初心者は管理画面からの設定がおすすめ

初心者には、WordPress管理画面から「サイトアイコン」を設定する方法がおすすめです。理由は、コード編集が不要で、テーマ更新の影響を受けにくく、画像の差し替えも簡単だからです。

手動設定は、HTMLやPHPの知識がある人、テーマを独自開発している人、細かくアイコン指定を管理したい人向けです。一般的なブログや企業サイトでは、まず管理画面から設定しましょう。

7. WordPressアイコンが表示されない・反映されない時の対処法

WordPressアイコンを設定したのに表示されない場合、原因の多くはキャッシュ、画像サイズ、ファイル形式、設定場所の違い、Googleの反映待ちです。順番に確認すれば解決できるケースがほとんどです。

7-1. ブラウザキャッシュを削除する

最初に確認したいのがブラウザキャッシュです。ブラウザは一度読み込んだファビコンをしばらく保存するため、新しいWordPressアイコンに変更しても古いアイコンが表示され続けることがあります。

対処法は次のとおりです。

  • ページを強制再読み込みする

  • ブラウザキャッシュを削除する

  • シークレットモードで確認する

  • 別のブラウザで確認する

  • スマートフォンではブラウザアプリを再起動する

特にChromeではファビコンのキャッシュが残りやすいことがあります。設定が正しくても、自分の環境だけ古い表示になっている場合があります。

7-2. WordPressキャッシュ系プラグインを確認する

キャッシュ系プラグインを使っている場合、古いHTMLや古いアイコンURLが配信されている可能性があります。

次のようなプラグインを使っている場合は、キャッシュ削除を試しましょう。

  • WP Rocket

  • W3 Total Cache

  • WP Super Cache

  • LiteSpeed Cache

  • Autoptimize

  • サーバー独自のキャッシュプラグイン

プラグインの管理画面にある「キャッシュを削除」「Purge Cache」「Clear Cache」などのボタンを実行します。CSSやHTML最適化機能を使っている場合は、それらのキャッシュも削除してください。

7-3. CDNやサーバーキャッシュをクリアする

CloudflareなどのCDNを使っている場合、CDN側に古いファビコンが残っていることがあります。また、レンタルサーバーの高速化機能でサーバーキャッシュが有効になっている場合もあります。

確認すべき場所は次のとおりです。

  • CloudflareなどのCDNキャッシュ

  • レンタルサーバーのキャッシュ機能

  • LiteSpeedサーバーのキャッシュ

  • WordPress高速化機能

  • 画像最適化サービスのキャッシュ

WordPress側で設定を変更しても、CDNやサーバーが古い画像を返していると反映されません。キャッシュ削除後、時間をおいて再確認しましょう。

7-4. 画像サイズ・画像形式が適切か確認する

画像サイズが小さすぎると、ぼやけたり正しく処理されなかったりすることがあります。WordPressアイコンには512×512px以上の正方形画像を使うのがおすすめです。

また、ファイル形式も確認しましょう。初心者はPNG形式が無難です。JPGでも設定できる場合がありますが、背景透過ができず、細かいロゴがにじむことがあります。SVGは環境によってアップロードできない場合があります。

画像が横長や縦長の場合は、正方形に切り抜かれて意図しない見た目になることがあります。アイコン専用に正方形画像を作り直しましょう。

7-5. ファイル名や画像URLに日本語が含まれていないか確認する

ファイル名に日本語やスペースが含まれていると、環境によって画像URLが複雑になり、トラブルの原因になることがあります。

たとえば、次のようなファイル名は避けた方が無難です。

サイトアイコン.png
会社 ロゴ.png
ワードプレス アイコン.jpg

次のような半角英数字のファイル名に変更しましょう。

site-icon.png
company-logo-icon.png
favicon-512.png

画像URLに日本語が含まれている場合は、一度ファイル名を変更して再アップロードし、WordPressアイコンを再設定してください。

7-6. 別のブラウザ・シークレットモードで確認する

自分のブラウザだけ表示が古い可能性もあります。Chromeで表示されない場合は、Safari、Edge、Firefoxなど別ブラウザで確認してみましょう。

また、シークレットモードやプライベートブラウズで開くと、通常のキャッシュの影響を受けにくくなります。別環境で新しいWordPressアイコンが表示されているなら、設定自体は成功している可能性が高いです。

7-7. スマホだけ表示されない場合の確認ポイント

パソコンでは表示されるのにスマホだけ表示されない場合は、スマホブラウザのキャッシュ、ホーム画面アイコンのキャッシュ、画像サイズが原因かもしれません。

確認するポイントは次のとおりです。

  • スマホブラウザのキャッシュを削除する

  • ホーム画面に追加済みの古いショートカットを削除して作り直す

  • アイコン画像を512×512px以上にする

  • PNG形式で再アップロードする

  • WordPressやキャッシュプラグインのキャッシュを削除する

ホーム画面に追加したアイコンは、一度作成されると古い画像のまま残ることがあります。その場合は、ホーム画面のショートカットを削除して再追加しましょう。

7-8. Google検索結果にファビコンが表示されない場合の対処法

Google検索結果にWordPressアイコンが表示されない場合、まずGoogleのガイドラインを確認しましょう。Googleは、ファビコンが正方形であること、8×8px以上であること、できれば48×48pxより大きいサイズを使うこと、GooglebotとGooglebot-Imageがホームページとファビコンファイルをクロールできることなどを求めています。

また、Google検索結果への反映には時間がかかります。Google公式ドキュメントでは、再クロールと処理には数日から数週間かかる場合があると説明されています。

対処法は次のとおりです。

  • ファビコン画像を正方形にする

  • 48×48pxより大きい画像を使う

  • WordPressでは512×512px以上を使う

  • robots.txtで画像やトップページをブロックしていないか確認する

  • ファビコンURLを頻繁に変更しない

  • Search ConsoleのURL検査でトップページのインデックス登録をリクエストする

  • 不適切な画像や判別しにくい画像を避ける

設定直後に検索結果へ表示されなくても、すぐに失敗と判断する必要はありません。まずはブラウザタブで表示されているかを確認し、Google検索結果は時間をおいて確認しましょう。

8. WordPressアイコンを変更・削除する方法

WordPressアイコンは、一度設定した後でも変更や削除ができます。サイトリニューアル、ロゴ変更、ブランドカラー変更のタイミングで見直すとよいでしょう。

8-1. 既存のサイトアイコンを別画像に変更する手順

クラシックテーマの場合は、「外観」→「カスタマイズ」→「サイト基本情報」から現在のサイトアイコンを変更します。新しい画像をアップロードし、選択して保存すれば変更できます。

ブロックテーマの場合は、「外観」→「エディター」からサイトアイコン設定を開き、新しい画像に差し替えます。

変更する際は、古い画像と新しい画像のファイル名を変えておくのがおすすめです。同じファイル名のまま上書きすると、ブラウザやCDNが古い画像を表示し続けることがあります。

8-2. WordPressアイコンを削除する手順

WordPressアイコンを削除したい場合は、サイトアイコン設定画面で「削除」または「サイトアイコンを削除」を選択します。

WordPress.com公式サポートでは、「設定」→「一般」から現在のサイトアイコン下にある「Remove Site Icon」をクリックして削除する手順が案内されています。

削除後は、ブラウザタブに初期アイコンやテーマ側のデフォルトアイコンが表示されることがあります。完全に反映されるまでキャッシュ削除や時間経過が必要な場合もあります。

8-3. 変更後も古いアイコンが表示される原因

WordPressアイコンを変更したのに古いアイコンが表示される場合、原因の多くはキャッシュです。

主な原因は次のとおりです。

  • ブラウザが古いファビコンを保存している

  • WordPressキャッシュプラグインが古いHTMLを配信している

  • CDNが古い画像を保持している

  • サーバーキャッシュが残っている

  • 同じファイル名で画像を差し替えた

  • スマホのホーム画面ショートカットが古い画像を保持している

新しいアイコン画像を別ファイル名でアップロードし、WordPress側で再設定すると解決しやすくなります。

8-4. 検索結果やSNSで反映に時間がかかる理由

ブラウザタブでは新しいWordPressアイコンが表示されていても、Google検索結果やSNSの表示では古いアイコンが残る場合があります。これは、検索エンジンやSNSがページ情報を独自にクロール・キャッシュしているためです。

Google検索結果の場合は、Googleの再クロールを待つ必要があります。Search ConsoleでトップページのURL検査を行い、インデックス登録をリクエストすると、再クロールのきっかけを作れます。ただし、必ずすぐ反映されるわけではありません。

SNSの場合は、各SNSのキャッシュ更新ツールを使うと反映が早まることがあります。OGP画像とファビコンは別物ですが、サイトの見え方に関わるため、ロゴ変更時にはあわせて確認しておきましょう。

9. WordPressアイコン設定でよくある失敗例

WordPressアイコンは簡単に設定できますが、画像選びを間違えると見栄えが悪くなることがあります。ここではよくある失敗例を紹介します。

9-1. 画像が小さすぎてぼやける

100×100pxや64×64pxなど小さい画像を使うと、高解像度ディスプレイでぼやけて見える場合があります。WordPressアイコンは512×512px以上の正方形画像を用意しましょう。

元画像が小さい場合、後から拡大しても画質は改善しません。できるだけ大きく鮮明なロゴデータから作成するのがおすすめです。

9-2. 長方形画像を使って見切れる

横長のロゴや縦長の画像を使うと、WordPress側で正方形に切り抜かれる際に見切れることがあります。また、全体を無理に収めると、文字が小さくなりすぎて読めません。

WordPressアイコン用には、最初から正方形のデザインを作りましょう。横長ロゴを使いたい場合は、シンボル部分だけを切り出すのがおすすめです。

9-3. 複雑なデザインで何のアイコンかわからない

写真、細かいイラスト、長い文字列、複雑な模様は、ファビコンには向いていません。小さく表示されたときに情報がつぶれてしまうからです。

アイコンは「小さくても認識できる」ことが最優先です。色数を絞り、形を単純にし、文字を入れる場合は1〜2文字程度にしましょう。

9-4. 背景と同化して見えにくい

白いアイコンを透明背景にすると、白背景のブラウザでは見えにくくなります。黒いアイコンを透明背景にすると、ダークモードや黒背景では目立ちません。

白・黒・グレーの背景で確認し、どの環境でも見えるように調整しましょう。必要に応じて、ブランドカラーの背景を敷いたり、アイコンに縁取りを加えたりすると視認性が上がります。

9-5. 著作権・商標権に問題のある素材を使ってしまう

無料素材や他社ロゴを安易に使うと、著作権や商標権の問題になる可能性があります。特に、既存企業のロゴ、有名キャラクター、ブランドアイコン、アプリのアイコンを流用するのは避けましょう。

WordPressアイコンはサイトの顔になる画像です。安全に運用するためにも、自作する、正式にライセンスを取得する、商用利用可能な素材を規約に沿って使うなど、権利面を確認してから設定しましょう。

10. WordPressアイコンに関するよくある質問

ここでは、ワードプレス アイコンの設定でよくある質問に回答します。

10-1. WordPressアイコンは必ず設定するべき？

必須ではありませんが、基本的には設定することをおすすめします。WordPressアイコンが未設定でもサイト自体は表示されますが、ブラウザタブや検索結果での印象が弱くなります。

特に、企業サイト、店舗サイト、ポートフォリオ、アフィリエイトブログ、オウンドメディアでは、信頼感やブランド認知のために設定しておきましょう。

10-2. ファビコンはSEOに直接影響する？

ファビコンを設定しただけで検索順位が直接上がるわけではありません。ただし、検索結果でサイトを識別しやすくなるため、ユーザーの安心感やクリック前の印象には関わります。

Google検索結果にファビコンが表示されることがある以上、SEOの直接要因というより「検索結果での見え方を整える要素」と考えるとよいでしょう。

10-3. WordPressアイコンの推奨サイズは何px？

WordPressアイコンは512×512px以上の正方形画像がおすすめです。WordPress.com公式サポートでも、サイトアイコン画像は正方形で少なくとも512×512pxと案内されています。

Google検索結果向けには、正方形で8×8px以上、できれば48×48pxより大きいファビコンが推奨されています。WordPress用に512×512pxで作っておけば、Googleのサイズ要件も満たしやすくなります。

10-4. PNGとICOはどちらを使えばいい？

WordPress管理画面から設定するなら、PNGがおすすめです。背景透過に対応していて扱いやすく、Canvaなどのデザインツールからも簡単に書き出せます。

ICOは手動でファビコンを設置する場合に便利です。ただし、通常のWordPressサイトでは、PNG画像をサイトアイコンとして設定すれば十分です。

10-5. アイコンを変更したのに検索結果に反映されないのはなぜ？

Google検索結果への反映には、Googleの再クロールと処理が必要です。Google公式ドキュメントでも、再クロールには数日から数週間かかる場合があると説明されています。

また、Googlebotがトップページやファビコン画像をクロールできない場合、検索結果に表示されないことがあります。robots.txt、noindex、画像URL、キャッシュ、ファビコンのサイズや形式を確認しましょう。

10-6. WordPress.comでもアイコン設定はできる？

WordPress.comでもサイトアイコンを設定できます。WordPress.com公式サポートでは、ブロックテーマの場合は「外観」→「エディター」→「Identity」→「Site Icon」から、一般設定から設定する場合は「設定」→「一般」→「Choose a Site Icon」から設定する手順が案内されています。

WordPress.orgの自分でサーバーに設置するWordPressと、WordPress.comでは管理画面の細部が異なる場合がありますが、基本的な考え方は同じです。512×512px以上の正方形画像を用意し、サイトアイコンとして設定しましょう。

まとめ

WordPressアイコンは、ブラウザタブ、ブックマーク、検索結果、スマートフォンのホーム画面などに表示される小さな画像です。WordPressでは「サイトアイコン」と呼ばれ、一般的なファビコンとほぼ同じ役割を持ちます。

設定する画像は、512×512px以上の正方形PNGがおすすめです。デザインはシンプルにし、ロゴ全体を無理に詰め込むのではなく、頭文字やシンボルなど小さくても認識しやすい要素を使いましょう。

クラシックテーマでは「外観」→「カスタマイズ」→「サイト基本情報」から、ブロックテーマでは「外観」→「エディター」から設定するのが基本です。うまく表示されない場合は、ブラウザキャッシュ、WordPressキャッシュ、CDN、画像サイズ、ファイル名、Googleの再クロール状況を順番に確認してください。

ワードプレス アイコンは、数分で設定できる一方で、サイトの印象や信頼感に大きく関わる重要なパーツです。まだ設定していない場合は、サイトのブランドに合ったアイコンを作成し、早めに設定しておきましょう。