Saurabh Web Solutions Subscribe
WordPress

How to Add a Logo in WordPress (Theme Customizer and Elementor)

By · · 2 min read

How to Add a Logo in WordPress (Theme Customizer and Elementor) - cover image
On this page
  1. Prepare the logo file
  2. Method 1: Classic themes (Customizer)
  3. Method 2: Block themes (Site Editor)
  4. Method 3: Elementor
  5. Add a site icon (favicon)
  6. Logo best practices

Your logo appears on every page and is often the first thing visitors notice. WordPress gives you several ways to add a logo depending on your theme. This guide covers the theme customizer, the block site editor and Elementor, plus the right sizes and the site icon (favicon).

Prepare the logo file

  • Use a transparent PNG or WebP so it sits on any background.
  • Export it at twice the size it will be displayed (for example 600 x 160 for a 300 x 80 header logo) so it stays crisp on high-resolution screens.
  • Trim empty space around the logo before exporting.
  • Name the file descriptively, such as brand-name-logo.png.

Method 1: Classic themes (Customizer)

  1. Go to Appearance > Customize > Site Identity (some themes call it Header > Logo).
  2. Click Select logo, upload the file and crop if asked (skip cropping to keep the original).
  3. Adjust the logo width if your theme offers a slider.
  4. Click Publish.

Method 2: Block themes (Site Editor)

  1. Go to Appearance > Editor and open the Header template part.
  2. Select the Site Logo block (add it if missing) and upload your logo.
  3. Set the width in the block settings and save.

Method 3: Elementor

  • Elementor Pro: in your Theme Builder header, use the Site Logo widget. It pulls the logo from Site Settings > Site Identity, so changing it once updates every page.
  • Elementor free: add the logo in your theme's customizer, or place an Image widget in your page header and link it to the homepage.

Building a full custom header? See how to make a sticky header with Elementor.

Add a site icon (favicon)

The site icon appears in browser tabs, bookmarks and Google search results. Upload a square image of at least 512 x 512 pixels under Customize > Site Identity > Site Icon (or Settings > General on newer versions). Use a simplified version of your logo; detailed logos become unreadable at tiny sizes.

Logo best practices

  • Link the logo to the homepage (most themes do this automatically).
  • Keep the header logo modest in height on mobile so content stays visible.
  • Add alt text with your brand name for accessibility.

Frequently asked questions

What size should a WordPress logo be?

There is no single size, but a logo around 250-400 pixels wide and 60-100 pixels tall works for most headers. Upload it at double the display size so it stays sharp on high-resolution screens.

Should my logo be PNG or SVG?

SVG is sharpest at any size and very small, but WordPress blocks SVG uploads by default for security. A transparent PNG or WebP at double size is the simple choice.

Why is my logo blurry?

It was uploaded smaller than it is displayed, or it is being stretched. Upload a larger version and let the theme scale it down.

How do I change the browser tab icon?

Set a Site Icon of at least 512 x 512 pixels in the Customizer under Site Identity, or in Settings > General on newer WordPress versions.

#wordpress#logo#branding#elementor

Keep learning