With responsive design and retina displays becoming the norm, bitmap images are becoming a sticking point; they simply don’t fit in with our flexible and resolution-independent web. So, it makes sense to use vector images instead wherever it’s appropriate, and one great place to do this is logos.
<a class="site-logo" href="/"> <!--[if gte IE 9]><!--><img alt="Acme Supplies" src="logo.svg" data-fallback="logo.png" onerror="this.src=this.getAttribute('data-fallback');this.onerror=null;" /><!--<![endif]--> <!--[if lt IE 9]><img alt="Acme Supplies" src="logo.png" /><![endif]--> </a>
Incidentally, you could save a few characters by using
[if IE 9]for the first conditional comment, as IE10 and up will no longer use conditional comments, but for the person (possibly you) who looks at your markup in 6 months’ time and wonders what’s going on, the longer statement makes a bit more sense. ↩
If you’re looking at the markup thinking “but I use a background image to display my logo”, then you should read this post by Harry Roberts about why you should use an
<img>tag instead. ↩