Logo for WordPress: Header, Favicon & Retina Display Setup

A business coach relaunched her WordPress site with a clean new design. Three days later, a reader emailed: "Your logo looks blurry — is it a new image?" It wasn't. The issue was that her theme had switched from the old header image approach to WordPress's native site logo — and the transition had left her with a logo rendering at the wrong size without the 2x retina version.

WordPress logo handling is more fragmented than most platforms because it depends on your theme, the Customizer, and which plugins you have installed. The core process is standardised, but themes override it in different ways. Here's what actually works.

How WordPress Handles Logos

WordPress (since version 4.5) has a native "Site Logo" feature built into the Customizer. Most modern themes use this. Older themes may use a custom "Header Image" approach or a theme-specific logo field.

The difference matters because:

• Site Logo (Customizer): Stored as an attachment in your media library, tied to the custom_logo theme support. Most modern themes use this.
• Header Image: A full-width header background image, different from the logo. Some older themes confuse these two.
• Theme-specific fields: Some themes (like Divi, Avada, Elementor-based themes) have their own logo upload in theme options rather than the Customizer.

Rule of thumb: Check your theme documentation before uploading anything. Using the wrong field means your logo ends up in the wrong place or gets overridden.

Site Logo via the Customizer

For themes using the native WordPress site logo:

Access: Dashboard → Appearance → Customize → Site Identity → Logo

Upload the logo here:

• PNG with transparent background
• Recommended width: 400px (this renders at 200px on standard screens, 200px displayed at 2x for retina)
• WordPress allows you to crop the logo after upload — click "Skip Cropping" to use your image as-is if you've already prepared the right dimensions

Retina support: Many themes support retina (HiDPI) logos. If your theme does, it expects a logo at 2x the display size. A logo that displays at 180px wide should be uploaded at 360px wide. The theme renders it at 180px but uses the full 360px for retina screens.

Check if your theme handles retina: look for a "Retina Logo" upload field in the Customizer or theme options, or read the theme documentation. Some themes (Astra, GeneratePress, Hello/Elementor) have explicit retina logo support. Others just render whatever you upload at whatever size their CSS specifies.

Favicon in WordPress

WordPress manages the favicon through the Customizer under "Site Icon":

Access: Dashboard → Appearance → Customize → Site Identity → Site Icon

What WordPress calls it: "Site Icon" — this is your favicon Required size: 512x512 pixels minimum (WordPress generates all sizes from this) Format: PNG or JPG

WordPress auto-generates smaller versions (32x32, 180x180 Apple touch icon) from your 512x512 upload. This is why you should upload at 512x512 — WordPress needs the large source to scale down cleanly.

What to upload: Your icon mark only. Not the full wordmark. At 32x32 display, any text is invisible. A clean icon/symbol at 512x512 produces good output at all the derived sizes.

See the complete favicon guide if you need more detail on designing the right icon mark for browser use.

Theme-Specific Logo Setup

Astra theme:

• Appearance → Customize → Header → Site Identity → Logo
• Has separate "Retina Logo" upload field (upload 2x file here)
• Logo width control in Customize → Header → Site Identity → Logo Width

Elementor / Hello Elementor:

• Elementor header widget has its own logo controls
• Site Logo widget pulls from WordPress Customizer
• Can also use a custom image widget with your logo file directly

Divi:

• Divi Theme Options → General → Logo
• Separate mobile logo option
• Logo height is controlled in Divi customizer

GeneratePress:

• Appearance → Customize → Site Identity
• Clean, straightforward — respects WordPress native logo field
• Excellent retina support

WooCommerce (if running a shop): The logo in a WooCommerce store header typically comes from the theme's Customizer settings, same as above. WooCommerce adds its own email templates, which have a separate logo upload in WooCommerce → Settings → Emails.

The Retina Problem in Detail

"Retina" (HiDPI, high-density pixel display) screens — all modern iPhones, MacBook Pros, most modern Android phones, and many laptops — display content at 2x pixel density. A logo displayed at 200px CSS width uses 400 actual device pixels.

If you upload a 200px PNG logo and it's displayed at 200px, retina screens show it at 200px physical pixels across 400 device pixels. The browser upscales it 2x — and it looks slightly soft.

The fix: Upload at 2x your intended display size. If your logo displays at 200px wide in the header, upload a 400px wide PNG. The browser renders it at 200px CSS width (sharp on retina) and standard screens scale it down correctly (also sharp).

But there's a catch: If WordPress or your theme has a max-width CSS rule on the logo element that's smaller than your uploaded image, the image gets constrained by CSS and renders fine. If there's no max-width, a 400px logo uploaded for a 200px header slot might render at 400px — too large.

The safe approach: Upload at 2x, set the theme's logo width control to your target display size. Most modern themes have a "Logo Width" slider in Customizer.

SVG Logos in WordPress

SVG logos have a unique advantage for web: infinitely scalable, small file size, looks perfect on any screen density without needing 2x versions.

Default WordPress blocks SVG uploads (security reason — SVG can contain executable code). To enable SVG:

• Install a plugin like "Safe SVG" or "SVG Support"
• These sanitize the SVG and allow upload to the media library

After enabling SVG uploads, you can upload your SVG logo directly. Benefits: no blurriness at any zoom level, very small file size.

Compatibility note: The WordPress Customizer site logo field may not preview SVGs correctly, but they work at the theme level. Test on the live site, not just the Customizer preview.

The SVG optimization guide covers how to prepare an SVG specifically for web use — including removing unnecessary metadata that adds file size.

Checking Your Logo Across Devices

After setup, verify your logo looks correct on:

1. Desktop browser (standard screen) at 100% zoom
2. Desktop browser at 200% zoom (simulates retina)
3. Actual mobile device (not browser preview)
4. Tablet

The editor preview is not reliable for judging final logo quality. Always check the published site on real devices or with real browser tools (Chrome DevTools device simulation is acceptable for a quick check).

For logos that need to be prepared or cleaned up before WordPress setup — proper transparency, correct dimensions, no white background artifacts — our logo cleanup service delivers everything you need, including a web-ready PNG at 2x and an optimized SVG.

Quick Answers