Search code examples
htmlfaviconslack

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

Issue is with the favicon icon being shown in the image below. It's a screen capture of my Slack channel, and you can see there are two websites (production vs alpha).

Slack Channel Message

You can see the favicon on alpha is blurred. I'm not sure where to look to find this discrepancy between the two sites because the code for both is the same (for the favicons):

  <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">

The favicon is fine when opened in browsers/phone. Which favicon icon is being pulled for Slack?

Solution

  • TL; DR

    • Do you still have the problem? It might be useful to share your page on Slack again, to make sure that that was not due to a caching issue.
    • Apparently, the favicon package produced by RealFaviconGenerator works as expected: Slack is using the 180x180 Apple Touch icon.

    Note: I'm the author of this service.

    Full story

    You can use a realfavicongenerator compatibility test page and post it to Slack to see which icon it is using.

    For example, when I post this page on the Slack native Windows application, I get this:

    Slack screenshot

    When visiting the page itself, I can see which icon it is:

    enter image description here

    Violet-and-green ? That's the 180x180 Apple Touch icon.

    So what is the difference between your page and this test page? Maybe it is the favicon files (you have a lot of them, while the test page has much less).

    Another hypothesis: Slack may well use some form of caching, in order to not crawl pages each time they are shared. So if Slack visited your page before your favicon upgrade, maybe it will use the previous favicon for a few days.