Favicon 图标未显示在 Mozilla 浏览器的书签工具栏中

Question

Favicon 图标未显示在 Mozilla 浏览器的书签工具栏中

这是代码

 <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> 
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="192x192" href="/android-chrome-192x192.png">
  <link rel="alternate" rel="apple-touch-icon" href="/android-chrome-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/site.webmanifest">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">

Answer 1

尝试使用<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"> 。 其他原因可能是缓存

Answer 2

首先 [CTRL]+[SHIFT]+[DEL] 清除缓存然后重新启动 Firefox

下一步

<link rel="shortcut icon" href="http://yourdomain.com/images/favicon.ico?version=1" />

将 favicon 放在 web 服务器的根目录中并调用 favicon.ico。

请注意，在最新版本的 Firefox 中，favicon 仅显示在选项卡图标和书签上，而不显示在地址栏图标中。

Answer 3

当我使用专门创建 SVG 图标的过程而不是使用可用于 SVG、PNG、JPG 等文件类型的一般过程时，我遇到了同样的问题。

您似乎是一些在线生成器上的网站图标生成器 package ，例如这里。

首先单击此页面右上角的蓝色按钮，标题为Select Your Favicon Image 。

（不要点击下面的 2 个按钮中的任何一个，即标题为Demo With A Random Image或Create A SVG Favicon的按钮。后一个按钮不会生成将显示在您的书签工具栏图标上的 favicon，尽管它确实显示在 web页面标签。蓝色按钮过程也适用于 SVG 图标。）

单击蓝色按钮后，您接下来通过文件系统导航到要使用的图像，例如网站徽标图像，例如 logo.svg

经过一番搅动后，将打开一个选项页面。 如果您的 favicon 的外观相当方正且具有透明背景，则您可以接受这些配置的默认值。 在页面底部单击蓝色按钮，生成您的收藏夹和 HTML 代码

经过更多搅动后，会出现一个新页面，标题为Install Your Favicon 。

在索引页的最后一个条目之后复制并粘贴显示的 HTML 代码片段。 然后将图像和其他文件放在您网站的根目录中，即保存 index.html 文件的同一文件夹。

现在您需要先在浏览器上本地测试您的网站文件。 打开网站的 index.html 页面，将书签拖到您的书签文件夹中。

浏览器需要刷新、关闭和 - 如果它在关闭时没有自动清除数据 - 缓存 + cookies 清除。 然后在您网站的书签上重新打开浏览器。 从书签文件夹中刷新站点一次或两次。 favicon 现在应该显示在您的书签工具栏上。

FTP 您网站中所有受影响的文件到 web 服务器并为直播网站重复前面的过程。