How to set icon size displayed at the orange Firefox button?

Question

  #main-window #appmenu-button{
    background:transparent !important;  
    background-color:transparent !important;
    box-shadow: rgb(252,252,252) -0.5px -0.5px 0.5px !important;
            border: 1px solid rgba(245,245,245,0.899) !important;
            border-radius: 0.25em !important;
    outline: 1px solid rgba(222,225,225,0.799) !important;
            -moz-outline-radius: 0.3em !important;
            outline-offset: -1px !important;
    list-style-image:url("chrome://branding/content/icon16.png") !important;
    min-width:78px !important;
    padding-right:56px !important;
    margin-right:-56px !important;
    padding-left:0px !important;
    margin-left:0px !important;
 }

This is a part of a userstyle's code which use to display an icon(a little Firefox) and an add-on called FlipClock at the orange Firefox button.

I want to replace the chrome://branding/content/icon16.png (the little Firefox) with another image. But, the image I applied to is too large.

• The full stylish code: tny.cz/44499fac

• The original orange Firefox button:
  

• After the userstyle is applied:
  

• The image I want to use (Click for proper image):
  

• This is what my attempts look like:
  

How do I set the size of it?
Thanks!

Answer 1

There doesn't seem to be a way to scale a list-style-image with CSS.
Reference:

• CSS spec for list-style-image
• "CSS list-style-image size"

So, your only recourse is to resize the image -- which you can do with one of many image editors. For information on how to do that and retain the transparency, search and/or ask on superuser.com and/or webapps.

However, I took the liberty of shrinking that image for you. Here it is, sized 32x32 and 16x16, with the transparency preserved.
Note that reducing large images down, does not always make a good icon. ;)

16x16:

32x32:

(Shown with gray background to demonstrate that transparency is preserved.)