Inescapable question: Do other pages use the same background image at its "real" size (32x32)?
Background-size is a pretty new selector. I wouldn't rely on it in any case. But here it's probably an issue of wording, since chrome claims to have supported it for ages. (As opposed to, say, to pick an example wholly at random, MSIE <9.)
In addition to attaching the background to the element that contains the a, instead of to the a itself, did you try all the alternative wordings? Including the ones that look too dopey to even be worth trying ;)
--100% instead of 16px (Percentage refers to the area covered, not the background image.) --adding "round" after "no-repeat" --"cover" or "contain" instead of numbers (both should come out the same if it's a square image and a square region being covered)
Thanks for your reply. Unfortunately I've tried all of those things you suggested and nothing appears to work. Looks like I'll have to create a 16x16 icon for browsers and 32x32 icon for retina displays.