Add a Bookmark Icons Sidebar to Firefox

I do most of my web browsing on a widescreen laptop. While the screen is great, it’s not the best for viewing web pages. I want to be able to see as much of a web page as possible without having to scroll, but I also don’t want to sacrifice my browser’s usability or practicality. With a few customizations of Mozilla Firefox, I feel I’ve achieved this.

A large part of the solution was to go from using the bookmarks toolbar to using an icon-based bookmarks sidebar. At first, I looked for an extension to do this, but there was none to be found. Instead, I used a combination of extensions to get the result I wanted.

Step 1: Download the All-In-One Sidebar extension. This extension is meant to combine a lot of aspects of Firefox into the sidebar. I personally like some of the features it has, but we’re primarily using the extension for its easily customizable sidebar. If you don’t want it to change the way parts of Firefox such as the downloads manager and add-ons window work, be sure to go into this extension’s options and uncheck everything under the “panels” tab.

Step 2: Clean out the sidebar by right-clicking anywhere in its empty space and choose “customize.” Go ahead and drag every icon from the sidebar into the window that just appeared.

Step 3: Download the Custom Buttons² extension. This allows us to make our own buttons to add to toolbars, or, in our case, the sidebar. This extension looks daunting at first, but don’t worry, other people have already done the hard part in making the buttons: the coding.

Step 4: Download one of the two pre-created “add a bookmark button” buttons. I personally went with the second one, because it ended up working more intuitively. I’ll only be covering how to use that one from here.

Step 5: Add the button to your sidebar (right-click the sidebar again, choose ‘customize,’ and drag the new button from the window to the sidebar, then exit the customize toolbar window).

Step 6 (optional): I prefer that, when middle-clicked, the bookmark buttons open the site in a new tab with that tab in focus (automatically switched to). But, by default, when you middle-click on one of the bookmark buttons made by our button maker, the site does open in a new tab, but that tab is not put into focus automatically. We can fix this with a slight tweaking of the button maker’s code.

Right-click the “make your own bookmark button” button and choose “edit button.” Click on the little tab that says “initialization code.” You should be at a screen that looks like this:

To make it easy for you, you can just copy-and-paste my code. Just replace all of the button’s code with the entirety of the code I’ve provided.

For the curious, the line of code in need of changing goes from this:

nncase 1:ngBrowser.addTab(link);

To this:

nncase 1:ngBrowser.selectedTab=gBrowser.addTab(link);

So if you’re more inclined to seek out and change the single line of code yourself, have at it.

Step 7: Assuming everything up to this point has been done properly, you should be able to navigate to any webpage, click the “make a bookmark button” button, and the site you’re on will be added onto the sidebar. Of course, not every site has a favicon (though every good site does).

So, when you encounter a site that doesn’t have a favicon, the button maker is going to prompt you for one. You’ll need to make your own, and it’s easier than you think.

If you have Adobe® Photoshop®, you can install a plugin that allows you to save files in the .ICO format.

Otherwise, you can use a free image-editing program such as GIMP to make a 16 pixel by 16 pixel .PNG image that represents the site in need of a favicon. Once you’ve done that, you can upload it to a favicon editor and you will get a converted .ICO file back.

Remember, when adding favicons from your computer, you have to give the filepath. My suggestion, if you don’t know what to type in, is to open the file in Firefox (right-click it, highlight “Open With” and choose Firefox). That way, you can simply copy what is in the address bar and provide that to the button maker.

DONE! I hope that this works out as well for you as it did for me. If you have any questions (or better alternatives!), please feel free to share them.

Take a look at the final result in action: