WordPressアイコン（ファビコンとも呼ばれます）は、デフォルトでウェブサイトのブラウザタブに表示されます。
新しいサイトを構築している間は問題なく機能しますが、多くのウェブサイト所有者は、ブランドアイデンティティをより良く反映するために、それを置き換えたり削除したりすることを好みます。
私たちはWordPressでブログやeコマースストアを含む多くのウェブサイトを構築してきましたが、常にブランドを代表するファビコンでデフォルトのアイコンを置き換えています。
この簡単な変更により、ブランドアイデンティティを強化し、サイトをより信頼できるように見せ、全体的な視覚的な魅力を向上させることができました。
この記事では、ブラウザのタブからWordPressアイコンを簡単に削除する方法をご紹介します。
ブラウザタブのWordPressアイコンを削除する理由
ブラウザタブのWordPressアイコンは、あなたのウェブサイトを一般的でプロフェッショナルでないものに見せることがあります。ほとんどのユーザーはブラウザで多くのタブを開いており、ウェブサイトのタイトルが隠れてしまう可能性があります。
タブにWordPressロゴだけが表示されていると、ユーザーは他の多くのサイトの中からあなたのサイトを識別できなくなります。
ブラウザタブからWordPressアイコンを削除し、ファビコン（サイトアイコンとも呼ばれます）を追加することで、あなたのブランドロゴを使用し、訪問者にとってサイトをより使いやすくすることができます。
ファビコンとは、ブラウザでウェブサイトのタイトルの横に表示される小さな画像のことです。
ファビコンは、ユーザーがウェブサイトをすぐに認識し、異なるタブ間を効率的に切り替えるのに役立ちます。頻繁に訪れるユーザーは、ブラウザ上のその小さな画像にすぐに気づくようになります。
とはいえ、ブラウザタブからWordPressアイコンを簡単に削除する方法を見ていきましょう。今日は、2つの方法すべてを見ていきますので、あなたに合った方法を選択できます。
- 方法 1: プラグインなしで WordPress アイコンを削除する
- 方法2：プラグインを使用してWordPressアイコンを削除する
- ボーナス：WordPressでブラウザタブ通知を追加する
- よくある質問
方法 1: プラグインなしで WordPress アイコンを削除する
WordPressでブロックテーマを使用している場合は、この方法でブラウザタブのWordPressアイコンを削除できます。
このチュートリアルを作成している時点では、デフォルトのWordPressテーマであるTwenty Twenty-Threeには、WordPressロゴ以外のファビコンを変更するためのサイトアイコンブロックがありません。
まず、WordPress管理ダッシュボードから外観 » エディターに移動して、フルサイトエディターを開く必要があります。
ただし、ここからファビコンを変更したり、ブラウザタブからWordPressアイコンを削除したりすることはできません。これを行うには、以下のURLをブラウザにコピー＆ペーストして、テーマカスタマイザーを開きます。
https://example.com/wp-admin/customize.php
‘example.com’ をご自身のサイトの ドメイン名 に置き換えるのを忘れないでください。
このURLはテーマカスタマイザーに移動し、そこで「サイトの識別情報」タブをクリックする必要があります。
そこに着いたら、「サイトアイコン」セクションまでスクロールダウンします。
ここから、「サイトアイコンを選択」ボタンをクリックするだけで、WordPressのメディアライブラリが開きます。
これで、ブラウザタブのWordPressアイコンを置き換えるファビコンとして使用したい画像をすべて選択できます。
ファビコンの作成方法の詳細については、WordPressにファビコンを追加する方法 に関するチュートリアルをご覧ください。ファビコンとして使用する画像が推奨サイズを超えている場合、WordPressはそれをトリミングすることを許可します。
選択に満足したら、上部にある「公開」ボタンをクリックするだけです。
フルサイト編集なしでテーマのWordPressアイコンを削除する
クラシックテーマを使用している場合は、外観 » カスタマイズから直接テーマカスタマイザーに移動して、ブラウザタブからWordPressアイコンを削除できます。
フルサイトエディターをサポートしていないサイトでは、WordPressテーマカスタマイザーを使用して、ファビコン、タイポグラフィ、デフォルトの色、フッターなどのサイトの詳細を変更できます。
テーマカスタマイザーに入ったら、「サイトアイデンティティ」タブをクリックします。プロセスは、上記で示したものと同じです。サイトアイコンをアップロードすることで、WordPressアイコンを削除できます。
選択に満足したら、「公開」ボタンをクリックするだけで変更が保存されます。
方法2：プラグインを使用してWordPressアイコンを削除する
プラグインを使用してWordPressアイコンを削除し、ファビコンに置き換えることもできます。
まず、Heroic Favicon Generatorプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。
免責事項: このプラグインは最新バージョンのWordPressでテストされていません。しかし、クラシックテーマとブロックテーマで使用したところ、問題なく動作しました。それでも不明な場合は、古いプラグインの使用に関するガイドをご覧ください。
有効化したら、WordPress ダッシュボードから 設定 » Heroic Favicon Generator ページにアクセスし、「ファビコンを選択」ボタンをクリックしてください。
これで、WordPressのメディアライブラリが開きます。ここで、ファビコンとして使用したい画像をすべて選択してアップロードできます。
それが終わったら、「プレビュー」セクションまでスクロールすると、ファビコンが WordPressウェブサイト でどのように表示されるかを確認できます。
満足したら、下にスクロールして「変更を保存」ボタンをクリックしてください。
WordPressアイコンの削除に成功し、代わりにファビコンを追加しました。
ボーナス：WordPressでブラウザタブ通知を追加する
ユーザーの注意を引くカスタムファビコンを追加するだけでなく、ウェブサイトにブラウザタブ通知を追加して顧客を呼び戻すこともできます。
この通知は、ユーザーが別のウェブサイトにフォーカスしているときにブラウザのタブに表示されるメッセージです。これにより、カート放棄率を低下させ、サイトへのトラフィックを増やすことができます。
WPCode を使用すると、WordPress にブラウザタブ通知を簡単に追加できます。これは市場で最高の WordPress コードスニペットプラグインであり、カスタムコードをウェブサイトに追加するのを安全かつ簡単に行えます。
プラグインをインストールしたら、WordPressの管理サイドバーから コードスニペット » + スニペットを追加 ページにアクセスし、「カスタムコードを追加（新規スニペット）」オプションの下にある「スニペットを使用」をクリックするだけです。
これにより、「カスタムスニペットを作成」ページに移動します。ここで、右側のドロップダウンメニューから「コードタイプ」として「JavaScriptスニペット」を選択する必要があります。
その後、以下のカスタムコードを「コードプレビュー」ボックスに追加します。
let count = 0;
const title = document.title;
function changeTitle() {
count++;
var newTitle = '(' + count + ') ' + title;
document.title = newTitle;
}
function newUpdate() {
const update = setInterval(changeTitle, 2000);
}
document.addEventListener('DOMContentLoaded', newUpdate );
最後に、「スニペットを保存」ボタンをクリックし、「非アクティブ」スイッチを「アクティブ」に切り替えます。
これで、ウェブサイトにブラウザタブ通知が正常に追加され、新しい更新の数が表示されるようになります。
ブラウザタブにメッセージを表示したり、ファビコンを変更したりしたい場合は、WordPress でブラウザタブ通知を簡単に追加する方法 に関するチュートリアル全体をご覧ください。
よくある質問
ブラウザのタブからWordPressアイコンを削除する方法について、読者からよく寄せられる質問をいくつかご紹介します。
ブラウザタブのWordPressアイコンとは何ですか？
ブラウザタブのページタイトルの横に見える小さなロゴは、ファビコンまたはサイトアイコンと呼ばれます。
WordPressでは、これは通常 設定 » 一般（または 外観 » カスタマイズ » サイトのアイデンティティ）の下に設定されます。カスタマイズしていない場合、WordPressはデフォルトのロゴを使用します。
小さなことのように思えるかもしれませんが、この小さな画像は、ユーザーが多くのタブの中からあなたのサイトを素早く見つけるのに役立ちます。デフォルトのアイコンのままにしておくと、あなたのサイトが一般的で、ブランド認知度を損なう可能性があります。
WordPress アイコンを削除した後も表示されるのはなぜですか？
WordPressのファビコンを置き換えたり削除したりしたのに表示される場合は、心配しないでください。これはよくある問題です。通常、ブラウザまたはウェブサイトが古いアイコンのキャッシュされたバージョンを提供しているために発生します。
確認できることがいくつかあります。
- ブラウザキャッシュとサイトキャッシュをクリアする：ブラウザはファビコン画像を積極的にキャッシュする傾向があります。ブラウザのキャッシュをクリアするか、Ctrl + F5（Windows）またはCommand + Shift + R（Mac）でページを再読み込みしてみてください。
- CDN キャッシュをパージする: Cloudflare のようなコンテンツ配信ネットワーク (CDN) にサイトが接続されている場合、ファビコンの古いバージョンが提供されている可能性があります。CDN アカウントにログインし、キャッシュをパージして、新しいアイコンが表示されるようにしてください。
- テーマまたはプラグインのオーバーライドを確認する: 一部のテーマやプラグインには、グローバルサイトアイコンを上書きできる独自のファビコン設定があります。テーマオプションやページビルダー、SEOツールなどのプラグインにファビコンが設定されていないことを確認してください。
- ハードコードされたファビコンリンクを削除する: まれに、ファビコンがテーマの header.php ファイルにハードコードされている場合があります。
<link rel="icon"...>または<link rel="shortcut icon"...>タグを探し、必要に応じて削除または更新してください。
これらの変更を行った後、新しいファビコンが正しく表示されているかを確認するために、シークレットウィンドウまたはプライベートブラウジングウィンドウでサイトを更新してください。
ファビコンがすべてのデバイスで正しく表示されるようにするために、どのような手順を踏むべきですか？
正しいファビコンのフォーマットとサイズを使用することで、すべてのデバイスやブラウザで正しく表示されるようになります。ファビコンがぼやけている、または正しく更新されない場合は、以下のベストプラクティスに従ってください。
- 少なくとも512×512ピクセルの正方形の画像を使用してください
- 互換性のために
.icoファイルを含める - サイトのヘッダーに適切な
<link rel="icon">HTMLタグを追加する - ブラウザとサイトのキャッシュをクリアする
これらのヒントに従うことで、ファビコンは正しく表示され、シャープに見え、サイトのブランドアイデンティティを強化するのに役立ちます。
この記事が、ブラウザのタブからWordPressアイコンを削除する方法を学ぶのに役立ったことを願っています。また、WordPressでウェブサイトのデザインフィードバックを得る方法に関する初心者向けガイドや、チェックすべき優れたWordPressウェブサイトの例もご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
イジー・ヴァネック
Sydneyテーマのウェブサイトを持っており、サイトにファビコンを追加するために考えられるすべての方法を試しました。以前は問題なく、すべてうまくいっていました。絶望的だったので、初めてプラグインを使ってみて、Heroic Favicon Generatorを使用しました。問題がどこにあったのかはわかりませんが、プラグインのおかげでファビコンをすぐにサイトに追加することができました。他に何も効かない場合に非常に役立つツールです。