当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

ブックマークやタブアイコンを変更するChrome拡張機能

2021年10月19日Chrome拡張機能

「Bookmark Favicon Changer」のアイコン

この記事では、ブラウザのブックマークやタブアイコンを、好きな画像に設定できるChrome拡張機能「Bookmark Favicon Changer(ブックマーク・ファビコン・チェンジャー)」について書きます。

「Bookmark Favicon Changer」のイメージ画像

ウェブサイトのタブアイコン、及びブックマークアイコンを、好きな画像(ファビコン)に変更できるChrome拡張機能です。

以下の3ステップで変更できます。

  1. 好きな画像を用意する
  2. アイコンを変更したいサイトを開く
  3. 本拡張機能のメニューから変更する

サイトによっては、ブックマークに登録すると、ファビコンが登録されておらず、白紙の真っ白アイコンになる時があります。そんな時に本拡張機能を使って、好きなアイコンにすることで、他のブックマークと見分けやすくなります。

Amazonショッピングサイトと、Amazonプライムビデオのアイコンが一緒で区別しにくい…」という時にも役立ちます。プライムビデオのURLだけ別アイコンに変更できます。ドメイン単位、記事単位で変更できます。

設定で、ブックマークバー名を非表示にして、アイコンだけ表示するオプションがあります。本拡張機能の読み方は、「ブックマーク・ファビコン・チェンジャー」です。Chrome拡張機能だけで、Firefoxアドオンはリリースされていません。

【ポイント】うまく動作しないかも?

最終更新日が2014年と古いせいか、僕の環境ではうまく使えない時がありました。

僕の環境だけかもしれませんが、同じようにうまく変更できない場合、「Favicon Changer(ファビコン・チェンジャー)」といった別の拡張機能をおすすめします。

リリース元:sonthakit
記事執筆時のバージョン:2.21(2014年6月13日)

インストール方法

Chromeウェブストアからインストールできます。

Firefoxをご利用の場合

本拡張機能は、Chrome拡張機能のみの提供で、Firefoxアドオンはリリースされていません。「Chrome(クローム)」、「Vivaldi(ヴィヴァルディ)」などの「Chromium(クロミウム)」ベースのブラウザで利用できます。

「Firefox」をご利用の方は、代わりに「Favicon Switcher(ファビコン・スイッチャー)」で代用できるかと思います。ただし、本アドオンはブックマークには反映されません。

「Chromeに追加」をクリックします。

「Bookmark Favicon Changer」をインストールする手順画像1

「拡張機能を追加」をクリックします。

「Bookmark Favicon Changer」をインストールする手順画像2

画面右上に、「Bookmark Favicon Changer」のアイコン(「Bookmark Favicon Changer」のアイコン)が追加されたら、インストール完了です。

「Bookmark Favicon Changer」をインストールする手順画像3

【初回設定】ファイルへのアクセス許可

初回限定で、本拡張機能にファイルへアクセスする許可を与える必要があります。許可しないと、正常にファイルURLでの変更ができません。

本拡張機能アイコンをクリック→「拡張機能を管理」をクリックします。

「Bookmark Favicon Changer」の権限を変更する手順画像1

「ファイルのURLへのアクセスを許可する」をオンにします。これでOKです。

「Bookmark Favicon Changer」の権限を変更する手順画像2

使い方

アイコンに設定したい画像を用意する

アイコン画像は、インターネット上の画像か、ローカル上(PC内)にある画像を選択できます。

今回は、「Amazonプライムビデオ」のアイコン画像を差し替えてみます。通常のAmazonショッピングサイトではそのままにします。分けることで見やすくなります。

「Amazonプライムビデオ」と「ショッピングサイト」の比較画像

アイコンといえば、ICO拡張子が一般的ですが、本拡張機能では、「JPG」や「PNG」などの画像拡張子でも対応しています。プライムビデオのアイコンに設定したい画像を準備します。

「プライムビデオ」のアイコンをPC内に保存する手順画像

現在開いているページのアイコンを変える

タブアイコンを変更したいサイトを開きます。既にブックマークしているサイトでもOKです。試しに、「Amazonプライムビデオを開きます。開いたら、「Bookmark Favicon Changer」のアイコン拡張機能アイコンをクリックします。

「Bookmark Favicon Changer」でタブ・ブックマークアイコンを変更する手順画像1

