Generating retina favicons

To be honest, I'm somewhat stealing this post from Daring Fireball, but this issue is so specific and something that I don't regularly need to do, so I felt it would be helpful to jot it down.

First things first, you're unfortunately going to have to shell out some money for an app. Gasp! It's only five bucks, guys...your lunch costs more than that per day and you can't go on eating that same lunch over and over again. This is one app you buy once and you can use on many projects, so just suck it up and go download Icon Slate, you'll thank me later.

Once you've downloaded the program, fire it up and select New Document. The default is to have both icns and ico checked, but just uncheck icns so that you only have ico and then choose Done. The only two sizes you need to worry about with favicons are 16px and 32px, so just plop your 16x16 and 32x32 icons into those two reservoirs and then save. Voila! You have your retina and non-retina favicons ready to go.

Now add a bit of code into your head and you're laughing:

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