Forever we all made 16x16 graphics and got them into the .ico format somehow. I probably used this converter tool a million times. Somewhere along the line it started to get more confusing. Browsers can support .png favicons too. And now there are retina displays, and nothing looks worse on retina than little tiny graphics scaled up. Browsers are starting to support 32x32 favicons now too. What are we to do?
The situation is that if you provide both, many browsers ignore the .png and use the .ico. Jonathan Neal has the whole story. So, let's just use that .ico for both. It's a unique format that is built for handling that anyway.
<link rel="shortcut icon" href="https://cdn.css-tricks.com/favicon.ico">