Make Bookmarks Toolbar in Firefox only Show Favicon

Question

In chrome you can replace the names of bookmarks in the toolbar with their favicon. Is it possible to do the same thing in Firefox? I want all my bookmarks to just display the favicon in order to save space.

Answer 1

There is an add-on that does this, "Smart Bookmarks Bar":

https://addons.mozilla.org/en-US/firefox/addon/4072

You can set it to never show the name or to show it on mouse-over.

Answer 2

You can fairly simply just delete the text from the bookmark, which leaves it with only the Favicon.

Answer 3

The downside to deleting the descriptions/labels is that you lose some of the usefulness of the bookmark, you can't just type its name into the URL bar and find it any more, your bookmarks become harder to manage if the icons are lost (eg if you move to another machine). You can do this without installing any add-ons or deleting any bookmark descriptions, by just hiding them.

You can create a file called "userChrome.css" in your Firefox profile folder. This file can be used to add CSS rules to customize Firefox's UI, including hiding these labels.

Create a text file in Notepad with the following content:

/*
 * This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to
 * override default settings.
 */

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 

/* set default namespace to XUL */

/* hide the bookmark toolbar icon labels */
toolbarbutton.bookmark-item>.toolbarbutton-text,toolbarbutton.bookmark-item>.toolbarbutton-multiline-text {
  display: none !important;
}

Save this file as "userChrome.css" and save it into the Chrome folder within your Firefox profile folder. This will be in one of the following locations on a normal Windows box, or in the equivalent on Mac/Linux:

Win XP: C:\Documents and Settings\*[YourLogin]\Application Data\Mozilla\Firefox\Profiles\[randomtext]*.default\chrome

On Vista: C:\Users\*[YourLogin]\AppData\Roaming\Mozilla\Firefox\Profiles\[randomtext]*.default\chrome

Note that it 's possible that neither the "chrome" folder or the "userChrome.css" file exists in your profile at the moment, but you can create these if they don't currently exist. More info at MozillaZine: UserChrome.css, thanks to @Andrew for pointing this out in the comments.

Once you've saved that restart Firefox and you should find that you have a label-less bookmark toolbar.

If you want examples of other things you can set with this file, open the userChrome-example.css file that you should see in the Chrome folder.

Answer 4

I come back to this page every now and then, so I thought I'd compile everything that works into a single answer.

Here's how to hide the text next to each bookmark icon in the Firefox Bookmarks Toolbar:

---

First, you need to make Firefox look for a userChrome.css file, in order to be able to edit the CSS of Firefox itself. To do this:

• Enter about:config into your URL search bar.
• Search for toolkit.legacyUserProfileCustomizations.stylesheets (or "userprof") and set it to true.

Next, you need to create the userChrome.css file. To do this:

• Enter about:profiles into your URL search bar.
• Next to Root Directory, click the Open Folder button.
• In that folder that it opens up, create a chrome folder
• Inside that folder, create a new text file: /chrome/userChrome.css
• Make this the contents of userChrome.css:

/*
 * This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to
 * override default settings.
 */

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 

/* set default namespace to XUL */

/* hide the bookmark toolbar icon labels */
toolbarbutton.bookmark-item>.toolbarbutton-text,toolbarbutton.bookmark-item>.toolbarbutton-multiline-text {
  display: none !important;
}

That last bit at the end is what really matters. It hides the text next to each bookmark icon in the Bookmarks Toolbar in Firefox.

Once you do all of the above and save it, as a last step, restart Firefox, and then it should work, and you can give this an upvote. ;)

---

Optional information:

To find what CSS needed to be hidden (the child elements under <toolbarbutton class="bookmark-item">), I had to enable some things in the Firefox WebDeveloper settings (from F12):

• Enable browser chrome and add-on debugging toolboxes.
• Enable remote debugging.
• Grant it permission after opening up the "Browser Console" (also F12). With this, you can actually view Firefox's own HTML + CSS from within Firefox!

---

Helpful URL's:

• https://www.userchrome.org/how-create-userchrome-css.html
• https://github.com/Aris-t2/CustomCSSforFx
• http://kb.mozillazine.org/index.php?title=UserChrome.css