How to add a logo to WordPress (and size it correctly)

01The easy way: where the logo setting lives

Adding a logo to WordPress is a point-and-click job, not a coding one. There are two places it lives, and which you use depends on whether your site runs a classic theme or a newer block theme.

You don't need to know which kind you have in advance. Open Appearance in your dashboard and look. If you see Customize, you're on a classic theme and you'll use the Customizer. If you see Editor, you're on a block theme and you'll use the Site Editor.

• Classic theme → the Customizer. Go to Appearance → Customize → Site Identity. Logo, site title, tagline, and favicon all live in this one panel, with a live preview on the right.
• Block theme → the Site Editor. Go to Appearance → Editor, open your header template, and click the Site Logo block. You upload directly into the block.

Both methods store the logo in your site's database, not in a theme file. That's what makes them safe — and it's why neither approach needs you to touch code.

02Step-by-step: the Customizer (classic themes)

If your Appearance menu shows Customize, this is your path. The whole thing takes about a minute.

• Go to Appearance → Customize, then click Site Identity.
• Under Logo, click Select logo and either upload your image file or pick one already in the Media Library.
• WordPress may offer a crop step — you can skip it if your logo is already the shape you want.
• Set the Site Title and Tagline, and decide whether to display them alongside the logo (a checkbox controls this).
• Watch the live preview, then click Publish to make it go live.

If you don't see a Logo option under Site Identity, your theme may not support a custom logo. In that case, the theme's own settings panel (often its own menu item) usually has a header-logo field instead — more on theme-specific options below.

03Step-by-step: the Site Editor (block themes)

If your Appearance menu shows Editor, your logo is a block you place visually inside the header.

• Go to Appearance → Editor, then open Patterns or Templates and select the Header template part.
• Click the Site Logo block. If the header doesn't have one yet, add it with the block inserter (the + button) and search for Site Logo.
• Upload your image, or choose one from the Media Library.
• With the block selected, use the toolbar and the right-hand settings panel to set the logo's display width in pixels.
• Click Save to publish your changes.

A useful detail: the Site Logo block and the favicon are linked in block themes. Setting the site icon here (look for the Use as site icon option) means your logo can double as the browser-tab favicon without a second upload.

04Logo size and format: get it sharp and fast

Uploading the logo is the easy part. Sizing and saving it correctly is what separates a crisp, fast header from a blurry or sluggish one. A few rules cover almost every case.

Export at roughly twice the display size. If your logo shows at 200px wide in the header, export the file at around 400px wide. High-resolution (retina) screens pack in extra pixels, so a logo saved at exactly its display size looks soft on those displays. Doubling keeps it sharp everywhere.

Match the file format to the artwork. Each format has a job, and picking the wrong one costs you either quality or speed.

• SVG — best for most logos. It's a vector format, so it stays razor-sharp at any size and the file is usually tiny. WordPress blocks SVG uploads by default for security reasons, so you'll typically need a plugin that enables and sanitizes them.
• PNG — the safe default when you can't use SVG. It supports transparent backgrounds, which you almost always want so the logo sits cleanly on the header. Export at 2x for retina sharpness.
• WebP — a modern format with smaller files than PNG at similar quality, and it supports transparency. Well supported in current browsers; keep a PNG fallback if your audience uses older ones.
• JPG — avoid for logos. It can't do transparency and adds compression artifacts around text and sharp edges.

Keep the file small for speed. A header logo loads on every page, so its weight directly affects load time and your Core Web Vitals — particularly Largest Contentful Paint when the logo is near the top. Aim to keep a raster logo well under 50KB; SVGs are often a few KB. Run PNGs through an image compressor before uploading.

Let the theme handle final display size. Upload a clean 2x file, then set the displayed width in the Customizer or the logo block. Don't upload a 2,000px-wide image and shrink it with CSS — you'd ship a huge file for no visible benefit.

05Adding a favicon (site icon)

A favicon is the small icon that appears in browser tabs, bookmarks, and often next to your site in search results. WordPress calls it the Site Icon, and it's set in the same place as your logo.

On a classic theme, go to Appearance → Customize → Site Identity and look for Site Icon. On a block theme, set it from the Site Logo block's options or under the Site Editor's global settings. Upload a square image and WordPress generates the various sizes browsers need.

