Is there a way to add a custom favicon to an App Tab?

Question

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?

Answer 1

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")
Done.

Answer 2

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);
}