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.

Favicon background showing black

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_JR_J Ex-Fanboy Munich Admin

    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?

  • R_JR_J Ex-Fanboy Munich Admin

    Do you have a link for us?

  • R_JR_J Ex-Fanboy Munich Admin

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

  • R_JR_J Ex-Fanboy Munich Admin

    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_JR_J Ex-Fanboy Munich Admin
    edited May 2014

    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 (
    So it would really be safe to use an ICO file

  • Thanks R_J , I will give that a try :)

  • Stevie_cStevie_c New
    edited May 2014

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

  • R_JR_J Ex-Fanboy Munich Admin

    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 ;)

  • LincLinc Detroit Admin

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

  • R_JR_J Ex-Fanboy Munich Admin

    Yes, I'll do

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

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

Sign In or Register to comment.