向静态 HTML 页面添加收藏夹图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9943771/
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
Adding a favicon to a static HTML page
提问by TheLegend
I have a few static pages that are just pure HTML, that we display when the server goes down. How can I put a favicon that I made (it's 16x16px and it's sitting in the same directory as the HTML file; it's called favicon.ico) as the "tab" icon as it were? I have read up on Wikipedia and looked at a few tutorials and have implemented the following:
我有一些纯 HTML 的静态页面，我们会在服务器出现故障时显示这些页面。我如何将我制作的图标（它是 16x16 像素，它与 HTML 文件位于同一目录中；它被称为 favicon.ico）作为“标签”图标？我已经阅读了维基百科并查看了一些教程并实现了以下内容：
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
But it still doesn't want to work. I am using Chrome to test the sites. According to Wikipedia .ico is the best picture format that runs on all browser types.
但它仍然不想工作。我正在使用 Chrome 来测试这些网站。根据维基百科 .ico 是在所有浏览器类型上运行的最佳图片格式。
Update
更新
I could not get this to work locally although the code checks out it will only really work properly once the server started serving the site. Just try pushing it up to the server and refresh your cache and it should work fine.
我无法让它在本地工作，尽管代码检查出来它只有在服务器开始为站点提供服务后才能真正正常工作。只需尝试将其推送到服务器并刷新缓存，它应该可以正常工作。
回答by Hazy McGee
You can make a 16x16 .png and then use one of the following snippets between the <head>tags of your static HTML documents:
您可以制作一个 16x16 .png，然后<head>在静态 HTML 文档的标签之间使用以下片段之一：
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
回答by Codecraft
Most browsers will pick up favicon.icofrom the root directory of the site without needing to be told; but they don't always update it with a new one right away.
大多数浏览器会favicon.ico在不需要告知的情况下从站点的根目录中获取；但他们并不总是立即用新的更新它。
However, I usually go for the second of your examples:
但是，我通常会使用您的第二个示例：
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
回答by Eduardo Russo
Actually, to make your favicon work in all browsers, you must have more than 10 images in the correct sizes and formats.
实际上，要使您的网站图标在所有浏览器中都能正常工作，您必须拥有 10 张以上大小和格式正确的图像。
I created an App (faviconit.com) so people don′t have to create all these images and the correct tags by hand.
我创建了一个应用程序（faviconit.com），所以人们不必手工创建所有这些图像和正确的标签。
Hope you like it.
希望你喜欢。
回答by Jet Blue
The following works for me...
以下对我有用...
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
回答by Farshid
Convert your image file to Base64 string with a tool like thisand then replace the YourBase64StringHereplaceholder in the below snippet with your string and put the line in your HTML head section:
将您的图像文件为Base64字符串像一个工具，这样，然后替换YourBase64StringHere占位符下面的代码片段与您的字符串和放线在你的HTML头部分：
<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />
This will work 100% in browsers.
这将在浏览器中 100% 工作。
回答by ashleedawg
Usage Syntax: .ico, .gif, .png, .svg
使用语法：.ico, .gif, .png,.svg
This table shows how to use the faviconin major browsers. The standard implementation uses a link element with a rel attribute in the section of the document to specify the file format and file name and location.
下表显示了如何favicon在主要浏览器中使用。标准实现在文档的部分中使用具有 rel 属性的链接元素来指定文件格式和文件名和位置。
Note that most browsers will give precedence to a favicon.icofilelocated in the website's root (therefore ignoringany icon link tags).
请注意，大多数浏览器会优先考虑favicon.ico位于网站根目录中的文件（因此忽略任何图标链接标签）。
Edge Firefox Chrome I.E. Opera Safari
---------------------------------------- ------ --------- -------- ------ ------- --------
<link rel="shortcut icon" Yes Yes Yes Yes Yes Yes
href="http://example.com/myicon.ico">
<link rel="icon" Yes Yes Yes 9 Yes Yes
type="image/vnd.microsoft.icon"
href="http://example.com/image.ico">
<link rel="icon" type="image/x-icon" Yes Yes Yes 9 Yes Yes
href="http://example.com/image.ico">
<link rel="icon" Yes Yes Yes 11 Yes Yes
href="http://example.com/image.ico">
<link rel="icon" type="image/gif" Yes Yes Yes 11 Yes Yes
href="http://example.com/image.gif">
<link rel="icon" type="image/png" Yes Yes Yes 11 Yes Yes
href="http://example.com/image.png">
<link rel="icon" type="image/svg+xml" Yes Yes Yes Yes Yes Yes
href="http://example.com/image.svg">
File format support
文件格式支持
The following table illustrates the image file format support for the favicon:
下表说明了对 的图像文件格式支持favicon：
Animated
Browser ICO PNG GIF GIF's JPEG APNG SVG
------------------- ----- ------ ------ ------- ------ ------ ------
Edge Yes Yes Yes No ? ? ?
Firefox 1.0 1.0 1.0 Yes Yes 3.0 41.0
Google Chrome Yes Yes 4 No 4 No No
Internet Explorer 5.0 11.0 11.0 No No No No
Safari Yes 4 4 No 4 No No
Opera 7.0 7.0 7.0 7.0 7.0 9.5 44.0
Browser Implementation
浏览器实现
The table below illustrates the different areas of the browser where favicon's are displayed:
下表说明了浏览器中显示网站图标的不同区域：
Address Address bar 'Links' Drag to
Browser Bar drop-down bar Bookmarks Tabs desktop
------------------- ------------ ----------- --------- ----------- ------ ---------
Edge No Yes Yes Yes Yes Yes
Firefox until v12 Yes Yes Yes Yes Yes
Google Chrome No No Yes Yes 1.0 No
Internet Explorer 7.0 No 5.0 5.0 7.0 5.0
Safari Yes Yes No Yes 12 No
Opera v7–12: Yes No 7.0 7.0 7.0 7.0
> v14: No
Icon files can be 16×16, 32×32, 48×48, or 64×64pixels in size, and 8-bit, 24-bit, or 32-bitin color depth.
图标文件可以是16×16，32×32，48×48，或64×64的尺寸的像素，和8位，24位，或32位中的颜色深度。
While the information above is generally correct, there are some variations/exceptions in certain situations.
虽然上述信息大体上是正确的，但在某些情况下存在一些变化/例外。
See the full article at the sourceon Wikipedia.
Update: ("more info")
更新：（“更多信息”）
- See Google's "new" (2019) criteria to Define a favicon to show in search results.
You can retrieve (programmatically or manually) Google's cached faviconfor any domain with a URL such as:
https://www.google.com/s2/favicons?domain=stackoverflow.comUsing the above URL directly in an
<img>tag returns: "".I've used realfavicongenerator.neta couple times; it's very thorough, generating/customizing every possible favicon variation you might need for maximum compatibility. (However, if you're seeking a singlefavicon image, this is might notbe the tool for you!) For simple file conversion (eg.,
PNGtoICO, etc) I like onlineconvertfree.com.
- 请参阅 Google 的“新”(2019) 标准以定义要在搜索结果中显示的图标。
您可以通过以下 URL检索（以编程方式或手动方式）Google 缓存的任何域的网站图标：
https://www.google.com/s2/favicons?domain=stackoverflow.com直接在
<img>标签中使用上述 URL 会返回：“”。我用过realfavicongenerator.net几次；它非常彻底，生成/自定义您可能需要的每个可能的图标变体，以获得最大的兼容性。（但是，如果您正在寻找单个favicon 图像，这可能不适合您！）对于简单的文件转换（例如，
PNGtoICO等），我喜欢onlineconvertfree.com。
回答by Tanveer Shaikh
If the favicon is a png type image, it'll not work in older versions of Chrome. However it'll work just fine in FireFox. Also, don't forget to clear your browser cache while working on such things. Many a times, code is just fine, but cache is the real culprit.
如果收藏夹图标是 png 类型的图像，则在旧版本的 Chrome 中将无法使用。但是它在 FireFox 中可以正常工作。另外，在处理此类事情时不要忘记清除浏览器缓存。很多时候，代码很好，但缓存才是真正的罪魁祸首。
回答by Rahul Desai
As recommended by W3.org, you can use the relattribute to achieve this.
根据 W3.org 的建议，您可以使用该rel属性来实现此目的。
Example:
例子：
<head>
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
...
回答by shilovk
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
回答by Anand Dwivedi
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
This worked for me
这对我有用
