This is a feature of the Feast Plugin
The retina logo in the Feast Plugin let's you specify a retina-quality version of the desktop logo, without impacting pagespeed.
Simply upload an image twice the dimensions of your current logo in Media > Library > Add New, and copy+paste the URL into the "Retina Logo" field in the Feast Plugin.
For example, if you want a 400x140 logo to display on desktop, set that in the customizer, then upload a 800x280 version for the retina field in the Feast Plugin.
This feature was released in version 2.1.1 of the Feast Plugin. See how to update the plugin in the Feast Plugin FAQ.
Desktop and mobile logos
With the introduction of the Modern Mobile Menu, we've had some questions about the different logos and sizes. Here's a simple chart:
| Regular | Retina | |
| Mobile | 200x70 | 400x140 |
| Desktop | 200x70 | 400x140 |
You only need one logo, uploaded in two different sizes.
If you'd like to use a larger logo on the desktop, you can use any size logo you'd like. There are no rules for this - it will display at any size you upload it at. Make sure your desktop logo is twice as large.
If you want to keep it simple (we highly recommend this), use the retina logo (400x140) as the regular desktop logo, and a higher quality retina logo for desktop (800x280).
Note that we can't provide assistance with logo design and creation - this is the role of a graphics designer.
Q: What size does the image have to be?
Double the size of your original logo. We've been recommending people use smaller logos for a while now.
Sites should be designed for mobile-first, and most mobile screens have around a 360 px width. We recommend the original logo be 360px width maximum, and thin, so that as much above-the-fold content is displayed as possible.
Note: simply scaling up your existing image won't make it higher quality. You'll need to use the original file, and scale that down to double your current size.
eg. if the original image is 1000x500 and your current logo is 200x100, you'll want to:
- create another copy of the 1000x400 image, and scale it down to 400x200 to act as the "retina logo"
- then upload the "retina logo" image to your site's Media > Library
- then copy that image URL into the Feast Plugin's Retina Logo field
Q: Does the retina image load on mobile?
Yes, it will load on mobile devices that support retina images.
Q: Why is my logo broken?
If the image URL you paste into the field isn't valid, the browser will try to display an image that doesn't exist. Double check your image URL.
The image will also fail to display if you specify an HTTP URL but use HTTPS on the site. Make sure the logo URL uses HTTPS.
Q: How do I remove the retina logo?
Empty the field so that it's blank (no spaces) and save.
History
We updated the header logo to transition away from using background-image and SEO-unfriendly hidden text last year, in rethinking the header logo.
One comment that came up time and again was that people missed their retina-quality logo, which wasn't able to be implemented without hard-coding the image width, which was a huge problem people had with the old format.
Not only that, retina-quality logos went against pagespeed tool recommendations by having an oversized image load.
We've spent time looking into ways to get retina-quality logos added in a way that doesn't require editing code, and doesn't impact pagespeed, and believe we've come up with a good solution.
This is new functionality, and like all new functionality, will live in the Feast Plugin going forward, so that we can update and fine-tune it over time as WordPress and Genesis continue to evolve.