WordPressアイコンをブラウザタブから簡単に削除する方法

WordPressサイトアイコン（ファビコンとも呼ばれます）は、デフォルトでウェブサイトのブラウザタブに表示されます。

新しいサイトを構築している間は問題なく機能しますが、多くのウェブサイト所有者は、ブランドアイデンティティをより良く反映するために、それを置き換えたり削除したりすることを好みます。

私たちはWordPressでブログやeコマースストアを含む多くのウェブサイトを構築してきましたが、常にブランドを代表するファビコンでデフォルトのアイコンを置き換えています。

この簡単な変更により、ブランドアイデンティティを強化し、サイトをより信頼できるように見せ、全体的な視覚的な魅力を向上させることができました。

この記事では、ブラウザのタブからWordPressアイコンを簡単に削除する方法をご紹介します。

ブラウザタブのWordPressアイコンを削除する理由

ウェブサイトのブラウザタブにデフォルトのWordPressアイコン（ファビコン）を表示すると、一般的で味気ない印象を与える可能性があります。

カスタムサイトアイコンに置き換えることで、サイトを3つの重要な点で改善できます。

• ブランドアイデンティティの強化：デフォルトのロゴを独自のロゴに置き換えることで、ユーザーがページコンテンツを直接見ていない場合でも、ブランドが認識されるようになります。
• ユーザーエクスペリエンスの向上：ほとんどのユーザーは同時に多くのタブを開いています。 ユニークなアイコンは、雑然とした中であなたのサイトを即座に識別し、効率的に切り替えるのに役立ちます。
• 信頼性の向上：デフォルトのWordPressアイコンを残しておくと、サイトが「建設中」またはプロフェッショナルではないように見える可能性があります。カスタムアイコンは、細部へのこだわりを示します。

さて、ブラウザのタブからWordPressのアイコンを簡単に削除する方法を見ていきましょう。このチュートリアルでは、2つの方法をカバーしますので、ご自身に最適な方法を選択できます。

方法 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アイコンを削除し、ファビコンに置き換えることもできます。

まず、Custom Faviconプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。

有効化したら、WordPressダッシュボードから設定 » Custom Faviconページにアクセスし、「ファビコン（デフォルト）」オプションの横にある「アップロード」ボタンをクリックします。

これで、WordPressのメディアライブラリが開きます。ここで、ファビコンとして使用したい画像をすべて選択してアップロードできます。

その後、「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 アイコンを削除した後も表示されるのはなぜですか？

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でもフォローできます。