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

Question

使用 WordPress 4.7 和网站图标功能来制作网站图标/网站图标，它似乎可以工作，但结果对我来说似乎很奇怪，尽管我承认我在这方面远非专家并且已经阅读了很多关于最佳实践的相互矛盾的信息。使用 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" />

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

如果只有 4 个链接，为什么会有这么多裁剪的图像？

此外，我按照建议提交了尺寸为 512x512 的图标图像，但 500x310 版本总是被裁剪，因此图标的顶部和底部被截断。有什么办法可以解决这个问题和/或有什么大不了的吗？这个大小的图标是做什么用的？

此 WP 站点图标涵盖哪些浏览器/设备支持？

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

谢谢！

Answer 1

我是RealFaviconGenerator 及其伙伴WordPress Favicon plugin 的作者，所以我有资格和有偏见地回答这个问题。

您提到的许多变体都是无用的。它们可能已被外部文件引用，例如 Web App Manifest（适用于 Android Chrome）或 browserconfig.xml（适用于 IE/Edge），但这些文件既没有生成也没有声明。所以你只会得到无用（和无害）的图像。

500x310 图像可能适用于 Windows“宽”磁贴。以下是 4 种不同瓷砖形状和尺寸的示例：

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

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

只有旧版浏览器才会真正怀念旧的favicon.ico。我不记得哪一代 IE 需要它，但它们一定很老了（想想：XP 上的 IE 或 Vista 上的 IE）。大多数时候这不应该是一个问题。最好不要用手动编辑的文件弄乱您的 WordPress 安装。

另一点要提到的是设计本身。 WordPress 为您呈现最终图标做出了非常不错的努力：

但是，对于我的特定图标，存在一个问题：我的图像的角不是这样设计的。这不是 WordPress 的错：iOS 无论如何都会舍弃它们。与透明图像相同：

iOS 用黑色填充透明度，因此 WordPress 是准确的。但它没有提供任何解决方法。这是“接受或离开”。

设计还有另一个问题：每个平台都有自己的风格。目前，站点图标有一种万能的方法。这没关系，但不是很好。再一次，它错过了 macOS 的图标。

有时，主题还带有自己的网站图标支持。据我所知，这种支持总是很轻，仅涵盖经典的桌面图标。 WordPress 站点图标肯定更好。

作为 WordPress 用户，您基本上有两种选择：

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

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