如何在网站上创建最佳的favicon？

Question

如何在网站上创建最佳的favicon？

htmlfavicon

136

问题

在网站上创建 favicon 的最佳实践是什么？
一个同时包含 16x16 和 32x32 图像的.ico文件是否比只有 16x16 的.png文件更好？
今天首选的正确方法是否在相当旧的浏览器中不适用？

方法1

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

方法2

在 <head> 部分使用 HTML 标签：

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

- bytecode77

4个回答

8

随着SVG图标在主要浏览器中获得{{link1:支持}+}，另一个选择是切换到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也可以进行URL编码（如下所示）或者像其他格式一样被编码为Base64（例如，使用此在线工具）。好处是，您可以避免一个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">

这篇CSS-Tricks文章解释了切换到SVG的一些好处，尤其是：

未来兼容性（确保我们的favicon在未来设备上显示清晰）
更容易修改（例如改变颜色）
支持暗模式
可以进行动画效果（使用SMIL）（据我所知，只有Firefox支持动画favicon）

这篇帖子提供了一个很好的答案，关于是否/在哪里可以安全地使用SVG图像作为favicon。

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

- Mahozad

3

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

- a828h

1

我使用了https://iconifier.net。我上传了我的图片，下载了图片压缩文件，将图片添加到我的服务器上，并按照该网站的说明进行操作，包括将链接添加到我的index.html文件中，这样就成功了。现在我的iPhone在Safari浏览器中“添加到主屏幕”后可以显示我的网站图标了。

- Hblegg

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- philippe_b · Accepted Answer

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

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

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

如果您想快速而完美地完成任务，可以使用网站图标生成器。该生成器为所有主要的桌面和移动浏览器创建图片和HTML代码。充分披露：我是该站点的作者。

这种解决方案的优点是：快速且已经考虑了所有兼容性问题。

第二种方法：创建favicon.ico文件（仅适用于桌面浏览器）

如您所建议，您可以创建一个包含16x16和32x32图片的favicon.ico文件（请注意，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，参见上文。
192x192 的 PNG 图标适用于 Android Chrome
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">

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