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

你可以花在这个任务上的时间.对很多人来说,这是"尽可能快".

你愿意做的努力.比如,手动绘制一个16x16图标以获得更好的效果.

特定约束,例如支持具有奇数规格的特定浏览器.

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

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

此解决方案的优点:它很快,所有兼容性考虑因素已经为您解决.

第二种方法:创建一个favicon.ico(仅限桌面浏览器)

如您所知,您可以创建favicon.ico包含16x16和32x32图片的文件(请注意,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, 往上看.

适用于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">

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