网站的 Favicon 在 Slack 中模糊不清，Slack 的目标图标大小是多少？

Question

问题在于下图中显示的网站图标。这是我的 Slack 频道的屏幕截图，您可以看到有两个网站（生产与 alpha）。

您可以看到 alpha 上的图标是模糊的。我不确定在哪里可以找到这两个站点之间的差异，因为两者的代码相同（对于网站图标）：

  <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

在 browsers/phone 中打开该图标时没有问题。正在为 Slack 提取哪个网站图标？

Answer 1

TL;博士

你还有问题吗？再次在 Slack 上共享您的页面可能会有用，以确保这不是由于缓存问题。
显然，RealFaviconGenerator 生成的 favicon 包按预期工作：Slack 使用 180x180 Apple Touch 图标。

注意：我是此服务的作者。

全文

您可以使用 realfavicongenerator compatibility test page 和 post 它到 Slack 以查看它使用的是哪个图标。

例如，当我在 Slack 本机 Windows 应用程序上 post 此页面时，我得到：

访问页面本身时，我可以看到它是哪个图标：

紫色和绿色？那是 180x180 的 Apple Touch 图标。

那么你的页面和这个测试页面有什么区别呢？也许是网站图标文件（你有很多，而测试页面少得多）。

另一个假设：Slack 可能会使用某种形式的缓存，以避免每次共享页面时都抓取页面。因此，如果 Slack 在您的网站图标升级之前访问了您的页面，也许它会在几天内使用以前的网站图标。

网站的 Favicon 在 Slack 中模糊不清，Slack 的目标图标大小是多少？

Favicon of website is blurred in Slack, what icon size does Slack target?

html

favicon

slack