Since the release of Firefox "5", I've come to really love the new "App Tabs" feature. However, I've now realized that several internal websites at work do not have favicons. So, when I make an App Tab out of these sites, there's only a "blank page" icon in the tab.

Perhaps I wouldn't mind so much if there was only one, but there's at least two or three of these. So, it's just a bit annoying to have to mouse-over the App Tabs to figure out which is what.

I've tried using Favicon Picker 2 to change the bookmark icons, but it only does exactly that - changes the icon in the bookmarks folder. It doesn't change the favicon that's displayed next to the URL in the Address Bar, or the one next to the page title in tabs - the latter being that which is used for the App Tab icon.

So, is there a plugin or other client-side (and preferably "Joe User" friendly) method to assign an icon to a web page or domain, that will be used in the tab bar?

2 Answers 2


It's pretty simple to customize your app tab favicons.
Because the app tab favicon is generated by the bookmark just...
(1) install this -- https://addons.mozilla.org/en-US/firefox/addon/bookmark-favicon-changer/
(2) view your bookmarks, right click and select the custom image you want
(3) restart browser (for new image to "take")

enter image description here enter image description here enter image description here enter image description here enter image description here

  • @admintech - As mentioned, I've already tried using a bookmark icon changer. How is this plugin different from the one I've used?
    – Iszi
    Jun 23, 2011 at 15:28
  • 1
    You have to open the bookmark after changing the favicon then re-add as an app tab
    – admintech
    Jun 23, 2011 at 15:37
  • @admintech - I don't know about your suggested plugin, but mine doesn't change the tab icon even in a normal tab, even after browser re-load. Does it matter that the sites I'm trying to do this on are SSL sites?
    – Iszi
    Jun 23, 2011 at 15:41
  • 1
    Nevermind. Just tested the Bookmark Favicon Changer to be sure. I'm not sure what it does that Favicon Picker doesn't, but it seems to apply the favicon to tabs also. Thanks! Now, if I could only get it to apply to the whole sub-domain or something, so that navigating the "app" doesn't clear the favicon...
    – Iszi
    Jun 23, 2011 at 15:44
  • 2
    Excellent solution to a nagging problem. Sadly, the author of the plug states that as of Firefox 22, the API breaks the plugin in an unfixable way.
    – gbarry
    Apr 26, 2013 at 17:25

I've changed the icons of my tab (Firefox 26) using the following stylesheet:

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

tab[pinned="true"][label*="w3.org"] .tab-icon-image {
    list-style-image: url(https://www.w3.org/favicon.ico);
tab[pinned="true"][label^="TU"] .tab-icon-image {
    list-style-image: url(https://www.tue.nl/favicon.ico);

To use this stylesheet, either put it in [path to your profile]/chrome/userChrome.css, or install a user style manager such as Stylish.

This works as follows: The tabs in Firefox are part of a document tree (see browser.xul):

<tabs id="tabbrowser-tabs" ...>
    <tab class="tabbrowser-tab" ... pinned="true" ... label="some text" ...>

The label of a tab matches the tab's title. In my example, I wanted to add a favicon to the the mailing list tab of W3. Unfortunately, it does not have a single title, so I had to look for something relatively unique that matches the tab. It turns out that the relevant pages had "w3.org" in their title, which resulted in the creation of [label*="w3.org"].
Similarly, the site of my university has no favicon. All titles start with "TU", so I used [label^="TU"].

More common selectors: [label$="last words"], [label="Exact match"].
Negation: [label*="w3.org"]:not([label$="- Gmail"]) (= select tabs whose title contains "w3.org", unless it ends with "- Gmail").

If your pinned tabs never change position, then you can also try something like this to change the icon of the first tab:

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

tab[pinned="true"]:nth-child(1) .tab-icon-image {
    list-style-image: url(https://www.mozilla.org/favicon.ico);
  • Great writeup, many thanks. Works (with Stylish) exactly as advertised, no need for another add-on.
    – Lebenita
    Oct 29, 2014 at 13:57
  • Is it possible to get this to work with Chrome? Oct 18, 2016 at 12:33

You must log in to answer this question.

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