☰

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

tag-icon • tag-icon firefox browser-tabs favicon
有没有办法将自定义图标添加到应用程序选项卡？

自 Firefox 5 发布以来，我非常喜欢新的“应用选项卡”功能。但是，我现在意识到公司内部的几个网站没有网站图标。因此，当我将这些网站创建为应用选项卡时，选项卡中只有一个“空白页”图标。

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

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

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

答案1

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

在此处输入图片描述 在此处输入图片描述 在此处输入图片描述 在此处输入图片描述 在此处输入图片描述

答案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 中的选项卡是文档树的一部分（请参阅浏览器.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);
}

相关内容