広告を利用しています

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

【Favicon Changer】ブックマークアイコンを変更する拡張機能

2021年10月26日Chrome拡張機能

「Favicon Changer」のアイコン

この記事では、ウェブサイトのタブアイコンを、好きなアイコン画像に変更できるChrome拡張機能「Favicon Changer(ファビコン・チェンジャー)」について書きます。

「Favicon Changer」のスクリーンショット1

ウェブサイト(タブ)のアイコンを、好きな画像に変更できるChrome拡張機能です。

変更したいサイトを開いて、Favicon Changerのアイコン拡張機能ボタンをクリックします。専用の設定ポップアップが表示されるので、好きな画像を選択します。画像は、パソコン内に保存されているJPG、PNG、ICO拡張子などを指定できます。インターネット上から、直接URLで指定することもできます。

ドメイン単位か、個別ページのみか選択できます。例えば、当サイトの特定の記事だけアイコンを変更できます。あるいは、「www.amazon.co.jp」のドメインから始まるURL全てに反映させるといったことも可能です。

タブアイコン、ブックマークアイコン両方に反映されます。

通常は、サイトのロゴ等がブックマークアイコンに表示されます。しかし、たまに白紙のままのサイトがあります。そういった時に本サービスが役立ちます。自身の環境上だけの変更で、誰にも迷惑をかけません。

本拡張機能は、Chrome拡張機能だけです。Firefoxアドオンは提供されていません。Chrome、Edge、VivaldiなどのChromiumベースのブラウザで利用できます。ただし、類似アドオンがあります。

「Favicon Changer」の読み方は、「ファビコンチェンジャー」です。更新日時が2013年で止まっていますが、2022年12月時点で正常に利用できました。

2023年7月追記

2023年7月にTwitterの名称が「X」に変わり、同時にアイコンも「X」になりました。前の青い鳥アイコンが良かった~という方が、本記事を見てくださっているようです。

個人的には、更新がだいぶ前に終了している本拡張機能よりも、Twitterに特化したChrome拡張機能・Firefoxアドオン「Twitter UI Customizer」がおすすめです。アイコンを以前の青い鳥に戻すだけでなく、別の画像に差し替えたり、ツイート下ボタンを入れ替えたり、不要な左・右サイドバーの項目を消したりできます。

リリース元:Maxximum Creations
記事執筆時のバージョン:1.0.3(2013年1月1日)

インストール方法

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

Firefoxをご利用の方

本拡張機能は、Chrome拡張機能だけのリリースです。Firefoxアドオンをご利用の方は、「Favicon Switcher(ファビコン・スイッチャー)」で代用できるかと思います。

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

「Favicon Changer」のインストール手順画像1

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

「Favicon Changer」のインストール手順画像2

右上にFavicon Changerのアイコンアイコンが追加されます。インストールは以上です。

使い方

以下の3つのステップでアイコンを変更できます。

  1. 設定したい好きな画像を用意する
  2. 「Favicon Changer」で画像を選択する
  3. 「Change」ボタンでアイコンを変更する

設定したい好きな画像を用意する

アイコンは、PC内にある画像か、インターネットの画像から選択できます。わざわざ保存しなくても、インターネットから直接URLで指定することも可能です。

今回は、一旦PCに保存してみます。僕は、「プライムビデオ」のアイコンを変更したいと思ったので、プライムビデオの画像をインターネットで検索して保存します。

「プライムビデオ」のロゴ画像をPC内に保存する手順画像1

保存したら、パソコンの好きな場所に移動します。

「プライムビデオ」のロゴ画像をPC内に保存する手順画像2

用意する画像は、正方形であまりごちゃごちゃしていないアイコンがいいと思います。ごちゃごちゃしていたら、ブックマークアイコンにした時、画像がつぶれてしまいます。

シンプルに、色で判別できる程度の画像がベストだと思います。プライムビデオなら「青」みたいな感じです。

「Favicon Changer」で画像を選択する

画像を用意できたら、アイコンを変更したいサイトを開きます。今回はプライムビデオのアイコンを変更したいので、プライムビデオを開きます。

Amazonプライムビデオのスクリーンショット

サイトを開いたら、「Favicon Changer」のアイコンアイコンをクリックします。ポップアップが表示されます。

「Favicon Changer」でブックマークアイコンを変更する手順画像1
ブラウザ内部ページでは動作しない

Chromeの新しいタブやChromeウェブストアなど、一部ページでは動作しません。拡張機能の権限による特性です。

Chromeの内部ページで開いた「Favicon Changer」ポップアップ画像

インターネットから直接URL指定したい場合は、「Image Location」に画像URLを入力します。指定する場合、「https://placehold.jp/150×150.png」といった感じで、画像拡張子が表示されているURLを指定します。「https://placehold.jp」ではダメです。

ローカル(PC)上から画像選択したい場合は、「Browse」をクリックします。アイコン画像選択ダイアログが表示されるので、先ほど保存した画像を選んで、「開く」をクリックします。

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

JPG、PNG、ICO拡張子などを指定できます。GIF画像は設定できても反映されませんでした。JPG画像だと透過されないので、アイコンには不向きかもしれません。

「Change」ボタンでアイコンを変更する

画像を選択したら、ドメインレベルの変更(Entire Site)か、個別ぺージの変更(Single Page)か選択します。

「Favicon Changer」でブックマークアイコンを変更する手順画像3
適用するサイトページの指定
Entire Siteドメインレベルの変更(例:ナポリタン寿司のPC日記全体の変更)
Single Page現在開いているページのみの変更(例:現在開いている記事のみ変更)

例えば、プライムビデオで「Entire Site」にすると、プライムビデオページだけでなく、Amazonページ(https://www.amazon.co.jp)まで変わってしまいます。同じ「https://www.amazon.co.jp」のURLから始まるので、仕方ないですね。

Amazonショッピングページを変えたくない場合、プライムビデオページの「Single Page」にします。しかし、それだとプライムビデオのトップページだけ変わって、作品詳細ページでは変わらないので注意です。

選択できたら、「New Favicon」にプレビュー画像が表示されます。問題なければ、右端の「Change」ボタンをクリックします。

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

少し待つと、「Favicon Changed」と表示されます。これで変更成功です。「Change」をクリックするまでは、反映されません。

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

ブックマークアイコンが変わります。拡張機能を削除しない限りは、ブラウザを再起動しても維持されます。

「Favicon Changer」でブックマークアイコンを変更した画像

ブックマークアイコンだけでなく、タブアイコンも変わります。

「Favicon Changer」でタブアイコンを変更した画像

ブックマークに登録していないサイトも変更できます。タブアイコンが切り替わります。

「Favicon Changer」でブックマークに登録していないサイト(Microsoft)のアイコンを変更した画像

アイコン画像を元に戻す方法

アイコンを変更したサイトを開いて、「Favicon Changer」拡張機能アイコンをクリックします。ポップアップ内に適用した画像が表示されているのでクリックします。

「Favicon Changer」で変更した画像を元に戻す手順画像1

「Remove」をクリックします。

「Favicon Changer」で変更した画像を元に戻す手順画像2

アイコンが元に戻ります。場合によっては、元のアイコンではなく、一旦白紙になるかもしれません。ページをリロード、あるいはブラウザを再起動すると元に戻ります。

感想

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

気軽に変えられる点はいいですね。

2021年10月26日Chrome拡張機能

Posted by ナポリタン寿司