9

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.

3
  • How can you replace bookmark names with their favicons in Chrome? I didn't even know it was possible.
    – alex
    Commented Sep 10, 2009 at 13:32
  • I am not exactly sure, my friend has it on his Chrome. I don't use chrome because I use OS X.
    – Vandelizer
    Commented Sep 10, 2009 at 13:58
  • See GAThrawn's answer and my comment.
    – Andrew
    Commented Oct 8, 2017 at 3:25

4 Answers 4

4

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.

3
  • Just installed it. Looks pretty good. Will give it a day of use.
    – Vandelizer
    Commented Sep 10, 2009 at 14:07
  • Been using it for ages - it's solid. Also see forums.mozillazine.org/viewtopic.php?t=202845 to add favicons to folders
    – CAD bloke
    Commented May 30, 2010 at 23:23
  • 1
    This has been made obsolete. Its replacement, Roomy Bookmarks Toolbar, is also obsolete now, as of Firefox 57 (and it continuously crashes my Firefox 56). I've searched for other Add-ons to replace it and could find none. See GAThrawn's answer and my comment, it's the only good solution we have for now.
    – Andrew
    Commented Oct 8, 2017 at 3:26
8

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

alt text

4
  • 2
    This is how I do it as well. Easy to do and doesn't necessitate yet another add-on :-)
    – Chris_K
    Commented Sep 10, 2009 at 14:31
  • a good solution, I think I like the ability to have name on roll-over for the add-on.
    – Vandelizer
    Commented Sep 11, 2009 at 10:48
  • This is the only way to do it in Chrome, and because I use Xmarks to keep my bookmarks synchronized between the two browsers, I simply omit a name. Commented Apr 22, 2010 at 10:47
  • Bad solution, actually. What if you have loads of bookmarks? What if you have duplicate bookmark icons? What if you want the tooltips to still show the text?
    – Andrew
    Commented Oct 8, 2017 at 3:25
4

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.

8
  • It would be nice if the code did not affect bookmarks on the PrefBar. I have a couple of bookmarklets on the Prefbar (to change font size and use to mono), and when I use the code their labels disappear. And of course you cannot, as far as I know, add a favicon to them...
    – user243786
    Commented Aug 6, 2013 at 20:53
  • Using this approach adds an empty space next to the icon. This space makes sense if there is a label (otherwise the text would be too close to the icon), but if the text is hidden, the space just wastes space. Is there a way to remove that extra space other than removing the label? Or is there a way to identify the element in CSS other than by its label? Something like .bookmark-item[tag="_THETAG_"] instead of .bookmark-item[label="_THELABEL_"]?
    – scenia
    Commented Feb 1, 2016 at 11:43
  • 1
    Great, it still works in Firefox 56! Note however that "This file does not exist in a new profile. You can create it manually." (kb.mozillazine.org/index.php?title=UserChrome.css) I created a /chrome/ folder and a /chrome/userChrome.css file manually, copy pasted the code above into it, and restarted Firefox, and it works beautifully. Thank you very much!
    – Andrew
    Commented Oct 8, 2017 at 3:28
  • 1
    "Browser Toolbox"* - hopefully there won't be a poop that rejects my edit this time... but in case there is, I changed the CSS selector to toolbarbutton.bookmark-item>.toolbarbutton-text,toolbarbutton.bookmark-item>.toolbarbutton-multiline-text... Thanks for throwing out my edit.
    – Andrew
    Commented Jun 25, 2018 at 13:51
  • 1
    @Andrew I don't know why the other editors chose to reject your edit, but it looks good to me, and I've approved it.
    – GAThrawn
    Commented Jul 10, 2018 at 13:34
0

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:

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .