Why are my favicons squashed when I try to enlarge them?

Question

OS X 10.10.2, Firefox 35.0.1
I was trying to increase the size of the favicons on the bookmarks toolbar, from default to 24 x 24. I tried the Stylish extension, as well as the Roomy Toolbar add-on, both of which enlarged the icons.
However the aspect ratio is off; the favicons are the proper width but not the proper height, giving them a squashed appearance.
I confirmed this by replacing one 16x16 favicon with a 24x24 favicon, but it too appears distorted and unclear. It appears the bookmarks toolbar is somehow preventing the favicons from expanding to their correct height.
I tried a bit of css tweaking but nothing worked.
Anyone have any ideas on how I can get the toolbar to behave, i.e. make it allow for the increased height of the favicons?

Answer 1

Okay, here's my current setup:
1. userChrome.css (with a space before the '#'):
@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
#PersonalToolbar, #personal-bookmarks { height: 35px !important; }
#personal-bookmarks toolbarbutton.bookmark-item .toolbarbutton-icon {
height: 24px !important;
width: 24px !important;
2. hbox > image still shows a width of 0 and height of 18 with Dom Inspector Box Model; everything else now lists as 1876 x 24
The hbox itself shows as width 0 and height 0.
After restarting FF, the icons still appear as 16x16.
If I use Roomy Bookmarks add-on to increase the icon size to 24x24, they appear squashed.
When I disable the add-on and restart, the icons stay at 16 x16.
3. Something else I discovered:
Scrollbox shows as a height of 24 in Box Model, however the individual toolbarbutton nodes (class: bookmark-item) lists as height of 22, and the xul:image within shows width 16 and height 16.
It appears that the toolbar is resizing properly; I can see more height.
But despite userChrome.css, the icons are not resizing to 24x24, although the Box Model appears to be increasing to 24.