关于 WordPress 站点图标功能和输出的问题

Questions Regarding WordPress' Site Icon Functionality and Output

使用 WordPress 4.7 和 favicon/site 图标的站点图标功能,它似乎工作正常,但结果对我来说似乎很奇怪,尽管我承认我远不是这方面的专家并且有阅读很多关于最佳实践的相互矛盾的信息。使用 WP 的站点图标设置设置图像会在该部分产生 4 个链接:

<link rel="icon" href="https://www.examle.com/wp-content/uploads/2016/12/cropped-test-favicon-32x32.png" sizes="32x32" />

<link rel="icon" href="https://www.examle.com/wp-content/uploads/2016/12/cropped-test-favicon-192x192.png" sizes="192x192" />

<link rel="apple-touch-icon-precomposed" href="https://www.examle.com/wp-content/uploads/2016/12/cropped-test-favicon-180x180.png" />

<meta name="msapplication-TileImage" content="https://www.examle.com/wp-content/uploads/2016/12/cropped-test-favicon-270x270.png" />

但是除了原始尺寸为 32x32、100x100、150x150、180x180、192x192、250x250、270x270、300x300、360x360、500x310 的尺寸外,它还创建了 10 个不同版本的站点图标图像。

为什么只有 4 张图片被裁剪了这么多?

此外,我按照建议提交了尺寸为 512x512 的图标图片,但 500x310 版本总是被裁剪,因此图标的顶部和底部被切掉了。有什么办法解决这个问题 and/or 这有什么大不了的吗?这个大小的图标有什么用?

这个 WP 站点图标涵盖了哪些 browser/device 支持?

这也不会在站点根目录中创建 favicon.ico 文件,我是否仍应包含该文件,还是不再需要该文件?

谢谢!

我是RealFaviconGenerator and its companion WordPress Favicon plugin的作者,所以我既有资格也有偏见地回答这个问题。

您提到的许多变体都没有用。它们 可能 已被外部文件引用,例如 Web 应用程序清单(对于 Android Chrome)或 browserconfig.xml(对于 IE/Edge ), 但这些文件既没有生成也没有声明。所以你只会得到无用(和无害)的图像。

500x310 图像可能用于 Windows "wide" 磁贴。以下是 4 种不同形状和尺寸的示例:

但是这 4 张图像应该在 via browserconfig.xml 的 HTML 中声明,但它们不是。所以,是的,您的图片被裁剪成非正方形图片这一事实是一个问题(您的网站徽标可能在此过程中被破坏),但没有人会注意到这个问题。

WordPress 站点图标涵盖几乎所有平台。所有主要平台都可以处理生成和声明的 Apple Touch 图标。您真正想念的唯一图标是 macOS 的遮罩图标(用于固定标签和新的 MacBook Touch Bar)。

只有旧版浏览器才会真正怀念旧版 favicon.ico。我不记得哪一代 IE 需要它,但它们一定很旧(想想:XP 或 Vista 上的 IE)。大多数时候这不应该成为问题。最好不要让您的 WordPress 安装与手动编辑的文件混淆。

另一点要提到的是设计本身。 WordPress 非常努力地向您展示了最终的图标:

但是,对于我的特定图标,存在一个问题:我的图像没有设计成那样圆角。这不是 WordPress 的错:iOS 无论如何都会将它们四舍五入。与透明图像相同:

iOS 用黑色填充透明度,因此 WordPress 是准确的。但它没有提供解决方法。这是"take it or leave it".

还有一个设计问题:每个平台都有自己的风格。目前,站点图标采用一种放之四海而皆准的方法。这没关系,但不是很好。再一次,它错过了 macOS 的图标。

有时,主题也有自己的图标支持。据我所知,这种支持总是很轻,只涵盖经典的桌面图标。 WordPress 站点图标绝对更好。

作为 WordPress 用户,您基本上有两个选择:

  • 使用内置的 WordPress 站点图标。如果您的图标不需要修改(例如,它有不透明的背景)并且您不需要 macOS 的图标,这是一个很好的解决方案。

  • 使用Favicon by RealFaviconGenerator。它涵盖了所有内容,让您可以针对每个平台制作图标平台。您确切地知道您的图标在访客设备上的外观。这是另一个要安装的插件,尽管它是轻量级的。再一次,我是这个插件的作者,所以除了评价我别无所求:)