Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options
Favicon background showing black
Stevie_c
New
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?
Tagged:
0
Comments
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?
make sure you use png, as R_j says make sure there is an alpha channel.
grep is your friend.
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?
Do you have a link for us?
Oops, you are totally right! If Vanilla resizes a PNG with a transparent background, it gets a black background!
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
You might also try to save your original favicon as
/uploads/favicon.pngand add that line to yourconf/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
Thanks R_J , I will give that a try
Yes it worked! Thank you very much for the help 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
Thanks @R_J, could you file an issue for it?
Yes, I'll do
Just use the Favicon plugin to add your tags for favicons and apple touch icons...
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