WordPress Logo and Header Logo Sizes

The Short Answer

WordPress has no single required logo size. Your active theme sets the size. Classic themes declare a target width and height for the custom logo, and the Customizer uses those values when it offers to crop your upload. Block themes place the logo in a Site Logo block, which has its own display width setting in the Site Editor. The practical answer is to find the dimensions your theme expects, export the logo at about twice that display size so it stays sharp on high-density screens, and check that it is still legible at the size it actually appears.

No theme-specific pixel dimensions were supplied for this article. Any exact figure would depend on the theme and version you use, so this guide explains how to find the right numbers instead of giving a universal value.

Searches for a WordPress header image size and a WordPress logo size often blur together, but WordPress treats these as separate features with separate size rules.

Asset | What it is | Where size is defined | Typical source artwork

Custom logo / Site Logo | Your brand mark, usually in the header beside or in place of the site title | Theme support settings (classic) or Site Logo block width (block themes) | Logo exported from vector master, usually transparent PNG

Header image | A wide decorative or photographic banner across the header | Theme's custom header settings; the Customizer shows suggested dimensions | Photograph or wide graphic, often JPEG

Site Icon | The favicon and app icon shown in browser tabs and bookmarks | WordPress core; it asks for a square image of at least 512 by 512 pixels | Simplified square version of the logo mark

If your theme has no logo option and only offers a header image, a logo placed inside a header image is just part of a photo-sized raster. It will scale and crop with the banner, so small text in the logo can become unreadable or be cut off on narrow screens. Where a dedicated logo setting exists, use it.

How WordPress Decides Logo Dimensions

In classic themes, the developer enables the logo feature in the theme's functions file and can supply a height, a width, and whether either dimension is flexible. The snippet below shows the structure; the values are placeholders, not recommendations.

add_theme_support( 'custom-logo', array(
    'height'      => HEIGHT_IN_PX,
    'width'       => WIDTH_IN_PX,
    'flex-height' => true,
    'flex-width'  => true,
) );

When a dimension is fixed, the Customizer prompts you to crop the upload to that aspect ratio. When both are flexible, you can skip cropping and keep your logo's natural proportions. The declared values are a target for the uploaded file, not a promise of display size. The theme's CSS decides how large the logo appears in the header, and many themes scale it down on smaller screens.

In block themes, the Site Logo block stores the image and a width you set in the editor. The image keeps its aspect ratio, so the main decision is how wide the logo should appear. Upload a file large enough to look sharp at that width.

Finding the Right Size for Your Theme

Open the logo setting in the Customizer (Site Identity) or the Site Logo block in the Site Editor and read any suggested dimensions shown near the upload control.
Check the theme's documentation, which often states recommended logo and header image dimensions.
On the live site, use your browser's developer tools to inspect the logo and note its rendered width and height at desktop and mobile widths.
Use the largest rendered size as your display target, then export at roughly twice those pixel dimensions for high-density screens.

Exporting at double the display size is a general practice, not a WordPress requirement. It accounts for screens that use more than one physical pixel per CSS pixel. Larger files beyond that add page weight without improving visible quality.

Minimum Legible Size in the Header

The pixel count of the uploaded file does not determine legibility. The size at which the logo actually renders does. Header logos are often displayed quite small, especially in mobile headers and sticky headers that shrink on scroll. A horizontal lockup with a wordmark and tagline can become unreadable at those sizes even when the file is high resolution.

Preview the logo at its smallest rendered size, including mobile and any shrinking sticky header.
If a tagline or fine lettering breaks down, use a simplified variant without the tagline for the web header.
Check that thin strokes and tight letter spacing do not fill in or disappear when scaled down.
For very tight spaces, consider a compact mark or stacked version instead of shrinking the full horizontal logo.
Confirm contrast against the header background, including any background color changes on scroll or in dark mode.

No measured minimum legible dimensions were supplied for this article. Treat the threshold as something to verify visually on your own header rather than a fixed number.

Preparing the File From Vector Artwork

Keep the master logo as vector artwork in a source file such as AI, EPS, PDF or SVG with live paths. Export web versions from that master instead of resizing an existing raster, so every export is drawn cleanly at its target size. A file with a vector extension is not automatically editable vector artwork, though. It may contain an embedded raster image, so check that the logo is built from actual paths before relying on it as a master.

For WordPress uploads, a PNG with a transparent background is the most broadly compatible choice for logos with flat color and sharp edges. Trim excess transparent space before exporting, because padding inside the image makes the visible logo smaller than the theme's sizing suggests. Set the canvas tightly around the artwork and add spacing with the theme's layout instead.

SVG would scale perfectly at any header size, but WordPress core does not accept SVG uploads by default. SVG files are XML and can carry scripts, so enabling them usually means adding a plugin or code that sanitizes uploads. If you go that route, export a clean SVG with text converted to outlines, or with fonts handled appropriately, and test that the theme sizes it correctly. Some themes size logos from the image's intrinsic dimensions, which an SVG may not declare in a way the theme expects.

Summary

Your theme determines the right WordPress logo size. Find the dimensions it suggests or the size it actually renders, export from your vector master at about twice that size as a trimmed transparent PNG, keep header images and the square site icon as separate assets, and confirm the logo stays readable at its smallest on-screen size.