2021FirefoxのFaviconを好きなものに変更する方法(フォルダも変更可)

スポンサーリンク

2018年のFirefox Quantumになってから、
Favicon Changerというプラグインが使えなくなってしまいました。

なので、ブックマークのファビコン(アイコン)を
自由にプラグインでは現状変えられないのですが、
CSSを追記するという方法を使えば、ブックマークのファビコンを変更する事が出来ます。

「CSS変更なんて難しそう。。」と思うと思いますが、
私もいざやってみたら、案外簡単に出来て、びっくりしたので、

ちょっと手間はかかりますが、ファビコンを好きなものに変更したい場合は、
参考にして頂ければと思います。

ちなみにブックマークフォルダのファビコンも変更可能です。

2021年最新のFirefoxでも有効なので、ぜひ試してみてください!

スポンサーリンク

ブックマークのファビコンを変更する方法。

では、まずブックマークのファビコン/アイコンを変更する方法から解説していきます。

実はこれを解説している動画(英語)もあるので、それを参考にするのも良いです。

Reset or change individual bookmark icons in Mozilla Firefox

では、こちらでは、文字と図で解説していきましょう。

隠しフォルダAppDataを開く

まず、フォルダを開くのですが、

C:\Users\ユーザー名\AppData\Roaming\Mozilla\Firefox\Profiles\〇〇.default-12345

というフォルダを探します。

AppDataは隠しフォルダです。

なので、デスクトップ左下の虫眼鏡でAppDataと入力してフォルダを探すか、
出てこないのであれば、

C:\Users\ユーザー名\
までフォルダを開き、ファイルエクスプローラーにAppDataと手入力しましょう。

そして、AppData\Roaming\Mozilla\Firefox\Profiles

と行くと、

〇〇.default-12345みたいな名称のフォルダがありますので、
それを開きます。

開いたら、新しいフォルダを作り、その新しいフォルダにchromeという名前を付けます。

フォルダにファビコン用画像を入れる

では、例えば、私の場合、ブックマークに「MAP」という名前のものがあります。
このファビコンを別のファビコンに変更したいとしましょう。

例えば、この画像を使いたいとします。
そしたら、この画像の縦横16pxの画像を用意します。

画像サイズの変更は画像サイズ変更サイトを使うと便利です。

読み込んだ写真や画像を拡大・縮小して任意のサイズに変更(拡大・縮小・リサイズ)する編集ツール。WEBブラウザ上で動作するのでインストール不要。スマートフォンにも対応。

そしたら、この16pxの画像を先程のChromeフォルダに入れます。

メモ帳に記述する。

次に、メモ帳(notepad)を開いてください。

画像のように記述します。

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* Bookmark icon (favicon) */ .bookmark-item[label=”MAP“] image {
width:0pt!important; height:0pt!important; padding: 0 0 16px 16px !important; background:url(‘123.png‘)!important; }

そして、MAPの部分は、ブックマークで実際に使っている名前に変更します。


私の場合は、名称がMAPなので、MAPと入力しています。

そして、今作った画像の名称を123.pngの部分に入れます。

そして、保存する時に、保存のタイプを「全てのファイル(All Files)」にして、
「userChrome.css」という名前で保存してください。

そして、これも先程のchromeフォルダに入れます。

これでFirefoxを一度閉じて、もう一度起動してください。
Faviconが新しいものに変わります。

無事変わりました。

ファビコンが変わらない場合は?

同じようにやったけど、ファビコンが変わらないという場合は、アドレスバーにabout:configと打ってください。

「危険性を承知の上で使用する」を押します。

toolkit.legacyUserProfileCustomizations.stylesheetsを虫眼鏡マークの所で検索。

それが、falseになってると思うので、ダブルクリックしてtrueにして、そのままブラウザを閉じて、再度開いてください。これで表示されるはずです。

ファビコンを複数変えたい場合は、

/* Bookmark icon (favicon) */ .bookmark-item[label=”MAP“] image {
width:0pt!important; height:0pt!important; padding: 0 0 16px 16px !important; background:url(‘123.png‘)!important; }

このラインを追記して、画像を同じようにchromeフォルダに追加するだけです。

*ちなみに、デフォルトファビコンが表示されてしまうサイトも、同様の方法で1つずつ好きなファビコンを設定する事は可能ですが、デフォルトファビコンそのものを変更する事は出来ないらしいです。

フォルダのファビコンを変更する場合

ちなみに、フォルダのファビコンを変更したい場合は、ちょっと違う記述を使います。

こんな感じで、デフォルトのフォルダアイコンとは違う物を設定できます。

やり方

これも同様で、まずはフォルダ画像を用意して、先程作ったchromeフォルダに入れます。(こちらはリサイズする必要なし。どんなサイズでもOK。png, jpgなど。)

ここから読み始めた人は、

C:\Users\ユーザー名\AppData\Roaming\Mozilla\Firefox\Profiles\〇〇.default-12345

の中にchromeという名前のフォルダを自分で作って、そこに入れます。(詳しくは最初から読んで頂くと画像つきで分かりやすいです。)

次に、先程作ったuserChrome.cssをメモ帳で開きます。

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* UI bookmark folder */ .bookmark-item[container] {
list-style-image: url(‘folder3.png‘) !important; }

黒字の部分を追記してください。(赤字は記入済みなら、2度入力する必要なし。未記入なら記入。)

ここから読み始めた人は、メモ帳に上記を全部コピペして、userChrome.cssという名前で保存して、先程のchromeフォルダに入れます。

*folder3.pngの部分は、ご自身が用意した画像名に変更してください。

これで保存して、Firefoxを一度閉じて起動し直せば、フォルダアイコンが変わります。

ちなみにこれも動画解説(英語)があります。

(READ DESCRIPTION) How to change bookmark folder icon and font size in Mozilla Firefox (UPDATED)


一度、この設定をしてしまえば、次からまた変更するのも簡単ですね!
新しいファビコンチェンジプラグインが出るまでは、この方法を使っていくと便利ですよ。

スポンサーリンク

シェアする

フォローする

スポンサーリンク