103

题

在网站上创建收藏夹图标的最佳做法是什么？
并且具有16x16和32x32图像的.ico文件是否比仅具有16x16 的.png文件更好？
当今首选的正确方法可能无法在相当老的浏览器中工作吗？

方法1

将命名文件放置favicon.ico在主目录中是一种方法。浏览器始终请求该文件。您可以在apache日志文件中看到它。

方法2

部分中的HTML标记<head>：

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />

html favicon

— 字节码77
source

153

有几种创建收藏夹图标的方法。最佳选择取决于多种因素：

您可以花在此任务上的时间。对于许多人来说，这是“尽快”。
您愿意付出的努力。例如，手动绘制一个16x16的图标可获得更好的效果。
特定的限制，例如支持具有特殊规格的特定浏览器。

第一种方法：使用收藏夹生成器

如果您想顺利完成工作，可以使用favicon生成器。这个程序为所有主要的台式机和手机浏览器创建图片和HTML代码。完全披露：我是该网站的作者。

这种解决方案的优点：快速，已经为您解决了所有兼容性问题。

第二种方法：创建一个favicon.ico（仅桌面浏览器）

如您所建议，您可以创建一个favicon.ico包含16x16和32x32图片的文件（请注意，Microsoft建议您使用16x16、32x32和48x48）。

然后，在您的HTML代码中声明它：

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">

此方法适用于所有新旧台式机浏览器。但是大多数移动浏览器将忽略该图标。

关于您建议将favicon.ico文件放置在根目录中而不声明它的建议：请注意，尽管此技术可在大多数浏览器上使用，但并非100％可靠。例如，Windows Safari无法找到它（被授予：此浏览器在Windows上已过时，但您已明白了这一点）。与PNG图标结合使用时（对于现代浏览器），此技术很有用。

第三种方法：创建一个favicon.ico，一个PNG图标和一个Apple Touch图标（所有浏览器）

在您的问题中，您没有提及移动浏览器。他们中的大多数将忽略该favicon.ico文件。尽管您的网站可能专用于台式机浏览器，但您可能不想完全忽略移动浏览器。

您可以通过以下方式实现良好的兼容性：

favicon.ico，往上看。
适用于Android Chrome的192x192 PNG图标
180x180的Apple Touch图标（适用于iPhone 6 Plus；其他设备会根据需要将其缩小）。

用它们声明

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

这不是完整的故事，但是在大多数情况下已经足够了。

— philippe_b
source

实际上，仍然经常使用的<link rel =“ shortcut icon” href =“ / path / to / icons / favicon.ico”>不是有效的选项。它甚至不是标准的，只有IE支持它。从IE 9开始，IE支持默认的“看根”方法。因此，这不是支持所有浏览器的一种方法，而是支持IE <9的一种方法。依靠（现在是标准的）“置于root位置”方法，或者，如果您坚持要添加：<link rel =“ icon” href =“ / favicon.ico”>（即使这也不是标准）

— HappyMe

多年来，图标图标机制已经得到了发展。我今天注意到，MDN的规范现在说：快捷方式链接类型通常在图标之前看到，但是此链接类型不合格，已被忽略，网络作者不再可以使用它。意思是使用<link ref="icon" ...>而不是<link ref="shortcut icon" ...> developer.mozilla.org/en-US/docs/Web/HTML/Link_types

— broc.seib

感谢@ broc.seib的反馈。在撰写此评论时，我不知道为什么它是“快捷方式图标”而不是“图标”。当然，Mozilla在这个故事中有发言权。但是我们决不能忘记为什么要首先声明以下内容：支持IE 8等旧版浏览器。最新的浏览器使用的PNG图标比ICO更干净，更轻。我对RealFavicon的计划是完全删除此声明。在此之前，我需要在IE 7，8和9运行测试

— philippe_b

更不用说，如果您在此页面上的Stack Overflow上“查看源代码”，ref="shortcut icon"正是他们所使用的。

— 史蒂文·文蒂米利亚

@laggingreflex /favicon.ico是首选方法。这是您访问时得到的www.google.com。但是，您可能不想用图标污染根目录。在这种情况下，标记就可以正常工作。

— philippe_b

您可以与此网站一起生成favin.ico
我建议使用.ico格式，因为png不能与方法1一起使用，而ico可以提供更多详细信息！
两种方法都适用于所有浏览器，但是当它自动运行时，您要为其输入代码吗？所以我认为方法1更好。

— a828h
source

我使用https://iconifier.net 上传了我的图像，下载了图像zip文件，将图像添加到了我的服务器，并按照站点上的说明进行操作，包括将链接添加到我的index.html，并且它可以正常工作。现在，当“添加到主屏幕”时，我的收藏夹图标在Safari中的iPhone上显示

— Hblegg
source

在网站上创建收藏夹图标的最佳做法是什么？

第一种方法：使用收藏夹生成器

第二种方法：创建一个favicon.ico（仅桌面浏览器）

第三种方法：创建一个favicon.ico，一个PNG图标和一个Apple Touch图标（所有浏览器）