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

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.

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