Ugly icon rendering

[soullivaneuh]

On Chrome, the base favicon become uglier:

On the right, the icon after Tinycon integration.

[PranKe01]

Mine is looking even more worse. Using Chrome... My favicon has all three resolutions (16px 24px 48px) in one file. Maybe that's the problem?

Another problem I have is that the transparency of the favicon gets removed when using tinycon.

[tommoor]

It could be, try using a plain png version of the favicon and see if you
get the same artifacts?

On Thu, Sep 1, 2016 at 8:55 AM, PranKe01 notifications@github.com wrote:

Mine is looking even more worse. Using Chrome... My favicon has all three
resolutions (16px 24px 48px) in one file. Maybe that's the problem?

[image: image]
https://cloud.githubusercontent.com/assets/13560351/18174245/2b65c3c2-706d-11e6-9422-05d3775c08db.png

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#85 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAXP8vzYJq0uBzb4dKNgvzV_z0uLNaUOks5qlvV1gaJpZM4Iv90y
.

Tom Moor

http://tommoor.com
http://twitter.com/tommoor

[PranKe01]

Okay, I see the problem. I read that the favicon should not be set in the of a page. But I needed to use to make it work with iOS.
Tinycon tries to get the first favicon it can find in the :

  var getCurrentFavicon = function(){

    if (!originalFavicon || !currentFavicon) {
      var tag = getFaviconTag();
      currentFavicon = tag ? tag.getAttribute('href') : '/favicon.ico';
      if (!originalFavicon) {
        originalFavicon = currentFavicon;
      }
    }

    return currentFavicon;
  };

That way it took a different image as favicon.

I fixed it that way:

Tinycon.setImage('@Url.Content("~/favicon.ico")');
Tinycon.setBubble(0); // I need to set it to 0 first, because setBubble only redraws the favicon the second time it is called (at least in current Chrome)