Question

目前在所有目前支持它的浏览器中显示图标的最佳方式是什么？

请包括：

哪些浏览器支持哪些图片格式。
各种浏览器的位置需要哪些行。

Answer 1

我在这里寻找腰带和牙套。

我创建了一个名为.ico和.png的{{1}}和favicon.ico格式的32x32图标。除非您正在处理旧浏览器，否则图标名称并不重要。

将favicon.png放置在您的网站根目录以支持旧版浏览器（可选，仅与旧浏览器相关。
将favicon.png放在我的图片子目录中（只是为了保持整洁）。
在favicon.ico元素中添加以下HTML。

<link rel="icon" href="/images/favicon.png" type="image/png" />
<link rel="shortcut icon" href="/favicon.ico" />

请注意：

<head>文件的MIME类型由IANA注册为image / vnd.microsoft.icon。
Internet Explorer将忽略快捷图标关系的.ico属性，这是唯一支持此关系的浏览器，不需要提供。

Reference

Answer 2

我使用.ico格式并将以下两行放在<head>元素中：

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Answer 3

为了支持平板电脑和智能手机的触控图标，我更喜欢HTML5Boilerplate

的方法

有关触控图标的更多信息，请参阅this article。

使用浏览器支持的当前状态，您甚至不必在文档中添加favicon的HTML标记。浏览器将自动搜索文件列表，请参阅iOS的此示例：

如果HTML中未指定图标，iOS Safari将搜索   带有apple-touch-icon或图标的图标的网站根目录   apple-touch-icon-precomposed前缀。例如，如果合适的话   设备的图标大小为57×57像素，iOS搜索文件名   按以下顺序：


苹果触摸图标-57x57-precomposed.png

苹果触摸图标-57x57.png

苹果触摸图标-precomposed.png

苹果触摸的icon.png

我的建议是不要在您的文档中包含图标，但在根网站上准备好文件列表：

苹果触摸图标-114x114-precomposed.png
苹果触摸图标-144x144-precomposed.png
苹果触摸图标-57x57-precomposed.png
苹果触摸图标-最高72x72-precomposed.png
苹果触摸图标-precomposed.png
apple-touch-icon.png (57px*57px)
favicon.ico HiDPI (32x32px)

当您从html5boilerplate.com下载模板时，这些都包含在内，您只需将它们替换为您自己的图标。

Answer 4

Wikipedia to the rescue

Answer 5

IE6无法正确处理PNG，请注意。

Answer 6

Favicon必须是.ico file才能在所有浏览器上正常使用。

现代浏览器也支持PNG和GIF图像。

我发现通常最简单的方法是使用免费的网络服务，例如favicon.cc。

Answer 7

还有一个网站，您可以在其中查看任何网页的favicon是如何制作的

getfavicon.org

在那里你可以看到关于制作图片，图像类型和分辨率的教程，这很好！

Answer 8

大多数浏览器会自动检测到根目录中有favicon.*。您可以使用以下方法确保检测到它：

 <link rel="icon" type="image/png" href="/path/image.png" />

我个人使用.png图像，但大多数格式都可以使用。

Answer 9

这个问题的答案已经变成complicated enough，最好的方法是只使用RealFaviconGenerator之类的工具，该工具可让您上载png / jpg，然后生成网站图标和代码以覆盖所有平台： https://realfavicongenerator.net/

目前在所有支持Favicons的浏览器中显示favicon的最佳方法是什么？

9 个答案: