Adding a Retina Ready Logo to the Utility Pro Theme

For this post, I’ll show you how I added a Retina ready logo to the Utility Pro theme by Carrie Dils. While I am using the Genesis Framework and the Utility Pro theme, this same technique could easily be applied to any Genesis or generic WordPress theme with a few minor changes to the CSS.Heads up: There are a few affiliate links here, so thanks if you use them as it helps fund articles like this one.

I recently adapted the Utility Pro theme as my starter theme for new projects. This change has dramatically improved my workflow and increased my productivity. You can read about why I made the switch here.

Why do you need a Retina ready logo?

Today, most phones, computers and tablets have high density displays. I build my projects on a Retina iMac and have a 4K Dell monitor along side it to provide extra workspace. When you cram more pixels into the same area, the displayed image appears sharper. This is especially true for graphic images like logos. But if your logo was made for a standard display – it will appear a little blurry and jagged on these newer displays. Below is an example demonstrating this.

Notice that the bottom image appears sharper. That is because it is a 600px by 120px image crammed into a 300px x 60px space, effectively doubling the pixels per inch.

Adding the Retina Ready Logo

In my sample Utility Pro theme, the logo size is 300px by 60px. If you want to serve a sharp crisp logo to visitors who are on high pixel density displays (HDPI) you will need to:

1. configure Utility Pro to use an image vs dynamic text
2. create two versions of the logo
3. modify the style.css to determine which file to serve based on the display density of the device.

1. Configure Utility Pro to use an image vs. dynamic text

Utility Pro does not utilize a custom header in the theme, which means you won’t find an upload tool for your logo in the Customizer. I prefer it that way so I can have complete control where the logo file is stored on the server.

By default the Utility Pro theme uses Dynamic Text in place of a logo, which is created from your Site Title and Tagline.

If you want to use an Image logo instead of Dynamic Text, here’s how to get started:

Go to the Appearance > Customize
Click on Site Identity
Select Image logo from the drop down
Save your changes


Changing this setting will automatically “include” the file logo.png, that ships with the theme. That file is stored in the images folder inside your Utility Pro theme folder.

I’ll explain the Site Icon section at the end of this post, but for now – all we need to do is choose Image logo and save our changes.

2. Create two versions of the logo

I prefer to work with vector files in either .eps or .ai format. These files are scalable without distorting the image and can be opened in either Photoshop, Illustrator or Affinity Designer (Mac only and my personal favorite).

In my example, I am using a sample logo file I had in an .eps format. For the standard version, I saved a .png version of the file with a size of 300px wide by 60px high and gave it the filename logo.png.

For the Retina version, I saved it with the size 600px by 120px with a filename of logo@2x.png. I upload both of those files to my images folder in my Utility Pro theme folder.

Tip: The easiest way to do that is using a FTP client or the file manager on your web host.

3. Update the style sheet

This next step requires making a change to your style.css file. Make sure you make a backup of it first, and know how to access your site via FTP or through your web host file manager. Here are some tips on how to do this safely.

I edited the style.css and replaced the following code:

with this code:

I saved the changes to the style sheet and upload that to my Utility Pro theme folder. This code will serve the logo@2x.png file when the pixel density ratio is at least 2.

The code includes the recommended prefixes to work with all browsers. Thanks to Chris Coyier at CSS-Tricks for providing the necessary code.

I’ve styled this with a media query so that the logo is displayed on the left side of the screen on any viewport width of 1023 pixels or wider. That will include an iPad in landscape mode which has limited vertical space so it makes sense to try to keep the header area compact. On viewports less than 1023px (phones or iPad portrait mode), the logo will be centered in the header area.

How you style yours is up to you.

Finally, let’s go back and see how I added the Site Icon to the theme, which is how the favicon will automatically generated.

Adding the Site Icon

The process to add a site icon is done the Site Identify section of the Customizer. With the site icon, WordPress handles uploading the file for you – since it needs to create several versions of it automatically.

Go to the Appearance > Customize
Click on Site Identity
Select Image for Site Icon
Save your changes


The Site Icon is used as a browser and app icon for your site. Icons must be square, and at least 512px wide and tall.

I created a separate image to use for the Site Icon. I used the logo artwork without any text and sized it to 1024px by 1024px (about twice the recommended size for a standard display). I saved it with an easy to remember name of site-icon.png on my local drive. I then uploaded it by pressing the Select Image button and selected the saved file.

That’s it. Now when I view the site in the browser, the favicon shows my logo artwork. WordPress automatically adds all of the necessary code to the head section of your site for the icon.

Additional resources about Retina images:
https://en.wikipedia.org/wiki/Retina_Display
http://thenewcode.com/564/Understanding-Pixel-Density-Resolution-and-Retina-Displays