Existe-t-il un moyen d'ajouter un favicon personnalisé à un onglet d'application?

Depuis la sortie de Firefox "5", j'ai vraiment adoré la nouvelle fonctionnalité "App Tabs". Cependant, j'ai maintenant réalisé que plusieurs sites Web internes au travail n'ont pas de favicons. Ainsi, lorsque je crée un onglet d'application à partir de ces sites, il n'y a qu'une icône de "page vierge" dans l'onglet.

Peut-être que cela ne me dérangerait pas tant s'il n'y en avait qu'un, mais il y en a au moins deux ou trois. Donc, c'est juste un peu ennuyeux d'avoir à passer la souris sur les onglets des applications pour déterminer ce qui est quoi.

J'ai essayé d'utiliser Favicon Picker 2 pour changer les icônes de signets, mais cela ne fait que cela - change l'icône dans le dossier des signets. Cela ne change pas le favicon affiché à côté de l'URL dans la barre d'adresse, ni celui à côté du titre de la page dans les onglets - ce dernier étant celui qui est utilisé pour l'icône de l'onglet App.

Alors, existe-t-il un plugin ou une autre méthode côté client (et de préférence "Joe User" friendly) pour attribuer une icône à une page Web ou à un domaine, qui sera utilisé dans la barre d'onglets?

Il est assez simple de personnaliser les favicons de l'onglet de votre application.
Parce que l'onglet favicon de l'application est généré par le signet juste ...
(1) installez ceci - https://addons.mozilla.org/en-US/firefox/addon/bookmark-favicon-changer/
(2) affichez votre signets, faites un clic droit et sélectionnez l'image personnalisée que vous souhaitez
(3) redémarrer le navigateur (pour une nouvelle image à "prendre")
Terminé.

J'ai changé les icônes de mon onglet (Firefox 26) en utilisant la feuille de style suivante:

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

Pour utiliser cette feuille de style, placez [path to your profile]/chrome/userChrome.css-la ou installez un gestionnaire de style utilisateur tel que Stylish .

Cela fonctionne comme suit: Les onglets de Firefox font partie d'une arborescence de documents (voir browser.xul ):

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

L'étiquette d'un onglet correspond au titre de l'onglet. Dans mon exemple, je voulais ajouter un favicon à l'onglet liste de diffusion de W3. Malheureusement, il n'a pas un seul titre, j'ai donc dû chercher quelque chose de relativement unique qui correspond à l'onglet. Il s'avère que les pages concernées avaient "w3.org" dans leur titre, ce qui a entraîné la création de [label*="w3.org"].
De même, le site de mon université n'a pas de favicon. Tous les titres commencent par "TU", j'ai donc utilisé [label^="TU"].

Sélecteurs plus courants: [label$="last words"], [label="Exact match"].
Négation: [label*="w3.org"]:not([label$="- Gmail"])(= sélectionnez les onglets dont le titre contient "w3.org", sauf s'il se termine par "- Gmail").

Si vos onglets épinglés ne changent jamais de position, vous pouvez également essayer quelque chose comme ceci pour changer l'icône du premier onglet:

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