How to display Retina (32x32) favicons in Google Chrome?

Question

Using Chrome on my Retina MacBook Pro, I can't get the higher resolution (32x32) favicon on my blog to load first. When I first open the page (http://insofar.org), the 16x16 version is displayed and it is only on reload that the 32x32 shows up. As an alternative example, when loading Daring Fireball, its 32x32 favicon is loaded first. And yes, I cleared my cache.

In both cases, we're using the following tag in the head section:

<link rel="shortcut icon" href="/path/to/favicon.ico">

where favicon.ico contains both the 32x32 and 16x16 versions.

How can I force the 32x32 on Retina displays?

EDIT: I found that the issue is fixed in the latest Google Chrome Canary (v24.0.1300.0).

Answer 1

You should try Faviconer.com - designed for creating 16x16 and retina 32x32 favicon .ICO files. You can draw a new icon from scratch or you can upload any graphic image and convert it to .ICO format.

Here is the link - http://faviconer.com

Answer 2

For importation http://xiconeditor.com/ worked very well for me. It creates ico with 16, 24, 32, 64 sizes.

I suggest to generate first your image with your editor in the different sizes then import each one in order to keep the quality.