“/favicon.ico”vs <link rel =“快捷图标”/>
题
- 在网站上创build一个favicon的最佳做法是什么？
- 并且是一个.ico文件，16×16和32×32的图像比只有16×16的.png文件更好？
- 如果今天select正确的方法，不能在合理的旧浏览器中工作吗？
方法1
将名为favicon.ico的文件放在主目录中是一种方法。 浏览器始终请求该文件。 你可以看到，在Apache日志文件。
方法2
<head>部分的HTML标签：
<link rel="shortcut icon" href="http://img.dovov.comfavicon.png (or ico?)" type="image/x-icon" />
有几种方法来创build一个favicon。 最好的办法取决于各种因素：
- 你可以在这个任务上花费的时间。 对于很多人来说，这是“尽可能快”。
- 你愿意做的努力。 就像，用手画一个16×16的图标以获得更好的结果。
- 具体限制，比如支持奇数规格的特定浏览器。
第一种方法：使用图标生成器
如果你想快速完成工作，你可以使用一个图标生成器 。 这为所有主要桌面和手机浏览器创build图片和HTML代码。 充分披露：我是这个网站的作者。
这种解决scheme的优点：速度快，所有的兼容性考虑已经为您解决。
第二种方法：创build一个favicon.ico（仅适用于桌面浏览器）
正如您所build议的，您可以创build一个包含16×16和32×32图片的favicon.ico文件（请注意， Microsoftbuild议使用16×16,32×32和48×48 ）。
然后，在您的HTML代码中声明：
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
这种方法适用于所有桌面浏览器，无论新旧。 但是大多数移动浏览器都会忽略该图标。
关于将favicon.ico文件放在根目录中的build议，不要声明：要小心，虽然这种技术在大多数浏览器上都可以使用，但它并不是100％可靠的。 例如Windows Safari无法find它（授予：这个浏览器不知何故在Windows上被弃用，但你明白了）。 与PNG图标（适用于现代浏览器）结合使用时，此技术很有用。
第三种方法：创build一个favicon.ico，一个PNG图标和一个Apple Touch图标（所有浏览器）
在你的问题中，你不提到移动浏览器。 他们大多会忽略favicon.ico文件。 尽pipe您的网站可能专门用于桌面浏览器，但您可能完全不希望忽略移动浏览器。
你可以达到很好的兼容性：
-
favicon.ico，见上面。 - 适用于Android Chrome的192×192 PNG图标
- 一个180×180 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">
这不是完整的故事，但在大多数情况下，这已经足够了。
- 你可以使用这个网站来生成favin.ico
- 我推荐使用.ico格式，因为png不能和方法1一起工作，ico可能有更多的细节！
- 这两种方法都适用于所有的浏览器，但是当它自动工作时，您想要为其键入一个代码？ 所以我觉得方法1更好。
