The high-res future is coming fast. Photo: Ariel Zambelich/Wired.com 
The rise of high-resolution displays means that web developers need resolution-independent graphics. The good-old PNG icons we’ve been relying on just aren’t going to cut it for much longer.
It’s true that a slightly blurry icon or logo on the iPad probably isn’t going to ruin a site by driving visitors away in droves, but it is a problem, and one that will only become more obvious as higher-resolution screens proliferate.
At the moment there are essentially two ways to swap out your PNG icons for something a bit crisper: icon-fonts or SVG graphics. Naturally, neither is perfect — the last time something worked perfectly on the web Tim Berners-Lee and friends were the web’s only users — so it’s worth looking into the advantages and drawbacks of each.
That’s exactly what UIX designer Simon Uray recently did, breaking down the good and the bad of both icon fonts and SVG images. Give Uray’s post a read for the finer details on both, but here’s the short story: icon fonts are probably your best bet at the moment, though you’ll have to live with the fact that some icons are a tiny bit blurry on traditional displays.
Since at the moment the vast majority of screens on the web are not high resolution, adopting icon fonts over the PNGs you’re using now might be a case of premature optimization.
As Uray writes, “sorry, if you’re looking for a silver bullet, I’m afraid it doesn’t exist.” To that we might add “yet.” But SVG support in browsers (one of the chief problems with SVG is that it isn’t as widely supported as icon fonts) continues to improve. There’s also always the option to use them all. “Maybe best,” writes Uray, “is to use PNG served in many different sizes for your high fidelity, multi-color logo and other graphics… SVG icons for your navigation that stays the same size, but also look sharp on Retina displays [and] Responsive inline SVG for bars and charts and an icon font for all your different button sizes.” The best of all worlds.
For more on icon fonts, be sure to check out Chris Coyers interactive write up on how to use icon fonts.