ブックマークやタブアイコンを変更するChrome拡張機能
この記事では、ブラウザのブックマークやタブアイコンを、好きな画像に設定できるChrome拡張機能「Bookmark Favicon Changer（ブックマーク・ファビコン・チェンジャー）」について書きます。
ウェブサイトのタブアイコン、及びブックマークアイコンを、好きな画像（ファビコン）に変更できるChrome拡張機能です。
以下の3ステップで変更できます。
- 好きな画像を用意する
- アイコンを変更したいサイトを開く
- 本拡張機能のメニューから変更する
サイトによっては、ブックマークに登録すると、ファビコンが登録されておらず、白紙の真っ白アイコンになる時があります。そんな時に本拡張機能を使って、好きなアイコンにすることで、他のブックマークと見分けやすくなります。
「Amazon
ショッピングサイトと、Amazonプライムビデオのアイコンが一緒で区別しにくい…」という時にも役立ちます。プライムビデオのURLだけ別アイコンに変更できます。ドメイン単位、記事単位で変更できます。
設定で、ブックマークバー名を非表示にして、アイコンだけ表示するオプションがあります。本拡張機能の読み方は、「ブックマーク・ファビコン・チェンジャー」です。Chrome拡張機能だけで、Firefoxアドオンはリリースされていません。
最終更新日が2014年と古いせいか、僕の環境ではうまく使えない時がありました。
僕の環境だけかもしれませんが、同じようにうまく変更できない場合、「Favicon Changer（ファビコン・チェンジャー）」といった別の拡張機能をおすすめします。
https://www.naporitansushi.com/faviconchanger/リリース元：sonthakit
記事執筆時のバージョン：2.21（2014年6月13日）
インストール方法
Chromeウェブストアからインストールできます。
https://chromewebstore.google.com/detail/bookmark-favicon-ch...本拡張機能は、Chrome拡張機能のみの提供で、Firefoxアドオンはリリースされていません。「Chrome（クローム）」、「Vivaldi（ヴィヴァルディ）」などの「Chromium（クロミウム）」ベースのブラウザで利用できます。
「Firefox」をご利用の方は、代わりに「Favicon Switcher（ファビコン・スイッチャー）」で代用できるかと思います。ただし、本アドオンはブックマークには反映されません。
「Chromeに追加」をクリックします。
「拡張機能を追加」をクリックします。
画面右上に、「Bookmark Favicon Changer」のアイコン（）が追加されたら、インストール完了です。
【初回設定】ファイルへのアクセス許可
初回限定で、本拡張機能にファイルへアクセスする許可を与える必要があります。許可しないと、正常にファイルURLでの変更ができません。
本拡張機能アイコンをクリック→「拡張機能を管理」をクリックします。
「ファイルのURLへのアクセスを許可する」をオンにします。これでOKです。
使い方
アイコンに設定したい画像を用意する
アイコン画像は、インターネット上の画像か、ローカル上（PC内）にある画像を選択できます。
今回は、「Amazonプライムビデオ」のアイコン画像を差し替えてみます。通常のAmazonショッピングサイトではそのままにします。分けることで見やすくなります。
アイコンといえば、ICO拡張子が一般的ですが、本拡張機能では、「JPG」や「PNG」などの画像拡張子でも対応しています。プライムビデオのアイコンに設定したい画像を準備します。
現在開いているページのアイコンを変える
タブアイコンを変更したいサイトを開きます。既にブックマークしているサイトでもOKです。試しに、「Amazonプライムビデオ」を開きます。開いたら、拡張機能アイコンをクリックします。
専用のポップアップが表示されます。「Change Favicon」ボタンをクリックして、好きな画像に変更できます。ただし、そのまま変えると、現在のページ上でのみ変わります。
今回は、詳細にルールを設定します。黄色の背景で囲まれた場所に、いくつかのパターンのURLが表示されます。この中から、適用したい範囲を指定して、「Change icon and add rule（アイコンの変更とルールの追加）」をクリックします。
サイト単位、ドメイン単位でアイコンを調整できます。
| URL | URLの意味 |
|---|---|
| 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が変わります。
| URL | URLの意味 |
|---|---|
| https://www.naporitansushi.com/insider-program-7th/ | こちらの記事のみのブックマークを変更 |
| https://www.naporitansushi.com/insider-program-7th/* | こちらの記事+それより下の階層のブックマークを変更（ただし、この記事は、それより下に階層はないので、実質この記事のみ） |
| https://www.naporitansushi.com/* | 「ナポリタン寿司のPC日記」全体のブックマークを変更 |
画像選択画面が表示されるので、事前に準備しておいた画像を選択→「開く」をクリックします。
タブとブックマークアイコンが変わります。
元に戻す方法
アイコンを変更したサイトを開いて、ポップアップを開きます。
「You can edit tab icon rule that match this URL.」という部分に変更したアイコンが表示されます。削除したい場合は「Delete」、アイコンを変更したい場合は、「Change Icon」をクリックします。
「Reset Favicon」は、ファビコン画像のリセットです。初期のアイコンに戻すということではなく、設定したルールに戻すという意味っぽいです。ルール自体を削除しないと、初期アイコンに戻りません。
「Remove Favicon」は、ファビコン画像の削除です。設定したルールのアイコンを削除するということではなく、ファビコン自体を削除して、白紙の状態にするということです。
「Remove Favicon」でアイコン画像を削除した後、「Reset Favicon」を押すことで、元のルールで指定したアイコン画像に戻せます。
ダイアログが表示されるので、「OK」をクリックします。
アイコン画像が元に戻ります。
設定
アイコンを右クリック→「オプション」をクリックします。
設定ページが新しいタブで開きます。
Chromeのページ内翻訳がオンになっている場合、正常に設定画面が表示されない可能性があります。アドレスバー内の翻訳ボタンをクリックして、「英語」に戻すことで、原文を維持できます。
ブックマーク一覧表示の中から変更する（Bookmark Favicon）
ブックマークに登録しているサイトのアイコンを編集・管理できます。
左側のツリーでフォルダーを選択して、右側で変更したいブックマークを選択します。選択したアイコンを右クリックして、「Change Favicon（アイコンの変更）」をクリックします。
この時、複数ブックマークにチェックしていると、グレーアウトして選択できないので、1つだけにしましょう。
他にも、以下の項目が用意されています。
| Change Favicon | ファビコンを変更する |
| Pin Favicon | ファビコンをピン留めする |
| Reset Favicon | ファビコンをリセットする |
| Remove Favicon | ファビコンを削除する |
| Export Favicon | ファビコンをエクスポートする |
PC内の画像を選択して、「開く」をクリックします。
クリックすると、自動で別ウィンドウが立ち上がります。
数秒すると、自動的にウィンドウが閉じて、アイコンが変わるようです。
僕の環境では、正常にウィンドウが閉じてくれませんでした。
処理が開始されないので、手動でウィンドウを閉じるしかありません。手動で閉じると、上部のログ画面に「Fail – Popup window was closed. Terminate all residual jobs.」とエラーが表示されて、変更できませんでした。
同じような方な現象が発生する方は、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」をクリックします。
テストすると、新しいウィンドウで指定したURLが開きます。うまく設定できていたら、「Step 6」の「Add」をクリックします。
ブックマークが作成されます。ただし、僕の環境だとキャッシュの影響か、カスタムアイコンが反映されず、デフォルトのアイコンが表示されました。
Chromeの設定ページ（chrome://settings/）は、登録できても、うまく開きませんでした。削除したい場合は、通常のブックマーク削除と一緒です。
タブアイコンを変更する（Tab Icon）
新しいタブアイコンのルールを設定できます。作成したルールを確認・削除することもできます。
「Add Rule」で新しく追加できます。テキストボックスにアイコンを変えたいURLを入力して、左側のアイコンをクリックして、設定したい画像を選択します。
例えば、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」にチェックします。
ブックマークバーから名前が消えて、アイコン表示のみになります。スッキリさせたい方に便利だと思います。
感想
以上、タブとブックマークアイコンを変更するChrome拡張機能「Bookmark Favicon Changer（ブックマーク・ファビコン・チェンジャー）」についてでした。