Creating hi-res icons

While we’re waiting for the vector format to come across the web, we’re left to “fake” it out — our images (excluding photographs) times two (x2) to create a high-pixel-density image.

While we’re at it, let’s see how we can consolidate all those icons into one file and in hi-res fashion.

We have website icons sized 16px, 24px, 32px, etc. While laying it out in Illustrator or Photoshop, size wouldn’t really matter — just make it larger than 48 x 48 pixels.

Set out your canvas in a fixed manner — if you’ve settled with 48px, then multiply it by 10 and have a 480px wide canvas. It could contain 10 48px icons across.

In you CSS:
width:32px;
height:32px;
background-size:1000%;
background-position:-32px 0; /* in increments of 32 pixels */