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">
尝试使用<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
。其他原因可能是缓存
首先[CTRL]+[SHIFT]+[DEL]清除缓存,然后重新启动Firefox
用于下一步
<link rel="shortcut icon" href="http://yourdomain.com/images/favicon.ico?version=1" />
将favicon放在web服务器的根目录中,并称为favicon.ico.
请注意,在最近版本的Firefox中,收藏夹图标仅显示在选项卡图标和书签上,而不显示在地址栏图标中。
当我使用一个专门创建SVG收藏夹的过程,而不是使用可能用于SVG、PNG、JPG等文件类型的通用过程时,我也遇到了同样的问题。
你似乎是一些在线生成器上最喜欢的生成器包,比如这里。
首先单击此页面右上角的蓝色按钮,标题为选择您的Favicon图像。
(不要点击下面的两个按钮中的任何一个,即标题为用随机图像演示或创建SVG收藏夹的按钮。后一个按钮不会生成将显示在书签工具栏图标上的收藏夹图标,尽管它确实显示在网页选项卡上。蓝色按钮过程也适用于SVG收藏夹图标。(
单击蓝色按钮后,您接下来将通过文件系统导航到要使用的图像,例如网站徽标图像,例如logo.svg
经过一番折腾后,会打开一个选项页面。如果你的收藏夹在方面是合理的正方形,如果它有一个透明的背景,你可以接受这些配置的默认值。在页面底部单击蓝色按钮,生成您的传真&HTML代码
经过更多的搅动之后,会出现一个新页面,标题为安装您的Favicon。
将显示的HTML代码片段复制并粘贴到索引页的最后一个条目之后。然后将图像和其他文件放在网站的根目录中,即存放index.html文件的同一文件夹中。
现在,您需要首先在浏览器上本地测试您的网站文件。打开网站的index.html页面,将书签拖动到书签文件夹中。
浏览器需要刷新、关闭,如果关闭时没有自动清除数据,则需要清除缓存+cookie。然后在网站书签上重新打开浏览器。从书签文件夹中刷新网站一两次。收藏夹图标现在应该会显示在书签工具栏上。
将网站中所有受影响的文件FTP到web服务器,并对实时网站重复先前的过程。