☰

如何更改 Firefox 书签工具栏图标？

tag-icon • tag-icon firefox bookmarks toolbar
如何更改 Firefox 书签工具栏图标？

我的 Firefox 书签工具栏项目时不时会无缘无故地更改图标，尤其是在网站关闭时。我得到的 DNS 站点图标到处都是，还有一种情况是，我在一个完全不相关的书签上看到了 Facebook 图标，所以问题是：我如何更改书签工具栏中书签上的图标？

答案1

网站图标选择器 2添加用于替换书签图标的 UI。该扩展基于 MozillaZine 中发布的版本。它还增加了图标大小限制。

在此处输入图片描述

答案2

将书签指向本地 HTML 文档，该文档会立即重定向到所需目的地。链接到同一目录中的本地图标。

您可能需要重新启动浏览器，然后书签图标才会显示在书签上。

file:///[路径]/example.html

<html>
<head>
    <meta http-equiv="refresh" content="0; url=http://www.example.com" />
    <link rel="shortcut icon" href="example.ico" type="image/x-icon" />
</head>
<body></body>
</html>

file:///[路径]/example.ico

此解决方案适合我在 Firefox 47.0 中的个人需求。请注意，此解决方案在以下情况下效果不佳：

  • 您需要经常创建这样的书签。
  • 为了安全起见，您已禁用重定向。
  • 书签必须直接指向目的地。

答案3

以下文章介绍了如何手动/无需额外扩展并使用 Firefox 配置文件夹中的 css 文件进行操作（尚未测试）

http://www.tersetechtips.com/how-to-change-firefox-bookmark-icons-favicons-without-extensions-or-addons/

  1. 打开计算机上 Firefox 的后台“配置文件”文件夹。在 Windows 7/8 上，该文件夹位于：

C:\Users\你的用户名\AppData\Roaming\Mozilla\Firefox\Profiles\你的配置文件文件夹

  1. 在该文件夹中，创建一个名为“chrome”的新目录（如果尚不存在）。

  2. 在“chrome”文件夹中，创建一个名为“userChrome.css”的新文件。

  3. 打开 userChrome.css 并粘贴以下 CSS 代码：

/* First line of userChrome.css must be this: */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* Custom favicon for this bookmark */
.bookmark-item[label="BOOKMARK_NAME_HERE"] image {
    width:0!important;
    height:0!important;
    padding: 0 0 16px 16px !important;
    background:url(BASE_64_STRING_HERE)!important; 
}

答案4

建立灵感之上Stefan 的回答似乎在 2018 年发布之后到 2023 年 Firefox 版本 117 之间出现了问题，我想出了一个解决方案，它在 v117 中对我有用，并且可能一直很稳定，直到 Mozilla 决定停止支持userChrome.css。步骤如下：

  1. 在 about:config 中启用 Firefox 用户 chrome 并创建 userChrome.css 文件
  2. 将要使用的自定义图像转换为 base64。您可以使用以下 Web 工具base64大师或者在 Linux 系统上，该命令base64应该已经安装，因此您可以运行这样的命令（替换文件名和扩展名以匹配您的） 
    base64 -w0 YOUR_IMAGE_FILE.png > YOUR_ENCODED_IMAGE.txt
    在 macOS 上，命令将是： 
    openssl base64 -in YOUR_IMAGE_FILE.png -out YOUR_ENCODED_IMAGE.txt
    请记住，如果你有一个.ico文件，这不管用因为userChrome.cssCSS 样式不允许该图像类型。您需要 png、svg、jpg 或其他受支持的图像类型。
  3. 在userChrome.css第一步创建的文件中，添加以下 CSS。请注意不应该位于@namespace url()文件顶部；该@namespace指令现已过时，并且可能会破坏某些功能。 
    /* This code replaces the icon by finding it via URL. Replace the
 * image="..." part with label="EXACT BOOKMARK LABEL" if you'd 
 * prefer. The URL in this example is the entire thing exactly as
 * it exists in your bookmark, so it includes the scheme such as
 * http:// or https:// if that's part of your bookmark. */
.bookmark-item[image="page-icon:FULL_BOOKMARK_URL"] .toolbarbutton-icon {
  display: none;
}

.bookmark-item[image="page-icon:FULL_BOOKMARK_URL"]::before {
  /* replace image/png with the mime type of your image */
  background-image: url(data:image/png;base64,BASE_64_ENCODED_TEXT_FROM_PREVIOUS_STEP);
  background-size: 18px 18px;
  background-repeat: no-repeat;
  box-sizing: border-box;
  content: ' ';
  display: flex;
  height: 18px;
  width: 18px;
  margin-inline-end: 4px;
}

添加此代码后，您需要重新启动浏览器才能看到更新。您可以通过页面上的“重新启动 Firefox”按钮快速完成此操作about:profiles。如果您想调试更改并且习惯使用 Firefox 的开发人员工具，您可以为浏览器 chrome 启用它们并查看实际样式被应用到您的书签中。

相关内容