These options are located in the Theme Options > Logo > Logo tab.
You can upload an image file of any size as your logo in 2 different areas; the desktop header logo and the mobile header logo. These give you the flexibility to adjust your logo depending on where it’s displayed.
Sonnet is also Retina Ready, so there are additional options to upload a retina 2× logo for high resolution devices.
What is a Retina Ready?
It is no other than a very high quality image designed and made by Steve Jobs. When Apple first launched its iPhone 4, Jobs said he wanted to make sure it was the best standard for cell phones.
The quality of Retina essentially doubles the size of your image. They will look super sharp on Retina Ready screens.
Available Logo Areas
- Desktop Header: Default Logo, Retina Default Logo
- Mobile Header: Mobile Logo, Retina Mobile Logo
Desktop Header (Fig. 1)
Default Logo – Illustrated as A. Upload a default logo that will be displayed in all areas (Desktop Header / Mobile Header) unless a unique logo is uploaded to the mobile header logo option. Click the ‘Upload’ button to upload your default logo image file.
Retina Default Logo – Illustrated as B. This option is optional. You can upload a default retina logo for retina ready devices using the ‘Retina Default Logo’ option(Applies only to the Desktop Header areas). Click the ‘Upload’ button to upload your retina default logo image file. The retina default logo dimensions must be exactly twice that of your default logo. For example, if your default logo is 100px × 100px, the retina version of your logo must be 200px × 200px.
Mobile Header (Fig. 2)
IMPORTANT NOTE
Mobile Header options are available only if you are turn on responsive design in responsive layout.
Mobile Logo – Illustrated as C. Locate the ‘Mobile Logo’ option and click the ‘Upload’ button to upload your mobile logo image file. If no unique logo for mobile device is uploaded, then the default logo will be displayed instead.
Retina Mobile Logo – Illustrated as D. Locate the ‘Retina Mobile Logo’ option and click the ‘Upload’ button to upload your retina mobile logo image file. The retina mobile logo dimensions must be exactly twice that of your mobile logo. For example, if your mobile logo is 100px × 100px, the retina version of your mobile logo must be 200px × 200px
IMPORTANT NOTE
Retina Mobile Logo option is available only if you click the ‘Upload’ button of the ‘Mobile Logo’ option to upload a mobile logo image file.