専用のポップアップが表示されます。「Change Favicon」ボタンをクリックして、好きな画像に変更できます。ただし、そのまま変えると、現在のページ上でのみ変わります。

今回は、詳細にルールを設定します。黄色の背景で囲まれた場所に、いくつかのパターンのURLが表示されます。この中から、適用したい範囲を指定して、「Change icon and add rule(アイコンの変更とルールの追加)」をクリックします。

「Bookmark Favicon Changer」でタブ・ブックマークアイコンを変更する手順画像2

サイト単位、ドメイン単位でアイコンを調整できます。

URLURLの意味
https://www.amazon.co.jp/Amazon-Video/b/?ie=UTF8&node=(省略)プライムビデオのホーム画面のみアイコン変更
https://www.amazon.co.jp/Amazon-Video/b/*「b/」がつくまでのプライムビデオページ上のアイコン変更
https://www.amazon.co.jp/Amazon-Video/*プライムビデオ全体のアイコン変更
https://www.amazon.co.jp/*Amazon全体のアイコン変更

今回は、ショッピングサイトとプライムビデオのアイコンを区別したいので、3番目のURLを選びます。4番目を選択すると、プライムビデオだけでなく、Amazon全体で変わってしまうので注意です。

当サイトの場合は、以下のようになります。個別サイトでアイコンを変更したいのか、サイト全体のアイコンを変更したいのかで、選択するURLが変わります。

URLURLの意味
https://www.naporitansushi.com/insider-program-7th/こちらの記事のみのブックマークを変更
https://www.naporitansushi.com/insider-program-7th/*こちらの記事+それより下の階層のブックマークを変更(ただし、この記事は、それより下に階層はないので、実質この記事のみ)
https://www.naporitansushi.com/*ナポリタン寿司のPC日記」全体のブックマークを変更

画像選択画面が表示されるので、事前に準備しておいた画像を選択→「開く」をクリックします。

「Bookmark Favicon Changer」でタブ・ブックマークアイコンを変更する手順画像3

タブとブックマークアイコンが変わります。

「Bookmark Favicon Changer」でタブ・ブックマークアイコンを変更する手順画像4

元に戻す方法

アイコンを変更したサイトを開いて、ポップアップを開きます。

「You can edit tab icon rule that match this URL.」という部分に変更したアイコンが表示されます。削除したい場合は「Delete」、アイコンを変更したい場合は、「Change Icon」をクリックします。

「Bookmark Favicon Changer」で変更したアイコンを元に戻す手順画像1
ポイント

「Reset Favicon」は、ファビコン画像のリセットです。初期のアイコンに戻すということではなく、設定したルールに戻すという意味っぽいです。ルール自体を削除しないと、初期アイコンに戻りません。

「Remove Favicon」は、ファビコン画像の削除です。設定したルールのアイコンを削除するということではなく、ファビコン自体を削除して、白紙の状態にするということです。

「Remove Favicon」を実行した後のアイコン画像

「Remove Favicon」でアイコン画像を削除した後、「Reset Favicon」を押すことで、元のルールで指定したアイコン画像に戻せます。

ダイアログが表示されるので、「OK」をクリックします。

「Bookmark Favicon Changer」で変更したアイコンを元に戻す手順画像2

アイコン画像が元に戻ります。

「Bookmark Favicon Changer」で変更したアイコンを元に戻す手順画像3

設定

アイコンを右クリック→「オプション」をクリックします。

「Bookmark Favicon Changer」の設定にアクセスする手順画像

設定ページが新しいタブで開きます。

「Bookmark Favicon Changer」の設定画像
【注意点】ページ翻訳はオフ推奨

Chromeのページ内翻訳がオンになっている場合、正常に設定画面が表示されない可能性があります。アドレスバー内の翻訳ボタンをクリックして、「英語」に戻すことで、原文を維持できます。

「Bookmark Favicon Changer」ページで翻訳をオフにする手順画像

ブックマーク一覧表示の中から変更する(Bookmark Favicon)

ブックマークに登録しているサイトのアイコンを編集・管理できます。

左側のツリーでフォルダーを選択して、右側で変更したいブックマークを選択します。選択したアイコンを右クリックして、「Change Favicon(アイコンの変更)」をクリックします。

「Bookmark Favicon Changer」の「Bookmark Favicon」からアイコンを変更する手順画像1

この時、複数ブックマークにチェックしていると、グレーアウトして選択できないので、1つだけにしましょう。