• Use a square image, at least 512×512px. WordPress crops to square and scales down, so anything smaller risks looking fuzzy.
• Simplify the artwork. A favicon renders as small as 16×16px, so a full wordmark turns to mush. Use a single icon, monogram, or initial instead of your whole logo.
• PNG with transparency, or SVG, works well. Keep it tiny — a favicon should be a few KB at most.

Set it once and it propagates everywhere automatically. There's no need to upload separate files for Apple touch icons or different sizes — WordPress derives those from the single square you provide.

06Mobile logo considerations

Your header has far less width on a phone, so a logo that looks fine on a desktop can crowd out the menu or wrap awkwardly on mobile. A little planning avoids that.

• Watch the wide wordmark. A long horizontal logo can squeeze the hamburger menu or overflow the screen. If yours is wide, test it at phone width in the Customizer's mobile preview before publishing.
• Consider a compact mobile version. Some themes let you set a separate, smaller logo (often just the icon or monogram) for small screens. If yours does, a square mark reads far better in a narrow header.
• Mind the tap target and contrast. The logo usually links home, so make sure it's large enough to tap comfortably and stands out against the header background on a bright outdoor screen.

If your theme has no built-in mobile-logo setting and the desktop logo crowds the header, a few lines in Additional CSS can swap or shrink it at mobile widths. That's the one spot where a tiny bit of CSS earns its keep — but try the theme's own options first.

07If your theme has its own logo settings

Many premium themes add their own options panel — often under their own menu item — and that panel sometimes includes its own logo field that overrides or sits alongside the core WordPress one.

If you set a logo in Site Identity but the header still shows the old one (or nothing), check the theme's own settings. Some themes offer extras core WordPress doesn't: a separate sticky-header logo, a transparent-header variant, or a dark-mode logo. Use those fields when they exist, since they're built to match the theme's layout.

The trade-off is portability. A logo set in the theme's own panel is tied to that theme — switch themes and it won't carry over. A logo set in core Site Identity is more likely to survive a switch. When both options exist, the core setting is the safer home unless you specifically need a theme-only feature.

08Keeping your logo through a theme switch

Logo settings made in the Customizer or Site Editor live in your site's database, so a theme update never erases them. A theme switch is different — and worth understanding before you change themes.

The custom-logo setting is stored against your theme, so activating a new theme can leave the new header without a logo even though the image is still safe in your Media Library. Nothing is lost — you simply re-point the new theme at it.

• After switching, re-set the logo in the new theme's Site Identity panel or Site Logo block. The file is already in your Media Library, so it's a two-click re-selection, not a re-upload.
• Re-check the favicon too — the site icon can also reset on a theme switch.
• Test the sizing again. The new theme may display the logo at a different width, so confirm it's sharp and not crowding the menu on both desktop and mobile.

If you're nervous about a theme switch, do it on a staging copy first. Managed WordPress hosts like Cloudways let you clone your live site, switch themes there, re-set the logo, and only push it live once the header looks right — so the real site never appears logoless to visitors.

09FAQ

What size should my WordPress logo be?

Export at roughly twice its on-screen display width so it stays sharp on retina screens — if it shows at 200px, save it around 400px wide. Then set the displayed width in the Customizer or logo block. Keep the file small (well under 50KB for raster, a few KB for SVG) so it doesn't slow your pages.

Can I upload an SVG logo to WordPress?

Not by default — WordPress blocks SVG uploads for security reasons, since SVGs can carry scripts. A reputable plugin that enables and sanitizes SVGs lets you upload them safely. SVG is ideal for logos because it stays crisp at any size and the files are tiny.

My logo looks blurry — how do I fix it?

Almost always it's a too-small source file being stretched. Re-export at about twice the display size, or switch to an SVG that can't blur at all. Also check you're not uploading a small image and forcing it wider with the theme's width setting.

Why isn't my new logo showing up?

First clear your caching plugin, host cache, and any CDN, then hard-refresh. If it still shows the old logo, your theme may have its own logo field that's overriding Site Identity — check the theme's settings panel and update it there too.

Is the logo the same as the favicon?

No. The logo is the larger header image; the favicon (Site Icon) is the tiny tab/bookmark icon. They're set in the same panel, and a simple square logo can serve as both — but a detailed wordmark turns to mush at favicon size, so a simplified icon or monogram usually works better there.

One note to close on: this is a practical how-to, not financial or business advice. Themes and setups vary, so make changes on a copy when you can and confirm each tweak before trusting it in production.