Html 目前在所有支持 Favicon 的浏览器中显示 Favicon 的最佳方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37073/
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
What is currently the best way to get a favicon to display in all browsers that support Favicons?
提问by Fred
What is currently the best way to get a favicon to display in all browsers that currently support it?
目前让网站图标在当前支持的所有浏览器中显示的最佳方式是什么？
Please include:
请包括：
Which image formats are supported by which browsers.
Which lines are needed in what places for the various browsers.
哪些浏览器支持哪些图像格式。
各种浏览器在哪些地方需要哪些行。
回答by Brian Matthews
I go for a belt and braces approach here.
我在这里采用腰带和牙套方法。
I create a 32x32 icon in both the .icoand .pngformats called favicon.icoand favicon.png. The icon name doesn't really matter unless you are dealing with older browsers.
我以.ico和.png格式创建了一个 32x32 图标，称为favicon.ico和favicon.png。除非您使用的是较旧的浏览器，否则图标名称并不重要。
- Place
favicon.icoat your site root to support the older browsers (optional and only relevant for older browsers. - Place favicon.png in my images sub-directory (just to keep things tidy).
- Add the following HTML inside the
<head>element.
- 放置
favicon.ico在您的站点根目录以支持旧浏览器（可选且仅与旧浏览器相关。 - 将 favicon.png 放在我的图像子目录中（只是为了保持整洁）。
- 在
<head>元素内添加以下 HTML 。
<link rel="icon" href="/images/favicon.png" type="image/png" /> <link rel="shortcut icon" href="/favicon.ico" />
Please note that:
请注意：
- The MIME type for
.icofiles was registered as image/vnd.microsoft.icon by the IANA. - Internet Explorer will ignore the
typeattribute for the shortcut icon relationship and this is the only browser to support this relationship, it doesn't need to be supplied.
.ico文件的 MIME 类型已被IANA注册为 image/vnd.microsoft.icon 。- Internet Explorer 将忽略
type快捷图标关系的属性，这是唯一支持此关系的浏览器，不需要提供。
回答by John Topley
I use .ico format and put the following two lines within the <head>element:
我使用 .ico 格式并将以下两行放在<head>元素中：
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
回答by Willem de Wit
To also support touch icons for tablets and smartphones I prefer the approach of HTML5Boilerplate
为了还支持平板电脑和智能手机的触摸图标，我更喜欢HTML5Boilerplate的方法
More information on touch icons can be found in this article.
可以在本文中找到有关触摸图标的更多信息。
With the current status of browser-support you don't even have to add the HTML tag for the favicon in your document. The browsers will search automaticly a list of files, see this example for iOS:
使用浏览器支持的当前状态，您甚至不必为文档中的网站图标添加 HTML 标记。浏览器将自动搜索文件列表，请参阅此 iOS 示例：
If no icons are specified in the HTML, iOS Safari will search the website's root directory for icons with the apple-touch-icon or apple-touch-icon-precomposed prefix. For example, if the appropriate icon size for the device is 57 × 57 pixels, iOS searches for filenames in the following order:
- apple-touch-icon-57x57-precomposed.png
- apple-touch-icon-57x57.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
如果 HTML 中没有指定图标，iOS Safari 将在网站的根目录中搜索带有 apple-touch-icon 或 apple-touch-icon-precomposed 前缀的图标。例如，如果设备的适当图标大小为 57 × 57 像素，iOS 将按以下顺序搜索文件名：
- apple-touch-icon-57x57-precomposed.png
- apple-touch-icon-57x57.png
- apple-touch-icon-precomposed.png
- 苹果触摸图标.png
My advise is to not include a favicon in your document, but have a list of files ready in the root website:
我的建议是不要在您的文档中包含网站图标，而是在根网站中准备好文件列表：
- apple-touch-icon-114x114-precomposed.png
- apple-touch-icon-144x144-precomposed.png
- apple-touch-icon-57x57-precomposed.png
- apple-touch-icon-72x72-precomposed.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
(57px*57px) - favicon.ico
HiDPI (32x32px)
- apple-touch-icon-114x114-precomposed.png
- apple-touch-icon-144x144-precomposed.png
- apple-touch-icon-57x57-precomposed.png
- apple-touch-icon-72x72-precomposed.png
- apple-touch-icon-precomposed.png
- 苹果触摸图标.png
(57px*57px) - 图标
HiDPI (32x32px)
When you download a template from html5boilerplate.comthese are all included, you just have to replace them with your own icons.
当您从html5boilerplate.com下载模板时，这些都包含在内，您只需将它们替换为您自己的图标即可。
回答by Paul Tomblin
回答by nimish
IE6 cannot handle PNGs correctly, be warned.
IE6 无法正确处理 PNG，请注意。
回答by nimish
There is also a site where you can check how the favicon of any page is made
还有一个站点，您可以在其中检查任何页面的图标是如何制作的
There you can see a tutorial about making favicons, image types and resolutions, it's nice!
在那里你可以看到一个关于制作图标、图像类型和分辨率的教程，很好！
回答by Antti Kissaniemi
Favicon must be an .ico fileto work properly on all browsers.
Favicon 必须是.ico 文件才能在所有浏览器上正常工作。
Modern browsers also support PNG and GIF images.
现代浏览器还支持 PNG 和 GIF 图像。
I've found that in general the easiest way to create one is to use a freely available web service such as favicon.cc.
我发现一般来说，创建一个最简单的方法是使用免费提供的网络服务，例如favicon.cc。
回答by Ross
Having a favicon.*in your root directory is automatically detected by most browsers. You can ensure it's detected by using:
favicon.*大多数浏览器会自动检测到根目录中有 a 。您可以使用以下方法确保检测到它：
<link rel="icon" type="image/png" href="/path/image.png" />
Personally I use .png images but most formats should work.
我个人使用 .png 图像，但大多数格式都可以使用。
回答by npfoss
The answer to this question has become complicated enoughthat the best way is to just use a tool like RealFaviconGenerator, which lets you upload a png/jpg and then generates favicons and code to cover all the platforms for you: https://realfavicongenerator.net/
这个问题的答案已经变得足够复杂，最好的方法是使用 RealFaviconGenerator 之类的工具，它可以让您上传 png/jpg，然后生成网站图标和代码以覆盖所有平台：https://realfavicongenerator。网/
