How to Design and Optimize Your Site’s Logo For Mobile

Your logo is one of the first things readers will see as soon as they land on your site. This guide will show you how to add your own image logo or design a simple text logo with Marketers Delight.

A well-designed logo can make your site look more professional and add originality to your brand. Sure, anybody can open up an image editor and design a logo but to get the most out of a custom logo, you should work with a graphics designer.

If you don’t have the time or patience to create your own logo or the means to hire a graphics designer, a simple text logo can certainly hold you over in the meantime.

And luckily with MD’s built-in design controls and even a bit of CSS, you can design a nice logo for your site that displays nice across any device.

Let’s start this guide by adding a custom image logo to our site.

How to Add a Custom Image Logo to Your Site’s Header

The default “logo” of your site after you install Marketers Delight is simply the Site Title and Tagline of your site. This will be our starting point and based on how your custom logo image is made, we may or may not need to keep these titles in place.

Once you have your custom logo image ready to use you can jump right into your site to upload it.

Login to your WordPress admin panel and go to Appearance > Customize > Site Identity. At the top of this panel you will see a field called “Logo” and a place for you to click to upload your logo image.

Go ahead and follow the easy prompts to upload your logo and insert your logo into the field. Give your site preview on the right a few seconds to refresh to see what your logo will look like on your site. This gives you a chance to work out the details before publishing the changes live to your site.

Removing the Site Title and Tagline is easy and can be done by glancing directly below the Logo upload field and finding the “Hide Site Title” and “Hide Tagline” checkbox options. Click either or to remove these elements.

Now, if you have a smaller logo image that doesn’t have any text in it and serves as a decoration piece, you’ll most likely want to keep the Site Title and Tagline (unless you’re going for an ultra-minimalist look).

Here’s what my decorative logo looks like so far next to my titles:

Notice that MD adds another control called “Logo Width” which allows you to scale your logo’s width up or down if it needs further resizing.

Now let’s style the Site Title and Tagline text.

How to Design A Custom Text Logo

Let the fun part begin! By using the MD design controls we can style our Site Title and Tagline text with cool live preview features. This includes things like font size, font family, weights, and the ever important line height.

To begin styling your logo text, head over to the Site Design panel and open up the Site Title and Tagline panel. Here is where the font controls for these two text elements exist and are ready for you to come in and easily change.

First, let’s change the font of our Site Title to a custom Google font. I’ll use the popular handwritten font Pacifico in this case and slightly tweak the font size and line height to keep a safe distance between the title and tagline.

I’ll keep my tagline font the same but slightly tweak the font size to make it a little smaller. Again, because I increased the line height of the logo, the separation between the title and tagline will be enough to keep our logo looking clean.

Keep in mind you can also change the text color of each title, but for my example I’m going to stay with the default colors.

As you can see, the logo area is already looking a lot cleaner without much effort. Go ahead and have fun with these controls and tweak the font sizes as you see fit.

Once you’re done go ahead and Publish your options just to save your work. Now there’s just one more detail we need to check.

How to Optimize Your Site’s Logo For Mobile

What works on a desktop that has much more screen space may not work perfectly on a smaller mobile device. By using the handy device preview controls at the bottom of the Customizer we can test to see what our site will look like on Tablet and Mobile views.

And by switching these views we can see that our new logo design looks a little cramped on mobile:

There are two things that stand out the most to me:

1. The logo image takes up too much space
2. The site title font is too big

The sizes of each of these elements looked great on our larger screen but cramps up our mobile view. Luckily this is easy to fix!

See, as you cycle through device previews in the Customizer the design controls in the left hand panel update to match each respective device. So we can go back to each control we set for desktop and add a value that best designs these elements for that device.

Let’s go back to the Site Identity panel where we uploaded our logo image and add a custom width for the logo image that looks better on a smaller mobile screen.

You’ll notice that the controls indicate which device the control applies to based on which preview mode you’re on.

After tweaking the logo width and text size in the Site Design > Site Title & Tagline panel, my logo now looks much better on mobile:

Finally, we can save our changes and publish them to our site.

Unlimited Combination, Simple Design Controls

Marketers Delight makes adding email forms, call-to-action popups, and now design controls that make customizing your site easy—and is always getting better.

This guide walked you through one aspect of the design customizer but there is much more you can design around your site without writing any additional code. Of course, for when you need to take things into your own hands, MD is optimized for helping you make highly efficient customizations.

Was this guide helpful for you and how were you able to design your site’s custom logo? Show off your work here and if you have any questions, leave a comment below!