I finally have a computer with a retina display (yes, it’s 2016). Now I’m able to easily see when an image needs optimizing. I happened to notice my site’s favicon looked a little blurry. I wondered if it was possible to create a retina version of this file. Turns out, this was much easier than I thought.
How to add a retina favicon:
First, create a 64px × 64px image. Save it as a transparent .png and upload it to a free .ico editor site. I used xiconeditor.com. This site automatically saves 4 sizes, then generates the .ico file with all the sizes included in it. Next, save the generated file to your site’s root.
Make sure to include this line in your <head>.
I replaced my old favicon with this new one, and it worked like a charm.