SABnzbd Forums

The favicon is looking pretty messed up starting with Alpha3.



Something to look at for the next release.

Hmmm, that is weird. It seems the images given as:
<link rel="icon" type="image/png" href="x" sizes="xx" />
All cause Internet Explorer to try and rescale those, causing blurriness.
Maybe we should just get rid of those, since mobile devices will use the "apple-touch-icon" link's anyway.

safihre wrote:Hmmm, that is weird. It seems the images given as:
<link rel="icon" type="image/png" href="x" sizes="xx" />
All cause Internet Explorer to try and rescale those, causing blurriness.
Maybe we should just get rid of those, since mobile devices will use the "apple-touch-icon" link's anyway.

The favicon is blurry in Chrome and Firefox, so it's not just IE and only since Alpha 3.

Oke, those new icons need to be removed then indeed..
I did not see the blurriness on Chrome/Firefox on my Windows.

Could you possibly check what happens if you remove the lines:
<link rel="icon" type="image/png" href="./staticcfg/ico/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="./staticcfg/ico/favicon-160x160.png" sizes="160x160" />
<link rel="icon" type="image/png" href="./staticcfg/ico/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="./staticcfg/ico/favicon-32x32.png" sizes="32x32" />

In interfaces/Plush/templates/_inc_header.tmpl?

safihre wrote:Could you possibly check what happens if you remove the lines:
<link rel="icon" type="image/png" href="./staticcfg/ico/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="./staticcfg/ico/favicon-160x160.png" sizes="160x160" />
<link rel="icon" type="image/png" href="./staticcfg/ico/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="./staticcfg/ico/favicon-32x32.png" sizes="32x32" />

In interfaces/Plush/templates/_inc_header.tmpl?

That fixed it, the icon is nice and sharp again in Chrome and Firefox.

For my site, I just use:

<link rel="icon" type="image/x-icon" href="wp-includes/images/other/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="wp-includes/images/other/favicon.ico" />

Actually narrowed it down to:

<link rel="icon" type="image/png" href="./staticcfg/ico/favicon-32x32.png" sizes="32x32" />

If I remove that single line, it's back to normal.

By the way, this is Chrome and Firefox on OSX.

I'll have to deal with the blurry icon until the next alpha, as any modifications to the .app package breaks the code signing, which means I get a firewall prompt whenever sab starts.

Anyways, easiest fix is to simply pull the 4 <link rel="icon" type="image/png" href="x" sizes="xx" /> lines.

That was quick detective work. Fix works perfect. I also noticed that you need to remove those lines from /interfaces/Config/templates/_inc_header_uc.tmpl as well or you still get the messed up icon on the Config menu. Thanks for the tip.

I ended up reverting to 0.8a2, I couldn't deal with the blurry icon on my bookmarks bar any longer
Hopefully it's fixed in 0.8a4.

It's worked on. Hopefully Alpha4.

Seems like this problem is back in Beta4. Blurry icon is the same in IE, Firefox and Chrome. The offending code this time is the following...
If you remove this from interfaces/Plush/templates/_inc_header.tmpl then the favicon returns to normal.

I can only reproduce it on IE.. For me FF and Chrome show the correct one.

The line that causes it, is:
<link rel="icon" sizes="192x192" href="./staticcfg/ico/touch-icon-192x192.png" />
For some reason IE ignores the favicon and takes that one..

I'm going to look into it!
I added this for Android devices, but they will also work fine without it since there's also a 180x180 version available.
This whole mobile-icons and favicons is causing more problems than they should!

I have a virtual machine with Ubuntu for FF and one with Win7 and old FF/IE/Chrome but only on IE the icon is blurry.
Are you sure it's on all your browsers?
Can you confirm if just deleting the 192x192 one fixes it? For me it does.

You're correct, Chrome doesn't seem to have the favicon issue. I checked Chrome 47.0.2526.106, Firefox 43.0.4, Pale Moon 28.5.1 and Internet Explorer 11 on Windows 10 and all of them except Chrome have the blurry icon. And yes, removing the line '<link rel="icon" sizes="192x192" href="./staticcfg/ico/touch-icon-192x192.png" />' solves the issue on all the browsers I checked.

Oké great, I also verified that the 180x180 icon still works fine for IOS and Android so will push the change to just remove the 192x192 version!