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

2021年10月19日Chrome拡張機能

Bookmark Favicon Changerのアイコン

この記事では、ブックマークを好きな画像に設定できるChrome拡張機能「Bookmark Favicon Changer」について書きます。

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

ブックマークのアイコンを好きな画像に変更できるChrome拡張機能です。

以下の3ステップで、サクッとブックマークアイコンを変更できます。自分の好きな画像を指定できます。

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

サイトによっては、ブックマークしたら真っ白のアイコンになる時があるかと思います。そんな時に本拡張機能を使えば、自分の好きなアイコンに変更できます。

Amazonのショッピングサイトと、プライムビデオのアイコンが一緒で区別しにくい…」といった時にも役立ちます。プライムビデオのアイコンをロゴに変更することで、区別しやすくなります。

ドメイン単位、記事単位で変更できます。

読み方は、「ブックマークファビコンチェンジャー」です。

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

ダウンロード方法

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

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

Bookmark Favicon Changerのインストール - Chrome ウェブストア

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

「Bookmark Favicon Changer」を追加しますか?

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

拡張機能アイコンが追加されればOK

本拡張機能は、Chrome拡張機能専用です。Firefoxアドオンなどは提供されていないので、Firefoxユーザーの方は注意です。Chrome、VivaldiなどのChromiumベースのブラウザでのみ利用できます。

使い方

アイコンを変更する方法は、2つあります。用途に分けて、使い分けるのがおすすめです。

変更方法こんな人におすすめ
開いているページのブックマークを変える変更したいブックマークの数が少ない人
ブックマーク一覧表示の中から変える沢山ブックマーク画像を変更したい人

共通しているのは、ブックマークに設定したい画像を事前に準備しておくことです。

今回は、Amazonのショッピングサイトとプライムビデオのブックマークが一緒で紛らわしいので、プライムビデオのアイコンを変更しようと思います。

Amazonショッピングサイトとプライムビデオのアイコンが一緒なので、見分けがつかない

アイコンにしたい画像を探します。

アイコンといえば、ico拡張子が一般的ですが、本拡張機能では、「JPG」や「PNG」などの画像拡張子でも対応しています。対応している拡張子は、以下の通りです。

  • tiff
  • pjp
  • jfif
  • bmp
  • gif
  • svg
  • png
  • xbm
  • dib
  • jxl
  • jpeg
  • svgz
  • jpg
  • webp
  • ico
  • tif
  • pjpeg
  • avif

適当にインターネットから画像を探します。

「プライムビデオ」で画像検索

右クリック→名前をつけて画像を保存をクリックします。

良さげなアイコンを右クリック 名前を付けて画像を保存

好きな場所に保存しておきます。

下準備は以上です。

ポイント

本拡張機能を使って、アイコン変更した後もローカル上に保存した画像は消さないようにします。消すと、正常にアイコンが反映されなくなる可能性があります。

よって、間違えて削除しない場所に保存するようにしましょう。専用の「アイコン保存場所」フォルダーを作成するといいかなと思います。

開いているページのブックマークを変える

ブックマーク画像を変更したいサイトを開きます。例として、プライムビデオを開きます。

開いたら、Bookmark Favicon Changerのアイコン拡張機能アイコンをクリックします。

ブックマークアイコンを変更したいサイトを開いて、拡張機能ボタンをクリックする

黄色で囲まれた場所の中から、変更したいURLを選択して、「Change icon and add rule」をクリックします。

今回は、Amazonショッピングとプライムビデオのアイコンを区別したいので、3番目のURLを選びます。

Bookmark Favicon Changer You can add more tab icon rule for this domain.

ドメイン単位でブックマークのアイコンを調整できます。

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全体のアイコン変更

Amazonの場合、「https://www.amazon.co.jp/*」のアイコンを変更すると、プライムビデオだけでなく、Amazonフォトや、Amazonショッピングサイト全てのアイコンが変更されます。

ナポリタン寿司のPC日記」の場合は、以下のようになります。個別サイトでアイコンを変更したいのか、サイト全体のアイコンを変更したいのかでURLが異なってきます。

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

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

事前に用意しておいた画像を選択

無事にアイコンが変更されます。簡単です。これで同じAmazonのサイトでも、ショッピングサイトとプライムビデオで区別できるようになります。

プライムビデオのブックマークアイコンが見やすいように変更される

ブックマークを変更したいサイトが沢山ある場合は、次の方法がおすすめです。

ブックマーク一覧表示の中から変える

開いているページはどこでもいいので、Bookmark Favicon Changerのアイコン拡張機能アイコンをクリックします。

右下のほうにある「Open options page」をクリックします。

Open options pageをクリック

設定画面のタブに移動するので、「Bookmark Favicon」をクリックします。

Bookmark Favicon Changer Bookmark Faviconをクリック

変更したいアイコンを右クリックして、「Changer Favicon」をクリックします。

今回は、プライムビデオのアイコンを変更します。

アイコンを右クリックでChanger Faviconをクリック

画像を選ぶ画面がでるので、先ほど保存した画像を選んで「開く」をクリックします。

画像を選択して「開く」をクリック

画像が、「ico」拡張子でも大丈夫です。

クリックしたら、自動で別ウィンドウが立ち上がります。数秒すると自動で閉じます。

Bookmark Favicon Changer Close this window to abort

途中で中止したい場合は、ウィンドウを「×」で閉じます。

プライムビデオのアイコンが変わります。

プライムビデオのブックマークアイコンが変更される
2021年6月7日追記

この時は成功してたんですが、ウィンドウが自動で閉じなくて変更できない時がありました。

同じような方な現象に陥った方は、1つ目に紹介した開いているページのブックマークを変更する方法か、似たようなChrome拡張機能「Favicon Changer」を試してみてください。

感想

以上、ブックマークアイコンを変更するChrome拡張機能「Bookmark Favicon Changer」についてでした。

1つ気になるのが、アイコンを変更したにも関わらず、以前のアイコンが表示される時がある点です。いつの間にか、ちゃんと表示されてたり、中々安定しないのが気になります。

Posted by ナポリタン寿司