他にも、以下の項目が用意されています。

Change Faviconファビコンを変更する
Pin Faviconファビコンをピン留めする
Reset Faviconファビコンをリセットする
Remove Faviconファビコンを削除する
Export Faviconファビコンをエクスポートする

PC内の画像を選択して、「開く」をクリックします。

「Bookmark Favicon Changer」の「Bookmark Favicon」からアイコンを変更する手順画像2

クリックすると、自動で別ウィンドウが立ち上がります。

「Bookmark Favicon Changer」の「Bookmark Favicon」からアイコンを変更する手順画像3

数秒すると、自動的にウィンドウが閉じて、アイコンが変わるようです。

僕の環境では、自動的にウィンドウが閉じなかった

僕の環境では、正常にウィンドウが閉じてくれませんでした。

処理が開始されないので、手動でウィンドウを閉じるしかありません。手動で閉じると、上部のログ画面に「Fail – Popup window was closed. Terminate all residual jobs.」とエラーが表示されて、変更できませんでした。

「Bookmark Favicon Changer」でエラーが出ているログ画像

同じような方な現象が発生する方は、1つ目に紹介した開いているページのブックマークを変更する方法か、似たようなChrome拡張機能「Favicon Changer(ファビコン・チェンジャー)」が役立つと思います。

ショートカットでカスタムブックマークを作成する(Shortcut)

好きなURL、好きなアイコン画像のブックマークを作成できます。

Step 1ブックマークにしたいURLを指定(例:https://www.youtube.com/
Step 2ブックマーク名を指定(例:YouTube)
Step 3アイコン画像選択
Step 4テスト
Step 5アイコンを追加する場所
-First bookmark in “Bookmarks Bar"(ブックマークバーの最初に追加)
-First bookmark in “Other Bookmarks" folder(その他のブックマークフォルダーの最初に追加)
-Last bookmark in “Bookmarks Bar"(ブックマークバーの最後に追加)
-Last bookmark in “Other Bookmarks" folder(その他のブックマークフォルダーの最後に追加)
Step 6追加

「Step 4」の「Test」をクリックしないと、「Add」がグレーアウトしているので、一度「Test」をクリックします。

「Bookmark Favicon Changer」の「Shortcut」設定手順画像1

テストすると、新しいウィンドウで指定したURLが開きます。うまく設定できていたら、「Step 6」の「Add」をクリックします。

「Bookmark Favicon Changer」の「Shortcut」設定手順画像2

ブックマークが作成されます。ただし、僕の環境だとキャッシュの影響か、カスタムアイコンが反映されず、デフォルトのアイコンが表示されました。

「Bookmark Favicon Changer」の「Shortcut」設定手順画像3

Chromeの設定ページ(chrome://settings/)は、登録できても、うまく開きませんでした。削除したい場合は、通常のブックマーク削除と一緒です。

タブアイコンを変更する(Tab Icon)

新しいタブアイコンのルールを設定できます。作成したルールを確認・削除することもできます。

「Bookmark Favicon Changer」の「Tab Icon」設定手順画像1

「Add Rule」で新しく追加できます。テキストボックスにアイコンを変えたいURLを入力して、左側のアイコンをクリックして、設定したい画像を選択します。

「Bookmark Favicon Changer」の「Tab Icon」設定手順画像2

例えば、YouTube上のアイコンを変えたい場合、以下のURLになります。

www.youtube.com/*

「アスタリスク記号(*)」がワイルドカードにおける「任意の〇文字以上」という意味です。こうすることで、「https://www.youtube.com/」だけでなく、「https://www.youtube.com/watch?v=AOG7v7aVkwY」など、YouTube上全てのサイトが対象になります。

逆にトップページだけ変えたい場合は、ワイルドカードを使わずに、「www.youtube.com」と記載します。

ブックマーク名を非表示にする(Advance Settings)

「Advance Settings」の「Auto hide bookmarks bar name」にチェックします。

「Bookmark Favicon Changer」の「Advance Settings」設定画像

ブックマークバーから名前が消えて、アイコン表示のみになります。スッキリさせたい方に便利だと思います。

ブックマークバーの名前を非表示にした画像

感想

以上、タブとブックマークアイコンを変更するChrome拡張機能「Bookmark Favicon Changer(ブックマーク・ファビコン・チェンジャー)」についてでした。

2021年10月19日Chrome拡張機能