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

使用WordPress的4.7和站点图标功能来图标/网站图标，它似乎工作，但结果似乎很奇怪，虽然我承认我远离这方面的专家，并阅读了大量有关最佳实践的信息。设置在4个链接的部分使用WP的网站图标设置结果中的图片：有关WordPress的网站图标功能和输出的问题

<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文件，是否仍应包含该文件或不再需要它？

谢谢！

来源

2016-12-10 Joe

我是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或者Vista上的IE）。大多数情况下，这不应该是一个问题。最好不要让你的WordPress安装与手动编辑的文件混乱。

另一点是设计本身。WordPress的确实一个非常体面的努力为您呈现最终的图标：

然而，我特别的图标，还有一个问题：我的形象是不是设计有其边角圆润的方式。这不是WordPress的错：iOS无论如何都会围绕它们。同样的，透明的图像：

的iOS填满了黑色的透明度，使WordPress是准确的。但它没有提供解决方法。这是“接受还是离开”。

设计还有另一个问题：每个平台都有自己的风格。目前，“网站图标”采用了一种万能的方法。这很好，但不是很好。再次，它忽略了macOS的图标。

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

作为一个WordPress用户，你有两种基本的选择：

使用内置的WordPress站点图标。如果您的图标不需要修改（例如它具有不透明的背景），并且您不需要macOS的图标，这是一个很好的解决方案。
使用Favicon by RealFaviconGenerator。它涵盖了一切，让你制作平台每平台的图标。您确切知道您的图标在您的访问者设备上的样子。这是另一个可以安装的插件，虽然它很轻巧。再次，我是这个插件的作者，所以除了评价我之外别无所求:)

来源

2016-12-13 13:33:41

嗨菲利普。我在原始文章中没有提到它，但我决定在WP的Site Icon设置和您的插件之间。我结束了与您的插件，因为你上面列出的许多原因。感谢它，这真的很棒。如果你正在使用.htaccess规则，可能会有一些建议。不知道什么是最佳做法，但我更喜欢使用'＃BEGIN All In One WP Security'来插入文件中的空间。似乎它会防止可能的冲突或重写代码，如果其他插件编辑WP的默认永久链接规则的相同部分。 – Joe

如果你做了类似的事情，你也可以省去几条线： 'RewriteRule^android-chrome - （[x0-9 - ] +）\。png $/wp-content/uploads/fbrfg/android-chrome- $ 1 .png [QSA，L]' 和favicon16/32文件相同。只是一些想法。再次感谢信息和插件！ – Joe

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

回答

相关问题