【问题标题】：What is the best practice for creating a favicon on a web site? [closed]在网站上创建网站图标的最佳做法是什么？ [关闭]
【发布时间】：2014-11-15 04:03:54
【问题描述】：

问题

在网站上创建网站图标的最佳做法是什么？
同时包含 16x16 和 32x32 图像的 .ico 文件是否优于仅包含 16x16 的 .png 文件？
今天首选的正确方法不能在相当旧的浏览器中工作吗？

方法一

在主目录中放置一个名为favicon.ico 的文件是一种方法。浏览器总是请求该文件。您可以在 apache 日志文件中看到这一点。

方法二

<head> 部分中的 HTML 标记：

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

【问题讨论】：

标签： html favicon

【解决方案1】：

创建网站图标的方法有多种。最适合您的方式取决于多种因素：

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

第一种方法：使用网站图标生成器

如果您想快速完成工作，可以使用favicon generator。这个为所有主要的桌面和移动浏览器创建图片和 HTML 代码。完全披露：我是这个网站的作者。

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

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

按照您的建议，您可以创建一个包含 16x16 和 32x32 图片的 favicon.ico 文件（注意 Microsoft recommends 16x16, 32x32 and 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">

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

【讨论】：

其实仍然经常使用的并不是一个有效的选项。它甚至不是标准的，只有 IE 支持它。从 IE 9 开始，IE 支持默认的“查看根目录”方法。所以它不是一种支持所有浏览器的方法，而只是一种支持 IE （尽管这也不是标准）
网站图标机制多年来一直在发展。我今天注意到 MDN 的规范现在说：快捷链接类型经常出现在图标之前，但这种链接类型不符合要求，被忽略，网络作者不得再使用它。 意思是使用 @987654330 @ 而不是 <link ref="shortcut icon" ...> developer.mozilla.org/en-US/docs/Web/HTML/Link_types
感谢@broc.seib 的反馈。在撰写此评论时，我不知道为什么它是“快捷方式图标”而不是“图标”。当然，Mozilla 在这个故事中有自己的声音。但是我们不能忘记为什么要首先声明这个声明：支持旧版浏览器，例如 IE 8。最近的浏览器使用 PNG 图标，它们比 ICO 更干净、更轻巧。我对 RealFavicon 的计划是完全删除此声明。在此之前，我需要在 IE 7、8 和 9 上运行测试。
更不用说，如果您在此页面上“查看源代码”，在 Stack Overflow 上，ref="shortcut icon" 正是他们使用的。
@laggingreflex /favicon.ico 是首选方法。这是您在访问www.google.com 时得到的。然而，您可能不想用图标污染您的根目录。在这种情况下，标记工作得很好。

【解决方案2】：

您可以使用此网站生成favin.ico
我建议使用 .ico 格式，因为 png 不适用于方法 1，而 ico 可以有更多细节！
这两种方法都适用于所有浏览器，但是当它自动运行时，您想要输入什么代码？所以我认为方法1更好。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

随着 SVG favicon 越来越受欢迎 support in major browsers，另一种选择是切换到 SVG：

<link rel="icon" sizes="any" type="image/svg+xml" href="favicon.svg">
<!-- Fallback favicon in case a browser does not support the SVG version -->
<link rel="alternate icon" type="image/x-icon" href="favicon.ico">

与其他格式一样，您也可以将 SVG 编码为 Base64（例如，使用 this online tool）。好处是，它可以看起来像原始 SVG，并且您可以避免一个 HTTP 请求：

<link rel="icon" sizes="any" type="image/svg+xml" href="data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f5e400' d='m6 21 2-7-6-5h7l3-7 3 7h7l-6 5 2 7-6-4z'/%3E%3C/svg%3E%0A">

This CSS-Tricks article 解释了切换到 SVG 的一些好处，最值得注意的是：

面向未来（保证我们的网站图标在未来的设备上看起来清晰）
更容易修改（例如，更改颜色）
暗模式支持
可以设置动画（使用SMIL）（AFAIK，只有 Firefox 支持）

This post 提供了一个很好的答案，是否/在哪里可以安全地将 SVG 图像用于网站图标。

以下是一些使用 SVG favicon 的著名网站（使用浏览器检查页面）：

【讨论】：