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

EN

有几种方法可以创建收藏夹图标。对你来说最好的方式取决于各种因素：

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

第一种方法:使用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文件。尽管您的站点可能专用于桌面浏览器，但您可能不想完全忽略移动浏览器。

您可以与以下各项实现良好的兼容性：

• A 192x192 PNG图标适用于安卓Chrome

• A 180x180苹果触控图标(适用于iPhone 6Plus；其他设备将根据需要缩小)。

用来声明它们

<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. 你可以使用这个网站生成favin.ico
2. I，建议使用.ico格式，因为png不能使用方法1，可以有更多细节！
   2. 这两种方法都适用于所有浏览器，但是当它自动工作时，你想为它键入代码吗？所以我认为方法1更好。

我使用https://iconifier.net上传我的图片，下载图片压缩文件，添加图片到我的服务器，按照网站上的指示操作，包括添加链接到我的index.html，它工作了。我的收藏图标现在显示在我的iPhone在Safari当‘添加到主屏幕’