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

时间：2014-09-20 20:15:19

标签： html html5 favicon

问题

  • 在网站上创建 favicon 的最佳做法是什么？
  • 并且是一个 .ico 文件，其16x16和32x32图片都比只有16x16的 .png 文件更好？
  • 今天首选的正确方法是不是可以在合理的旧浏览器中使用？

方法1

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

方法2

<head>部分中的HTML标记：

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

5 个答案:

答案 0 :(得分：129)

有几种方法可以创建图标。最好的方法取决于各种因素：

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

第一种方法：使用favicon生成器

如果您希望快速完成工作，可以使用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">

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

答案 1 :(得分：4)

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

答案 2 :(得分：3)

我使用了https://iconifier.net 我上传了我的图片，下载了图片zip文件，添加了图片到我的服务器，按照网站上的说明，包括添加到我的index.html的链接，它工作。现在，当“添加到主屏幕”

时，我的图标显示在我的iPhone上

答案 3 :(得分：0)

我想所有最重要的事情都已经讲完了。 我只补充一点，该声明允许您将可移动的 GIF 放置在favicon处：

<link rel="shortcut icon" href="img/icon.gif" />

这是在some pages上发生的。 移动收藏夹图标的效果使该网站的卡与其他卡脱颖而出。 不幸的是，任何浏览器均不能保证此行为和此属性。甚至我一天都观察到的 Firefox 在第二天也显示了同一页面的标准空图标代替GIF 。

答案 4 :(得分：0)

随着 SVG favicon 获得 support in major browsers，另一种选择是切换到 SVG：

<link rel="icon" sizes="any" type="image/svg+xml" href="favicon.svg">

使用 this online tool 编码的 Base64 SVG 图标：

<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 article 解释了切换到 SVG 的一些好处；最值得注意的是：

  • 面向未来（确保我们的网站图标在未来的设备上看起来清晰）
  • 深色模式支持

This post 提供了一个很好的答案，是否/在何处使用 SVG 图像作为网站图标是安全的。

GitHub 等网站正在使用 SVG 图标。

相关问题
最新问题