Here, we\u2019ll look at how to change the logo using the default WordPress theme and a non-standard theme.<\/p>\n\n\n\n
Adding a Logo to WordPress Default Theme: Twenty Twenty-Two<\/h3>\n\n\n\n
WordPress comes with a default theme – the one you\u2019ll see once you\u2019ve finished installing WordPress. Currently, the default theme for WordPress is Twenty Twenty-Two<\/a> released in February 2022. To customize the logo, you\u2019ll need to edit the website\u2019s header, as the logo is placed there. Thus, we\u2019ll show how to add a logo in the WordPress header.<\/p>\n\n\n\n First, we recommend checking that your current theme is Twenty Twenty-Two. To do this, choose Themes in the Appearance menu on your dashboard. The current theme you are using comes first, and you\u2019ll see a notice about the theme being activated.<\/p>\n\n\n\n Next, open the WordPress Editor that will help you customize your website. You\u2019ll see the Editor in the same Appearance menu, after themes.<\/p>\n\n\n\n The Editor lets you adjust various blocks. As the logo is a part of the header, you need to choose and customize this block. When you click on the header (which contains the logo and the navigation bar), the menu for editing the header will appear. So, you can make sure you are changing the correct block.<\/p>\n\n\n\n Next, click on the website\u2019s current logo to edit it. In this case, the logo is a \u2018Travel\u2019 image. Then, choose \u2018Replace\u2019 in the options that appear.<\/p>\n\n\n\n After clicking \u2018Replace\u2019, you\u2019ll see the menu where you have to choose the file location. <\/p>\n\n\n\n If you have already uploaded your logo to the Media Library, select \u2018Open Media Library\u2019<\/strong>. When it opens, pick the necessary image and press \u2018Select\u2019.<\/p>\n\n\n\n We will add a white logo with a transparent background to the black header of the standard WordPress theme (so, the chances are you can\u2019t see it very well in the screenshot above).<\/p>\n\n\n\n If your logo is still on your local computer, use the \u2018Upload\u2019<\/strong> option and choose the image on your device.<\/p>\n\n\n\n Then, you can preview the logo you have added.<\/p>\n\n\n\n If you are satisfied with the result, press \u2018Save\u2019 to apply the changes.<\/p>\n\n\n\n You will see a notification informing you about the changes made to the logo. If ready, proceed to \u2018Save\u2019.<\/p>\n\n\n\n That is it. Now, you can check your new logo on the website.<\/p>\n\n\n\n If you are using a non-standard theme, the logo customization process will differ. We\u2019ll show the process using the OceanWP<\/a> theme.<\/p>\n\n\n\n Similar to the stages described above, we recommend checking what theme you are using. Navigate to the Appearance and choose Themes on the dashboard. Then, you\u2019ll see your active theme (in our case – OceanWP).<\/p>\n\n\n\n To edit your current theme, you may choose \u2018Customize\u2019 in the Appearance menu on your dashboard. In the screenshot below, you see what the Appearance menu looks like for our current theme.<\/p>\n\n\n\n Other themes may have a different look.<\/p>\n\n\n\n You can also press \u2018Customize\u2019 on the active theme from the Themes submenu in Appearance.<\/p>\n\n\n\n You can click on the current logo and edit it with the Live Preview (it will take you to logo customization options).<\/p>\n\n\n\n You\u2019ll get to the Header customization, see the current logo and the \u2018Change logo\u2019 button.<\/p>\n\n\n\n After clicking this button, you can either choose an image from the Media Library or upload it. Depending on the theme you are using, you can see the preferred image dimensions. As you can see, the OceanWP recommends a logo of 164 x 45 pixels.<\/p>\n\n\n\n If your new logo is in the Media Library, find, pick it, and press \u2018Select\u2019.<\/p>\n\n\n\n If the logo needs cropping, your WordPress theme lets you do this without leaving the customization menu.<\/p>\n\n\n\n After that, you\u2019ll come back to header customizing and see the new logo.<\/p>\n\n\n\n If you don\u2019t want to (or can\u2019t use) the Live Preview, it\u2019s possible to find logo editing in the menu on the left. First, you have to choose \u2018Header\u2019.<\/p>\n\n\n\n Then, select \u2018Logo\u2019 in the list of header customization options.<\/p>\n\n\n\n You will see the same possibilities as when you use the Live Preview. When you are ready, remember to click \u2018Publish\u2019.<\/p>\n\n\n\n When you add a logo without cropping, it can be too big for the header.\u00a0<\/p>\n\n\n\n In some themes, you can adjust the logo\u2019s height and width on the customization dashboard. Simply drag the control button to set the necessary parameters.<\/p>\n\n\n\n If you don\u2019t see this option, you can try modifying the logo by adding custom CSS styles. Find the Custom CSS\/JS option on the customization dashboard (it can also be named \u2018Additional CSS\u2019).<\/p>\n\n\n\n Then, you should add the code that regulates the logo\u2019s height:<\/p>\n\n\n\n If necessary, you can choose another height value instead of 100px. In the preview, you\u2019ll see the result, and if you are satisfied with it, press \u2018Publish\u2019.<\/p>\n\n\n\n The right logo image size depends on many factors. Firstly, you should consider the size of the header, which differs from theme to theme. Secondly, the image should be big enough to show your logo clearly. Additionally, dimensions can vary for horizontal and vertical logos.<\/p>\n\n\n\n Usually, a logo of 250px (width) x 100px (height) looks good on websites. Other common logo sizes are the following for horizontal layout:<\/p>\n\n\n\n For vertical (square) layout you can try 160 px x 160 px.<\/p>\n\n\n\n Let\u2019s discuss several aspects that will help you choose your perfect logo<\/a>.<\/p>\n\n\n\n An outstanding logo should be memorable and reflect the brand identity. The main task of the logo is to remind customers about the company that stands behind it.<\/p>\n\n\n\n The logo should speak for your brand and follow the general style (such as color scheme and typography). Consistency in choosing brand symbols makes your website harmonious.<\/p>\n\n\n\n There are millions of companies globally, so choosing a unique logo can be challenging. Yet, you should do your best to create a logo that clearly represents your brand. A unique logo means that you care about your brand\u2019s identity. You can draw inspiration from many sources, take advantage of logo-making tools, experiment with colors<\/a>, shapes, and fonts, or hire a specialist.<\/p>\n\n\n\n While communicating your message via a logo, remember to keep it simple. Inserting too many things in one logo can make it cluttered.<\/p>\n\n\n\n If you don’t have a logo yet, there are logo maker<\/a> tools available online that can help you design one.<\/p>\n\n\n\n Yes, it does. WordPress themes have various customization options. Changing a logo in a default theme will differ from adding a logo to a non-standard theme.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n WordPress functionality has everything to change the logo easily. You can do this by opening your theme\u2019s customization options. In a default WordPress theme, you can use the Editor, click on the logo in the header, and add your custom image. In non-standard themes, you should find the header customization menu.\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n Choosing the logo size depends on the theme\u2019s header. So, to ensure that the logo looks good, you should follow the theme\u2019s recommendations while adding the logo. Also, you are free to experiment to see what looks best for your website.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n Yes, you can adjust the width and height of your custom logo. It\u2019s possible to do this either by moving the control button in the logo editing menu or by adding custom CSS codes to your theme..<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<\/div>\n\n\n\n Still have questions about changing the logo on your website? Our expert WordPress developers<\/a> can help. With 16+ years of industry experience and thousands of successfully completed WP projects, we know everything about the world\u2019s most popular CMS.<\/em><\/p>\n\n\n\n Contact <\/a>us with any WordPress-related request, from building a unique, engaging theme or modifying your existing one to Core Web Vitals optimization and plugin development.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":" You may have several reasons to change the logo on your WordPress website such as rebranding. If you have never replaced a logo before, though, this task may seem challenging. Don't waste your precious time searching for instructions on the Internet. Instead, read this post, where we have gathered all the essential information on the topic for your maximum convenience.<\/p>\n","protected":false},"author":4,"featured_media":14260,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[740,752],"tags":[774,825,814],"class_list":["post-14251","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","category-wordpress-development","tag-cms-development","tag-html-css","tag-wordpress"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"Dmytro Mashchenko","author_link":"https:\/\/getdevdone.com\/blog\/author\/dima"},"featured_img":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/31122251\/Intro-preview-10-300x300.png","coauthors":[],"tax_additional":{"categories":{"linked":["Tutorial<\/a>","WordPress development<\/a>"],"unlinked":["Tutorial<\/span>","WordPress development<\/span>"]},"tags":{"linked":["CMS development<\/a>","HTML & CSS<\/a>","WordPress<\/a>"],"unlinked":["CMS development<\/span>","HTML & CSS<\/span>","WordPress<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 4 years ago","modified":"Updated 1 year ago"},"absolute_dates":{"created":"Posted on March 31, 2022","modified":"Updated on March 30, 2025"},"absolute_dates_time":{"created":"Posted on March 31, 2022 2:32 pm","modified":"Updated on March 30, 2025 9:53 pm"},"featured_img_caption":"","series_order":"","featured_image_urls":{"thumbnail_723x315":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/31122251\/Intro-preview-10-400x315.png","thumbnail_723x315-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/31122251\/Intro-preview-10.png","thumbnail_723x315-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/31122251\/Intro-preview-10.png","thumbnail_770x510":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/31122251\/Intro-preview-10.png","thumbnail_770x510-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/31122251\/Intro-preview-10.png","thumbnail_770x510-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/31122251\/Intro-preview-10.png"},"featured_post_color":"#4d67e6","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/97bd036a871c68c70de0956108719ad9489849769ee15e25e0bee81f3bdd7286?s=96&d=mm&r=g","author_position":"CEO of GetDevDone","reading_time":"<\/span> 8<\/span> min read<\/span><\/span>","prev_post":{"slug":"creating-wordpress-dropdown-menus","name":"Creating WordPress Dropdown Menus: A Guide for Everyone"},"next_post":{"slug":"stunning-email-signatures-from-psd2html","name":"Stunning Email Signatures from GetDevDone"},"related_posts":["how-to-look-up-your-client-area-login-credentials-in-different-browsers-html","how-to-add-email-signatures-to-messages","should-you-use-bootstrap-for-wordpress-theme-development"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/14251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=14251"}],"version-history":[{"count":24,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/14251\/revisions"}],"predecessor-version":[{"id":24672,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/14251\/revisions\/24672"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media\/14260"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=14251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=14251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=14251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}1. Make sure you have the default (Twenty Twenty-Two) theme installed and activated.<\/h4>\n\n\n\n
![\"2022](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/30211333\/2022-default-theme.jpg\")
<\/figure>\n\n\n\n2. Open WordPress Editor.<\/h4>\n\n\n\n
3. Choose the Header block.<\/h4>\n\n\n\n
![\"Header](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/30211444\/header-block-1024x323.jpg\")
<\/figure>\n\n\n\n4. Click on the current logo.<\/h4>\n\n\n\n
![\"Click](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/30211812\/click-on-logo.jpg\"){kind=logo}
<\/figure>\n\n\n\n5. Select the logo file.<\/h4>\n\n\n\n
![\"Media](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/30212444\/media-library-1024x394.jpg\")
<\/figure>\n\n\n\n![\"Preview](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/30214011\/logo-preview.jpg\"){kind=logo}
<\/figure>\n\n\n\n![\"Save](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/30214048\/save.jpg\")
<\/figure>\n\n\n\n![\"Save](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/30214209\/save-2-1024x383.jpg\")
<\/figure>\n\n\n\nAdding a Logo to Non-Standard WordPress Themes<\/h3>\n\n\n\n
1. Check the current theme<\/h4>\n\n\n\n
![\"Choose](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/30214324\/choose-theme-1024x504.jpg\")
<\/figure>\n\n\n\n2. Find the \u2018Customize\u2019 option.<\/h4>\n\n\n\n
![\"Click](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/30214352\/customize-button.jpg\")
<\/figure>\n\n\n\n3. Customize the logo.<\/h4>\n\n\n\n
![\"Click](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/30214515\/customize-logo-1024x208.jpg\"){kind=logo}
<\/figure>\n\n\n\n![\"Header](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/30214602\/header-customization.jpg\")
<\/figure>\n\n\n\n![\"Select](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/30214730\/select-logo.jpg\"){kind=logo}
<\/figure>\n\n\n\n![\"Select](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/30214819\/select-from-media-library-1024x397.jpg\")
<\/figure>\n\n\n\n![\"Crop](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/30214850\/crop-logo-1024x399.jpg\"){kind=logo}
<\/figure>\n\n\n\n![\"Preview](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/30214943\/preview-logo-1024x868.jpg\"){kind=logo}
<\/figure>\n\n\n\n![\"Select](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/30215035\/logo-header-customization.jpg\"){kind=logo}
<\/figure>\n\n\n\n![\"Click](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/30215128\/publish.jpg\")
<\/figure>\n\n\n\nAdjusting the Logo by Adding Custom HTML\/CSS Snippets<\/h3>\n\n\n\n
![\"Apply](\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/30215254\/logo-custom-css-369x1024.jpg\"){kind=logo}
<\/figure>\n\n\n\nimg.custom-logo {\n\tmax-height: 100px !important;\n}<\/code><\/pre>\n\n\n\nWordPress Website Logo: Common Sizes<\/h2>\n\n\n\n
\n
Tips on Choosing a Great Logo<\/h2>\n\n\n\n
Memorability<\/h3>\n\n\n\n
Clearness and Consistency<\/h3>\n\n\n\n
Uniqueness<\/h3>\n\n\n\n
Simplicity<\/h3>\n\n\n\n
WordPress Change Logo FAQs<\/h2>\n
Does adding a logo to WordPress depend on the theme?\n<\/h3>\n
How can you add a custom logo to the header?\n<\/h3>\n
What size should the WordPress logo be?\n<\/h3>\n
Can you change the WordPress logo size?\n<\/h3>\n
\n\n\n\nTop-Quality WordPress Development Services from GetDevDone<\/h2>\n\n\n\n