【问题标题】:How does an OS pick up the correct ico/favicon size?操作系统如何选择正确的 ico/favicon 大小?
【发布时间】:2014-09-17 19:23:12
【问题描述】:

Based on this stackoverflow discussion,可以在一个文件中提供各种大小,“操作系统会选择最好的一个来显示。”

这是如何工作的?我们是否将其中的几个分配给一个声明回退到另一个声明?

【问题讨论】:

    标签: html favicon head ico


    【解决方案1】:

    对于桌面浏览器,您应该有一个 favicon.ico 文件和几个 PNG 图标。

    favicon.ico should contain three pictures: 16x16, 32x32 and 48x48. 可以有多个 PNG 图标,具体取决于要支持的平台:桌面浏览器为 16x16 和 32x32,Android Chrome 为 196x196,等等。每张图片都用<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> 之类的东西声明。

    浏览器对选择正确的图标有不同的态度:

    • 在 Windows 7 之前,Internet Explorer 使用 favicon.icoas described by Microsoft
    • Windows 8 上的 Internet Explorer 11 选择它可以找到的最大的 PNG 图标。
    • Chrome 使用 16x16 (Windows) 或 32x32 (Mac) PNG 图标。
    • Firefox 使用最新声明的 PNG 图标(请参阅 bug 751712),尽管 it apparently doesn't always behave that way
    • Safari 使用它可以找到的最大的 PNG 图标。

    这些结果来自compatibility page of RealFaviconGenerator。完全披露:我是这个网站的作者。

    【讨论】:

    • @ayjay 是的!如果您正在寻找一些即用型材料,请查看realfavicongenerator.net,它会为您生成一切。
    • @philippe_b 无论如何,我们可以诱导一个特定的行为?比如,我们能否以某种方式指定浏览器使用 48*48 图像?
    • 另外,Edge 浏览器如何工作?我有一组网站图标,但它们都不能与 Edge 一起使用
    • @MV23 Edge 通常选择 32x32 PNG 图标。但是,众所周知,Edge 在本地站点(通常是您正在开发的站点)方面很麻烦。因此,如果您的网站图标适用于除 Edge 之外的所有浏览器,我建议您暂时忽略该问题,并在您的网站部署后再次检查。
    【解决方案2】:

    根据http://www.jonathantneal.com/blog/understand-the-favicon/ Jonathan T. Neal 的精彩文章,这取决于您使用的浏览器:

    Firefox 和 Safari 将使用最后出现的图标。镀铬 Mac 将使用任何 ICO 格式的图标,否则 32×32 图标。 Windows 版 Chrome 将使用首先出现的网站图标,如果 它是 16×16,否则是 ICO。如果没有上述选项 可用,两种 Chrome 都将使用先出现的图标, 与 Firefox 和 Safari 完全相反。确实,Mac 版 Chrome 将忽略 16×16 图标并使用 32×32 版本 在非视网膜设备上将其缩小到 16×16。歌剧,不想 采取立场,将在完成时从任何可用图标中进行选择 随机的。我喜欢 Opera 这样做。

    【讨论】:

      猜你喜欢
      • 2015-07-17
      • 2012-06-08
      • 2013-12-05
      • 2013-07-29
      • 1970-01-01
      • 1970-01-01
      • 2017-03-21
      相关资源
      最近更新 更多