setBubble sometimes not working in Chrome

[yesthatguy]

I've used a breakpoint in Chrome (v65) developer tools to verify that setBubble is being called when loading the following page: https://staging.my.siyli.org

But when the icon shows up it doesn't have the badge. (During the breakpoint Chrome shows its spinner instead of the icon so I can't tell for sure if the icon gets badged and then unbadged.)

I can then go in to the Console and run Tinycon.setBubble("S") and the badge shows up.

In Firefox the icon is getting badged correctly, and in Safari the title changes to include "(S)".

Confusingly, the badge works fine in Chrome when I am in local development (accessing my app on localhost:3000).

It feels like maybe something in Chrome is resetting the favicon after setBubble is called, but I can't figure out how to find where that would be. Can anyone take a look at the URL above and tell what's going on?

[adrianbj]

Seems like this project is abandoned, but I am having similar issues. For me it is related to:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

If I remove this, then it works fine.

[adrianbj]

Fix is to use this PR: https://github.com/tommoor/tinycon/pull/97 but fix the typo :)

[adrianbj]

Here's a fixed minified version: https://gist.github.com/adrianbj/9b6081e0d846ecb5e8ba4d6457d9b7ad

[rouilj]

@adrianbj thanks for the fix. This was driving me nuts as I could call setBubble in the console and have it work fine. But calling it in line would fail. I think what was happening was the:

was the first "icon" link found. However unlike a real icon link there is no type. In any case the library removes it once it finds it. So when I ran it in the console, it found the

icon and things worked. Also changing to match(/^icon$/) from /\bicon\b/ seemed to solve the issue as well.