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

Solution 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.

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