Html 快捷方式图标不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12116670/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Shortcut icon is not working
提问by Vairon
I'm creating an HTML web page. I'm nowhere near finish and therefore should not focus too much on the following matter at the moment. But I'm confused about why my code for the Shortcut icon is not working. I'm testing everything by placing all files in the same folder (offline, no servers or anything similar)
我正在创建一个 HTML 网页。我还远未完成，因此目前不应过多关注以下问题。但我很困惑为什么我的快捷方式图标代码不起作用。我通过将所有文件放在同一个文件夹中来测试所有内容（离线，没有服务器或任何类似的东西）
The code is
代码是
<link rel="SHORTCUT ICON" type="image/x-icon" href="favicon.ico">
I tried with different ico files and it will only work with an ico uploaded to a website. For example the following code will work.
我尝试了不同的 ico 文件，但它只能与上传到网站的 ico 一起使用。例如，以下代码将起作用。
<link rel="SHORTCUT ICON" type="image/x-icon" href="\WEBSITEFOLDER\favicon.ico">
回答by coceban.vlad
Try:
尝试：
<link rel="SHORTCUT ICON" type="image/x-icon" href="~/favicon.ico">
or:
或者：
<link rel="Shortcut Icon" type="image/ico" href="favicon.ico">
回答by user1670316
I ran into this similar problem, and it turned out that the size of the actual file was what caused the issue. According to sources it has to be either 16x16 or 32x32. I would use an icon generator like: x-iconeditor.com.
我遇到了类似的问题，结果是实际文件的大小导致了问题。根据消息来源，它必须是 16x16 或 32x32。我会使用一个图标生成器，如：x-iconeditor.com。
回答by Milche Patern
If you want a favicon on local file, you will have to use Data URI
如果您想要本地文件上的收藏夹图标，则必须使用数据 URI
See this answer : local (file://) website favicon works in Firefox, not in Chrome or Safari- why?
请参阅此答案：本地（文件：//）网站图标在 Firefox 中有效，而不是在 Chrome 或 Safari 中-为什么？
回答by Gaurav Kachhadiya
set favicon icon size 16x16 it will work in chrome...
将 favicon 图标大小设置为 16x16 它将在 chrome 中工作...
回答by Cheshire Cat
I HAD the same problem. The site I "borrowed" from used a folder called "icons" for the location of the .ico file so I followed that exactly. The service my girlfriend used was Web.com. For whatever reason with Web.com if a shortcut icon in located anywhere other than the root directory, it will not show up in Internet Explorer. I simply moved the favicon file into the same place index.html was and changed that one line of code in the index to reflect that.
我有同样的问题。我“借用”的网站使用了一个名为“icons”的文件夹作为 .ico 文件的位置，所以我完全遵循了这一点。我女朋友使用的服务是 Web.com。无论出于何种原因，如果 Web.com 的快捷方式图标位于根目录以外的任何位置，它将不会显示在 Internet Explorer 中。我只是将 favicon 文件移动到 index.html 所在的相同位置，并更改了索引中的一行代码以反映这一点。
Solved (in my case anyway)! Good luck!
解决了（无论如何在我的情况下）！祝你好运！
回答by user6317575
<link rel="icon" href="relative_PATH/favicon.ico">
Try to put the all relative path to the icons file
尝试将所有相对路径放到图标文件中
回答by Mohammed Al-Tamimi
It doesn't work, absolutely because the link target is not correct. If you put the icon in the same folder of your web page, then correct the link to the following:
它不起作用，绝对是因为链接目标不正确。如果您将图标放在网页的同一文件夹中，请将链接更正为以下内容：
<link rel="SHORTCUT ICON" type="image/x-icon" href="./favicon.ico">
which means favicon.ico is in the current folder.
这意味着 favicon.ico 在当前文件夹中。
However you can use the debugger i.e. chrome debugger and navigate to the source code of your web page, i.e. right click on the link of your icon -> open in new tab, and see how it works
但是，您可以使用调试器即 chrome 调试器并导航到网页的源代码，即右键单击图标的链接 -> 在新选项卡中打开，然后查看它是如何工作的
回答by Hector Lara
Try to add the absolute route for the image icon and Use 48x48 px image size.
尝试为图像图标添加绝对路径并使用 48x48 像素图像大小。
That worked for me
那对我有用
<link rel="shortcut icon" type="image/png" href="http://yoursite.com/Content/Images/favicon.png" />
