How to Change the Logo Size in WordPress
Logo is a symbol that represents your company, your business and your brand identity. A good logo is the cornerstone of your brand. It helps you achieve brand recognition, helps your customers understand what you do and what you value.
When it comes to logos – size does matter. This does not mean your logo should be huge to make your brand stand out, it just means that it has to be the right size. A logo that’s too small has very little chance to get noticed, while a too big logo can jeopardize the design of the website.
Sometimes it may happen, even if you’ve already taken care of the size of your logo file, that it doesn’t appear properly on the website. Luckily that’s not hard to solve. Regardless of the WordPress theme you are using, you can always change the size of the logo on your website.
In this article we will show you how to change the size of the logo in WordPress in two different ways, but before we get to it let us just remind you of what makes a good logo.
Read on to find out:
While it is widely considered a logo should reflect the nature of the business, that is not necessarily something you have to stick to when creating your logo. Many great logos do not portray the nature of the business at all but do other important things like attract, motivate and inspire the audience to explore the brand which is actually even more important. Maybe it would be more effective for your type of business to have a logo that provokes strong reactions than one that describes what your business is all about. It may be quite limiting to believe that one symbol has to tell the whole story of your brand and everything about your business. Maybe it is better to start off from another point of view where a logo is a symbol that highlights the essence of your brand in the way you find it most appealing. However you decide, think thoroughly about what you want your brand to be remembered for, and it is a good idea to look for inspiration in great examples of creative logo designs.
Qode Themes: Top Picks
View Collection
Changing your logo size with CSS is the method of choice in all those cases when the WordPress theme does not support this option in the WP customizer or any other way. It is easy and even complete beginners will have no trouble changing their logo sizes with CSS.
The first thing you need to do in this case is to go to your website’s homepage and click anywhere on the page, and then choose the Inspect option in the right-hand drop-down menu.
Now, you will notice an arrow icon in the top left corner of the Inspect menu. Clicking on it will allow you to select the logo element of your website and see the code.
All you need to do now is to hover over your logo on your website homepage and the code will show up. You need to write down this line of code in the Notepad, Sticky Notes, or any other text editor that you find convenient for this purpose. You’ll use this code for adjusting the logo size.
When you have copied the code, go back to your admin panel and head to Appearance » Customize. Choose the Additional CSS option from the menu to open a drop-down field where you can add custom CSS code.
This is where you get to use the code you’ve previously saved. After copy-pasting it into the field, to specify the new dimensions add this code below the code of your logo:
max-height: 85px !important; }
We altered the size to 85 pixels, but you can set any size you want this way.
When you are done, click Publish to see how the changes took effect.
If you are using a premium theme, chances are the theme customizer supports adjusting the logo size. In some themes, the built-in logo resizer tool includes a simple slider for adjusting the logo size. Typically the path looks like this: you go to the Appearance – Customize, then choose the Site Identity option from the menu which opens the logo settings. There you will have a slider you can use to adjust the logo size.
Sometimes it happens that a free theme supports the option for logo resizing. That is just the case with the free, multipurpose Qi theme. The process of resizing the logo in Qi is very similar, if not the same, to the one in premium themes. So, by learning how to do it in Qi, you’ll probably know how to do it in any other theme that supports this option.
The main difference between Qi and some other themes is that you do not access this option from the Appearance menu, but through the Qi Essential Addons tab in the left-hand menu. Open it, and then click on the Options:
The settings page will open with options for customizing a variety of elements. Choose the Logo option, and the settings for adjusting the height of the logo will show up. Simply enter the desired values and you are good to go.
Note that you also have the option to set the size of the logo on mobile screens separately, which is great for mobile optimization.
In Conclusion
A logo is a small symbol that holds great power. Use it to your advantage and take as much time as you need before you decide how big, small, colorful, memorable, simple, complicated, attractive, elegant, fun, and whatnot you want it to be. Resizing a logo on your website is easy even if you never touched a line of code, so its size surely should not worry you. It would be more effective
