{"id":30903,"date":"2021-10-17T15:00:42","date_gmt":"2021-10-17T13:00:42","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=30903"},"modified":"2021-11-03T12:00:09","modified_gmt":"2021-11-03T11:00:09","slug":"how-to-change-logo-size-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-change-logo-size-in-wordpress\/","title":{"rendered":"How to Change the Logo Size in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Logo is a symbol that represents your company, your business and your brand identity. <strong>A good logo is the cornerstone of your brand.<\/strong> It helps you achieve brand recognition, helps your customers understand what you do and what you value.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>When it comes to logos &#8211; <em>size<\/em> does matter.<\/strong> 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\u2019s too small has very little chance to get noticed, while a too big logo can jeopardize the design of the website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Sometimes it may happen, even if you\u2019ve already taken care of the size of your logo file, that it doesn\u2019t appear properly on the website. Luckily that\u2019s not hard to solve. <strong>Regardless of the WordPress theme you are using, you can always change the size of the logo on your website.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Read on to find out:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-makes-good-logo\">What Makes a Good Logo<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#change-logo-size-by-editing-css-code\">How to Change the WordPress Logo Size by Editing CSS Code<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#change-logo-size-with-wordpress-customizer\">How to Change the WordPress Logo Size with WordPress Customizer<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#setting-logo-size-in-qi-theme\">Setting the Logo Size in Qi WordPress Theme<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-makes-good-logo\"><\/a>What Makes a Good Logo<\/h2>\n<p>[\/vc_column_text][vc_column_text]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. <strong>Many great logos do not portray the nature of the business at all<\/strong> 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 <strong>have a logo that provokes strong reactions than one that describes what your business is all about<\/strong>. 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 <strong>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.<\/strong> 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 <a href=\"https:\/\/qodeinteractive.com\/magazine\/logo-inspiration\/\">great examples of creative logo designs<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"change-logo-size-by-editing-css-code\"><\/a>How to Change the WordPress Logo Size by Editing CSS Code<\/h2>\n<p>[\/vc_column_text][vc_column_text]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 <strong>even complete beginners will have no trouble changing their logo sizes with CSS.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first thing you need to do in this case is to go to your website\u2019s homepage and click anywhere on the page, and then choose the Inspect option in the right-hand drop-down menu.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"465\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Logo-Change-Inspect.jpg\" class=\"attachment-full size-full\" alt=\"Logo Change Inspect\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Logo-Change-Inspect.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Logo-Change-Inspect-300x144.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Logo-Change-Inspect-768x369.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Logo-Change-Inspect-620x298.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"465\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inspect-Option.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Option\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inspect-Option.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inspect-Option-300x144.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inspect-Option-768x369.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inspect-Option-620x298.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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\u2019ll use this code for adjusting the logo size.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"447\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Hover-Logo.jpg\" class=\"attachment-full size-full\" alt=\"Hover Logo\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Hover-Logo.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Hover-Logo-300x138.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Hover-Logo-768x354.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Hover-Logo-620x286.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When you have copied the code, go back to your admin panel and head to Appearance \u00bb Customize. Choose the Additional CSS option from the menu to open a drop-down field where you can add custom CSS code.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"549\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Additional-CSS.jpg\" class=\"attachment-full size-full\" alt=\"Additional CSS\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Additional-CSS.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Additional-CSS-300x170.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Additional-CSS-768x435.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Additional-CSS-620x351.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This is where you get to use the code you\u2019ve previously saved. After copy-pasting it into the field, to specify the new dimensions add this code below the code of your logo:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">max-height: 85px !important;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We altered the size to 85 pixels, but you can set any size you want this way.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"532\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Additional-CSS-Added.jpg\" class=\"attachment-full size-full\" alt=\"Additional CSS Added\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Additional-CSS-Added.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Additional-CSS-Added-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Additional-CSS-Added-768x422.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Additional-CSS-Added-620x340.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When you are done, click Publish to see how the changes took effect.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"change-logo-size-with-wordpress-customizer\"><\/a>How to Change the WordPress Logo Size with WordPress Customizer<\/h2>\n<p>[\/vc_column_text][vc_column_text]<strong>If you are using a premium theme, chances are the theme customizer supports adjusting the logo size.<\/strong> 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 &#8211; 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"509\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Site-Identity.jpg\" class=\"attachment-full size-full\" alt=\"Site Identity\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Site-Identity.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Site-Identity-300x158.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Site-Identity-768x403.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Site-Identity-620x326.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"setting-logo-size-in-qi-theme\"><\/a>Setting the Logo Size in Qi WordPress Theme<\/h2>\n<p>[\/vc_column_text][vc_column_text]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, <strong>by learning how to do it in Qi, you\u2019ll probably know how to do it in any other theme that supports this option.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"425\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Qode-Essential-Addons-Options.jpg\" class=\"attachment-full size-full\" alt=\"Qode Essential Addons Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Qode-Essential-Addons-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Qode-Essential-Addons-Options-300x132.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Qode-Essential-Addons-Options-768x337.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Qode-Essential-Addons-Options-620x272.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"503\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Logo-Height.jpg\" class=\"attachment-full size-full\" alt=\"Logo Height\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Logo-Height.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Logo-Height-300x156.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Logo-Height-768x399.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Logo-Height-620x322.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Note that you also have the option to set the size of the logo on mobile screens separately, which is great for mobile optimization.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"503\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Mobile-Logo-Options.jpg\" class=\"attachment-full size-full\" alt=\"Mobile Logo Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Mobile-Logo-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Mobile-Logo-Options-300x156.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Mobile-Logo-Options-768x399.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Mobile-Logo-Options-620x322.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]A logo is a small symbol that holds great power. <strong>Use it to your advantage and take as much time as you need<\/strong> 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[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Learn how to change logo size in WordPress in just a couple of clicks and no logo will be too big or too small for you! <\/p>\n","protected":false},"author":42889,"featured_media":30926,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[20,135,4,13],"class_list":["post-30903","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-css","tag-customization","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/30903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/42889"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=30903"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/30903\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/30926"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=30903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=30903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=30903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}