Question
- 创建一个的最佳实践是什么favicon在网站上？
- 并且是一个.ico同时包含 16x16 和 32x32 图像的文件比.png文件只有 16x16？
- 今天首选的正确方法是否无法在相当旧的浏览器中工作？
Method 1
放置一个名为favicon.ico在主目录中是一种方法。浏览器总是请求该文件。您可以在 apache 日志文件中看到这一点。
Method 2
HTML 标签中<head>部分：
<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
创建网站图标的方法有多种。最适合您的方法取决于多种因素：
- 您可以花在该任务上的时间。对于许多人来说，这就是“尽可能快”。
- 你愿意付出的努力。例如，手动绘制 16x16 图标以获得更好的效果。
- 特定的限制，例如支持具有奇怪规格的特定浏览器。
第一种方法：使用图标生成器
如果您想又好又快地完成工作，您可以使用网站图标生成器。它为所有主要的桌面和移动浏览器创建图片和 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">
这不是完整的故事，但在大多数情况下已经足够了。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
