Logo and site identity
#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.
#When there is no logo
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?
- Basic settings in the Customizer
- Set up dark mode
- Theme Options: the advanced settings panel
- General: site behavior
- General: optimization
- SPA and page transitions
- Content zones and insertions
- Blog: how posts are presented
- Before you go: the exit-intent banner
- Floating card: a post that follows the reader
- Marketing surfaces and analytics
- Accessibility settings
- Object-level settings
- Category fields
- Tag fields
- Author profile fields
- Page fields and per-page layout
- Post fields
- Widget areas
- Writing a post in Verba
- Post formats
- Building a post from a block pattern
- Building a post with an Elementor template
- Post header styles
- Reading aids: how the four blocks work
- TL;DR summary
- Key points
- Table of contents
- Summarize with AI
- Reading bar
- Sharing: placements, styles, and copy link
- The share block in the post footer
- Continuous reading: the next post without a click
- Likes, views, and comment voting
- Related posts and read also
- Sources and citations
- Splitting a long post across several pages
- Comments
- Formatting the body of an article
Resources