在网站上创建图标的最佳实践是什么？

提问

  • 在网站上创建 图标的最佳实践是什么？
  • 一个同时具有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" />
184873 次浏览
小开
  1. 你可以使用这个网站来生成 Favinico
  2. 我推荐使用.ico 格式，因为 png 不能与方法1一起工作，ico 可以有更多的细节！
  3. 这两种方法都可以在所有浏览器中使用，但是当它自动工作时你想为它输入什么代码呢？所以我认为方法1更好。
小开
最佳答案

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

  • 你可以花在这个任务上的时间。对许多人来说，这是“尽可能快”。
  • 你愿意做的努力。比如，手工绘制一个16x16的图标，以获得更好的效果。
  • 特定的约束，比如支持带有奇怪规格的特定浏览器。

第一种方法: 使用图标生成器

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

这种解决方案的优点是: 它很快，并且已经为您解决了所有的兼容性问题。

第二种方法: 创建一个 Favicon.ico (仅适用于桌面浏览器)

正如您所建议的，您可以创建一个包含16x16和32x32图片的 favicon.ico文件(请注意 微软推荐16x16,32x32和48x48)。

然后，在 HTML 代码中声明它:

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

这种方法适用于所有的桌面浏览器，无论是新的还是旧的，但是大多数移动浏览器都会忽略这个图标。

关于将 favicon.ico文件放在根目录中而不声明它的建议: 请注意，虽然这种技术在大多数浏览器上都可以工作，但它不是100% 可靠的。例如，WindowsSafari 无法找到它(当然: 这个浏览器在 Windows 上是不推荐的，但是你明白了)。这种技术在与 PNG 图标(对于现代浏览器)结合使用时非常有用。

第三种方法: 创建一个 Favicon.ico、一个 PNG 图标和一个 Apple Touch 图标(所有浏览器)

在您的问题中，您没有提到移动浏览器。它们中的大多数将忽略 favicon.ico文件。尽管您的站点可能专用于桌面浏览器，但您可能不希望完全忽略移动浏览器。

你可以达到一个良好的兼容性:

  • favicon.ico，见上图。
  • Android Chrome 的192x192 PNG 图标
  • 一个180x180的 Apple Touch 图标(适用于 iPhone6 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">

这还不是全部，但在大多数情况下已经足够了。

小开

我使用了 < a href = “ https://iconifier.net”rel = “ nofollow norefrer”> https://iconifier.net 我上传我的图片，下载图片压缩文件，添加图片到我的服务器，按照网站上的说明，包括添加链接到我的 index.html 和它的工作。在 Safari 中，当“添加到主屏幕”时，我的收藏夹图标现在显示在我的 iPhone 上

小开

由于 SVG 的收藏夹正在获得 支持主流浏览器，另一个选择是切换到 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(例如，使用 这个在线工具)。好处是，它可以看起来像原来的 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">

这篇 CSS-Tricks 文章 解释了切换到 SVG 的一些好处，最明显的是:

  • 未来防护(保证我们的图标在未来的设备上看起来很清晰)
  • 更容易修改(例如，更改颜色)
  • 黑暗模式支持
  • 可以是动画的(使用 微笑)(AFAIK，只有 Firefox 支持)

这篇文章 提供了一个很好的答案，是否/在哪里使用 SVG 图像作为图标是安全的。

下面是一些使用 SVG 图标的著名网站(用浏览器查看页面) :


提交答案