How to use a Retina-friendly logo

All Docs icons are already optimized for hi-resolution (aka "retina") displays. However, the logo is a bit more tricky. The logo uploaded in your Docs site Public Website Settings will be a little blurry on a hi-resolution device such as an iPhone 4+.

The solution is quite simple and only involves 6 lines of custom CSS. First, remove any logo you've uploaded to Docs; we're going to use a background image to display the logo.

If you don't already have a custom stylesheet created, you'll want to create a CSS stylesheet and add this code to it:

#mainNav .brand span {
	display: inline-block;
	text-indent: -9000px;
	width: XXpx;
	height: XXpx;
	background: url(path/to/image) no-repeat 0 0;
	background-size: 100%;
}

Most retina images are doubled in size so that they don't appear blurry on a hi-resolution device. Let's take the Help Scout logo like the one on our docs site (you can't see the text because it's got a transparent background), which uses this technique:

Note this image is actually 300x60. But the width specified in the custom CSS would be half that: 150x30. We don't recommend using any image that's taller than 60 pixels after it's cut in half. Once everything is right, make sure you upload the CSS file and add the URL to the Custom Code section under your Docs settings.

All you have to do to the code above is fill in the dimensions and fill in the file path. Then give it a try on a retina device and it should look really crisp just like everything else: