Favicon background showing black

Stevie_c

Not sure if anyone else has this problem or asked about it, but the transparent part of my favicon shows up black instead of transparent. Any ideas on why this is happening? and how to fix?

R_J

Vanilla wouldn't be able to change that. Does this happen with different browsers and to other users as well? Have you double checked, that a) your favicon has a transparent background and b) there is no other graphic in your root folder that is displayed instead?

x00

make sure you use png, as R_j says make sure there is an alpha channel.

Stevie_c

It happens in both firefox and google chrome. It does have a transparent background as i have used it on a different site before and it worked fine. It is a .png, I uploaded it via the dashboard upload favicon and it is in the upload folder. It is 16x16 and 554 bytes. Not sure what you mean by an alpha channel?

R_J

Do you have a link for us?

R_J

Oops, you are totally right! If Vanilla resizes a PNG with a transparent background, it gets a black background!

R_J

And even more: it converts transparent PNGs to intransparent ICOs! Congratulations - I wouldn't say that this is an error but it is an inconvenience that you've found.

A workaround is to convert your PNG manually (I'd suggest IrfanView) to a 16x16 ICO file. That way you can keep it from being converted

R_J

You might also try to save your original favicon as /uploads/favicon.png and add that line to your conf/config.php
$Configuration['Garden']['FavIcon'] = 'favicon.png';

But that does not work for all browsers...
[edit] using PNG as your favicon seems to work only from >IE11 (http://en.wikipedia.org/wiki/Favicon)
So it would really be safe to use an ICO file

Stevie_c

Thanks R_J , I will give that a try

Stevie_c

Yes it worked! Thank you very much for the help R_J

R_J

@Linc:
I don't think this should be changed in the core because saving transparent ICO files seems to be super complicated so that using an external library like that would make sense. But in order to avoid annoyed admins, I'd suggest changing the FaviconDescription to be more precise. Something like that: "Your site's favicon appears in your browser's title bar. It will be scaled to a 16x16 pixels ICO file. Note that transparentcy information is lost when file is converted."

But I found that misconception:
1. T('FaviconDescription', "Your site's favicon appears in your browser's title bar. It will be scaled to 16x16 pixels."),,")
2. T('FaviconDescription', "The shortcut icon that shows up in your browser's bookmark menu (16x16 px)."),,")

They use the same translation shortcut and thus one of them is not translatable

Linc

Thanks @R_J, could you file an issue for it?

R_J

Yes, I'll do

vrijvlinder

Just use the Favicon plugin to add your tags for favicons and apple touch icons...