Logo and site identity

Header and footer

#Where the logo goes

Two levels, and they are confused constantly.

The global logo is at AppearanceCustomizeGeneralBranding and is used everywhere.

The header logo is in the navigation settings, and you only need it when the top of the site should carry a different file.

In the header, a source switch decides between them. While it is set to global, the header fields are empty because they are not being used, not because something is broken.

Set the logo width explicitly. Your file can be any size, and the header height does not depend on it.

#Logos and color schemes

Every place takes a pair: one file for the light scheme and one for the dark. The reason is simple: a dark logo disappears on a dark background.

If your logo is light or monochrome to begin with, one file is enough.

Separate files exist for the desktop header, the mobile header, and the slide-out mobile menu. In a narrow header you usually want the mark without the wordmark, or it is either unreadable or it pushes everything else out.

Use SVG, or PNG with a transparent background at generous density. A logo that looks soft on a high-density screen is the most common avoidable flaw on a new site.

The site name is shown as text. That is a working option rather than a placeholder: the name takes the theme typography and looks deliberate.

The site name and tagline are edited in the standard WordPress settings, not in the theme.

#The site icon

The icon in the browser tab and on a phone's home screen is a standard WordPress feature. Set it at AppearanceCustomizeSite Identity, using a square image of at least 512 by 512 pixels.

#The fallback image

While you are in the branding section, set the thumbnail fallback: the image used for posts with no featured image. It saves your listings from empty cards on the day you forget one.

My logo looks blurry

The file is smaller than the space it is displayed in. Upload a version at twice the display width, or an SVG.

The dark logo shows in light mode

The two fields are swapped. The light scheme field holds the logo used on a light background, which is usually the darker file.

Last updated

Was this article helpful?

FIND THE ONE THAT FITS YOUR PROJECT

Import a demo, swap the content, adjust the layout. Modern WordPress under the hood, fast even when the site fills up.