有没有办法将自定义图标添加到应用程序选项卡？

Question

自从 Firefox “5” 发布以来，我真的很喜欢新的“App Tabs”功能。但是，我现在意识到工作中的几个内部网站没有网站图标。因此，当我从这些网站中制作 App 标签时，标签中只有一个“空白页面”图标。

如果只有一个我可能不会太介意，但至少有两三个这样的。因此，必须将鼠标悬停在应用程序选项卡上才能弄清楚哪个是什么，这有点烦人。

我已经尝试使用 Favicon Picker 2 来更改书签图标，但它只能做到这一点 - 更改书签文件夹中的图标。它不会更改地址栏中 URL 旁边显示的图标，或选项卡中页面标题旁边的图标 - 后者是用于应用程序选项卡图标的图标。

那么，是否有插件或其他客户端（最好是“Joe 用户”友好的）方法来将图标分配给将在标签栏中使用的网页或域？

Answer 1

自定义您的应用程序选项卡图标非常简单。
因为 app tab favicon 是由书签生成的...
(1) 安装这个 -- https://addons.mozilla.org/en-US/firefox/addon/bookmark-favicon-changer/
(2) 查看你的书签，右键单击并选择您想要的自定义图像
(3) 重新启动浏览器（新图像要“拍摄”）
完成。

Answer 2

我使用以下样式表更改了我的选项卡 (Firefox 26) 的图标：

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

要使用这个样式表，要么把它[path to your profile]/chrome/userChrome.css，或者安装一个用户样式管理器，如时尚。

其工作原理如下： Firefox 中的选项卡是文档树的一部分（请参阅browser.xul）：

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

标签的标签与标签的标题相匹配。在我的示例中，我想向 W3 的邮件列表选项卡添加一个图标。不幸的是，它没有一个单一的标题，所以我不得不寻找与标签匹配的相对独特的东西。事实证明，相关页面的标题中有“w3.org”，这导致了[label*="w3.org"].
同样，我大学的网站也没有网站图标。所有标题都以“TU”开头，所以我使用了[label^="TU"].

更常见的选择器：[label$="last words"], [label="Exact match"].
否定：[label*="w3.org"]:not([label$="- Gmail"])（= 选择标题包含“w3.org”的标签，除非以“- Gmail”结尾）。

如果你的固定标签永远不会改变位置，那么你也可以尝试这样的事情来改变第一个标签的图标：

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