How To Change The Logo In WordPress

Open your browser and go to yoursite.com/wp-admin. Enter your username and password to log in to the WordPress admin area.

Once inside, you will see the main dashboard. The left-hand sidebar shows your navigation menu with sections like Posts, Pages, Appearance, and Settings. The main area displays a welcome panel (on fresh installs) and activity widgets showing recent posts, comments, and site health.

If your site has two-factor authentication (2FA) enabled, you will see a second prompt after your password asking for a verification code from your authenticator app or email. Enter the code to proceed. If you use a password manager and it autofills your credentials, make sure it fills the username and password fields correctly before submitting.

If you are already browsing your site while logged in, click the site name in the black admin bar at the very top of the page. This takes you directly to the dashboard without re-entering your credentials.

In the left sidebar, hover over Appearance and click Customize. This opens the WordPress Customizer, a live preview editor where you can adjust site-wide settings including your logo, colors, fonts, and header layout. Changes you make are reflected in real time in the preview panel on the right side of the screen.

The Customizer works with most standard (classic) WordPress themes. If your theme does not show a logo option here, check your theme’s documentation. Some premium themes add their own logo settings under Appearance > Theme Options or a similar custom menu.

Using a Full Site Editor (block) theme? Themes like Twenty Twenty-Four, Kadence (block version), or GeneratePress (block version) do not include a traditional Customizer logo option. Instead, go to Appearance > Editor, click on your site’s header template, and look for the Site Logo block. Click it to upload or swap your logo directly in the block editor. This is an important distinction that many guides overlook, and it is why some users open the Customizer and cannot find any logo setting at all.

Using Elementor with a custom header template? If you built your header inside Elementor, add your logo using the Site Logo widget inside that template rather than through the Customizer. The Customizer logo will not appear inside an Elementor custom header because the two systems manage the header independently.

In the Customizer’s left panel, click on Site Identity. This section controls the core identity elements displayed across your site.

Inside Site Identity you will find:

• Logo — the main image upload for your site logo.
• Site Title — the text name of your site, which many themes display in the header alongside or instead of a logo image.
• Tagline — a short descriptive line that some themes show beneath the site title in the header.
• Site Icon — the small favicon image that appears in browser tabs, bookmarks, and on mobile home screens when a visitor saves your site. It should be a square image, at least 512 x 512 pixels.

If you do not see a “Site Identity” option, your theme may organise things differently. Look for a “Header,” “Logo,” or “Branding” section in the Customizer panel. Some themes show the logo upload option directly in the main Customizer view without a separate sub-section.

If your logo already contains your business name as text, you can tick the Display Site Title and Tagline checkbox to hide the text version so your site name does not appear twice in the header.

Click the Select logo button. This opens the WordPress Media Library where you can upload a new file or choose one already on your site.

If your logo is already uploaded, find it and click Select. If this is your first time, click the Upload Files tab, then drag your logo file into the upload area or click Select Files to browse your computer.

Before you upload, make sure your file meets these guidelines:

• Use PNG with a transparent background. PNG handles transparency, so your logo sits cleanly on any header colour or background image rather than sitting inside a white box.
• SVG is ideal for retina displays. If your theme supports SVG uploads, SVG logos scale perfectly at any screen resolution without any loss of quality. Most modern themes support this, though WordPress core requires a plugin or a code snippet to enable SVG uploads for security reasons.
• Avoid JPEG for logos. JPEG does not support transparency and tends to show compression artefacts around sharp edges and text.
• Recommended pixel dimensions: 200 to 400px wide for most themes. Check your theme’s documentation for its specific recommendation. For retina (HiDPI) screens, upload the logo at twice the intended display size. For example, if you want the logo displayed at 200px wide, upload a 400px wide version. This keeps it sharp on high-resolution screens.
• Keep the file under 200KB. A large logo file adds unnecessary page weight, which slows down every page of your site.

After selecting your logo file, WordPress may ask whether you want to crop the image. If your logo is already the right proportions, click Skip Cropping. If there is excess whitespace around the edges, use the crop tool to trim it before confirming.

Before clicking the final Select button, fill in the Alt Text field with a short, descriptive label for your logo. For example: “YourBrand logo” or “CompanyName homepage.” Alt text helps screen readers describe the logo to visually impaired visitors and satisfies basic accessibility requirements (WCAG 2.1). Keep it concise and descriptive, not keyword-stuffed.

Some themes include a Retina Logo field in the Customizer (common in themes like Astra and OceanWP). This is a separate upload slot for a version of your logo at twice the pixel dimensions. When present, the theme automatically serves the retina version to high-DPI screens like modern MacBook displays and Retina iPhones, while showing the standard version to everyone else. If your theme has this option, upload both sizes: the standard version in the main logo field and the 2x version in the Retina Logo field.

Once you click Select, the logo will appear in the Customizer preview on the right. You can see exactly how it looks in context before publishing.

Take a moment to review the logo in the Customizer preview. Check that it looks the right size and sits cleanly in your header area. If you want to adjust the displayed size, most themes include a Maximum Logo Width setting nearby in the Customizer. Use this to scale the logo up or down without re-uploading the file.

When you are happy with the result, click the blue Publish button at the top of the Customizer panel. Your logo goes live immediately.

After publishing, open your site in a new browser tab and check it at both desktop and mobile widths. On mobile, open your browser’s developer tools (or simply view it on your phone) to confirm the logo scales correctly and is not cropped or misaligned.

If the logo appears blurry on a MacBook or iPhone with a Retina screen, it means the image was uploaded at too small a pixel size. The fix is to re-upload a larger version (at least 2x the displayed width) and replace the current logo in the Customizer. For example, if your theme displays the logo at 200px wide, your image file should be at least 400px wide. If your theme has a separate Retina Logo field, use that instead of replacing the main logo file.