Some Steps for Retinafying Your Site
It’s becoming a high pixel density world out there, and I’ve been reading up on various steps to make websites look great on retina displays and the like. Two steps I’ll discuss in this article are using icon fonts and retinafying favicons.
Icon Fonts
On this site, I decided to replace my CSS sprite for social media icons with an icon font from Fontello. Another good source for icon fonts is IcoMoon. The advantage of icon fonts is that their size and color can be easily adjusted, making them look sharp at all screen sizes and pixel densities.
The turnaround time for changes is also much quicker than changes for CSS sprites, which require editing the source vector files and then re-exporting and regenerating the sprite. Thankfully SASS does help with that last step! As shown on CSS-Tricks, you can also easily add shadows to their shape and make other tweaks like rotate them or change their opacity.
As far as downsides go, the biggest one is that icon fonts can only be one color. Also, there are some accessibility concerns. For old browsers that don’t support @font-face, the icon won’t show up, and screen readers won’t be able to properly parse the icon text. However, there are workarounds for these issues, like using Modernizr to detect @font-face support, as discussed at HTMLBoy’s blog and using the aria-hidden attribute with a CSS pseudo element for the icon.
Once I chose the desired icons from Fontello, I downloaded the provided .zip file which contained the needed font files and CSS code to get everything working. Once I added the font files and additional CSS to my site, I was good to go.
An alternative approach for those concerned with the accessibility/browser compatibility issues would be Filament Group’s Grunticon, a Grunt.js plugin that converts a folder of SVG files to SVG and PNG data URLs along with regular PNG files for fallback.
Favicon Retinafication
In order to make my site’s favicon look good on retina displays, I followed John Gruber’s recommendation and downloaded Icon Slate on my mac to easily create both a 16×16 and 32×32 pixel favicon. All I had to do was create both sizes of my icon as a transparent PNG, drag both into Icon Slate, choose “ico” for the output file type, and click the “Build” button. Prior to that, I spent way too long trying to get X-Icon Editor, a free service, to work with my PNG files, but for whatever reason, its resulting favicon was garbled on Chrome on my mac (retina). Icon Slate for the win!