目前在所有支持它的浏览器中显示图标的最佳方法是什么？
请包括：
哪些浏览器支持哪些图像格式。
各种浏览器在哪些地方需要哪些行。
Fred
问问题
40331 次
9 回答
109
我在这里采用皮带和大括号的方法。
.ico我以和.png格式创建了一个 32x32 图标，称为favicon.icoand favicon.png。除非您使用的是较旧的浏览器，否则图标名称并不重要。
- 放置
favicon.ico在您的站点根目录以支持旧版浏览器（可选且仅与旧版浏览器相关。 - 将 favicon.png 放在我的图像子目录中（只是为了保持整洁）。
<head>在元素内添加以下 HTML 。
<link rel="icon" href="/images/favicon.png" type="image/png" /> <link rel="快捷图标" href="/favicon.ico" />
请注意：
- 文件的 MIME 类型
.ico已被IANA注册为 image/vnd.microsoft.icon 。 - Internet Explorer 将忽略
type快捷图标关系的属性，这是唯一支持这种关系的浏览器，不需要提供。
于 2008-09-01T00:55:43.010 回答
10
我使用 .ico 格式并将以下两行放入<head>元素中：
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
于 2008-08-31T20:46:21.237 回答
6
为了还支持平板电脑和智能手机的触摸图标，我更喜欢HTML5Boilerplate的方法
更多关于触摸图标的信息可以在这篇文章中找到。
在浏览器支持的当前状态下，您甚至不必在文档中为网站图标添加 HTML 标记。浏览器将自动搜索文件列表，请参见 iOS 示例：
如果 HTML 中没有指定图标，iOS Safari 将在网站的根目录中搜索带有 apple-touch-icon 或 apple-touch-icon-precomposed 前缀的图标。例如，如果设备的适当图标大小为 57 × 57 像素，iOS 会按以下顺序搜索文件名：
- 苹果触摸图标 57x57-precomposed.png
- 苹果触摸图标 57x57.png
- 苹果触摸图标precomposed.png
- 苹果触摸icon.png
我的建议是不要在文档中包含网站图标，而是在根网站中准备好文件列表：
- apple-touch-icon-114x114-precomposed.png
- apple-touch-icon-144x144-precomposed.png
- 苹果触摸图标 57x57-precomposed.png
- apple-touch-icon-72x72-precomposed.png
- 苹果触摸图标precomposed.png
- 苹果触摸icon.png
(57px*57px) - favicon.ico
HiDPI (32x32px)
当您从html5boilerplate.com下载模板时，这些都包含在内，您只需将它们替换为您自己的图标。
于 2013-03-21T09:28:59.800 回答
5
于 2008-08-31T20:26:55.637 回答
4
IE6 无法正确处理 PNG，请注意。
于 2008-08-31T23:05:54.227 回答
3
于 2008-08-31T21:15:54.520 回答
3
于 2009-01-30T15:45:39.953 回答
2
大多数浏览器会自动检测到根目录中有一个favicon.*。您可以使用以下方法确保检测到它：
<link rel="icon" type="image/png" href="/path/image.png" />
我个人使用 .png 图像，但大多数格式都可以使用。
于 2008-08-31T20:22:39.487 回答
1
这个问题的答案已经变得足够复杂，最好的方法就是使用像 RealFaviconGenerator 这样的工具，它可以让你上传 png/jpg，然后为你生成涵盖所有平台的网站图标和代码：https://realfavicongenerator。网/
于 2019-10-21T00:37:21.937 回答