How to get favicon work on both Retina and standard?

[ACTIONpack]

I'm trying to get Retina favicon work on high resolution screen like Retina macbook pro and getting the ico showing up on a standard screen. If I put the favicon.ico in there then the high rez will not show up on my Retina macbook pro but if I take out the ico then it does not show up on standard screen.

<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="icon" type="image/png" href="http://www.romabio.com/images/retina-logo.png" />


[/CODE]

[ACTIONpack]

Got a work around for this. If you want to get a high resolution version on the ICO then add a height and width to the short ico meta tag. Example below!

<link rel="shortcut icon" href="url link" style="height: 128px; width: 128px;" />
<link rel="icon" type="image/png" href="url link" />
<link rel="apple-touch-icon-precomposed" href="url link" />


[/CODE]

[primexx]

you could also try icons with multiple sizes but i'm not sure if the browsers actually pick the right size

[Sandor]

also

<link rel="apple-touch-icon" href="/whatever.png">
[/CODE]

[The_Decryptor Veteran]

Unfortunately you'll have to use an ico file (With at least 16x16 and 32x32), I'm not sure any browser supports the standard method for it currently.

Got a work around for this. If you want to get a high resolution version on the ICO then add a height and width to the short ico meta tag. Example below!

<link rel="shortcut icon" href="url link" style="height: 128px; width: 128px;" />
<link rel="icon" type="image/png" href="url link" />
<link rel="apple-touch-icon-precomposed" href="url link" />


[/CODE]

Does that actually work? In what browser?

If you want to specify a size you use the "sizes" attribute, CSS is meaningless for this.