The moment you launch a WordPress site, the header tells visitors whether this is a real project or a work in progress. A missing logo and a blank browser tab icon are hard to ignore — they signal unfinished, even if the content is solid and the layout is clean.
Getting a logo and favicon in place early does not require a designer or a budget. It requires a clear, readable image and knowing where to upload it. Both are straightforward once you know what you are actually doing and why certain file formats and sizes matter.
In most sites I build, the logo and favicon go in on day one — not because they are the most important thing, but because everything else looks more considered once they are there.
Quick Answer
To add a logo and favicon to your WordPress site: design a clean logo in Canva and export it as a transparent PNG, create a simplified square version at 512×512 pixels for the favicon, then upload the logo via Appearance → Customize → Site Identity (classic theme) or Appearance → Editor → header template (block theme), and set the favicon under Settings → General → Site Icon.
Why This Matters
Your logo appears in the site header on every page. It is often the first visual a visitor registers, and it sets the tone for how seriously they take the rest of the content. A missing logo replaced by a site name in a default font is not neutral — it reads as incomplete.
The favicon is smaller but appears more often: browser tabs, bookmarks, mobile home screen shortcuts, and next to your URL in Google search results. Without one, Chrome and Firefox display a generic grey globe icon. It is easy to overlook, but it affects how recognisable your site is once a visitor has multiple tabs open.
Neither element needs to be elaborate. Something clean and consistent does the job. You can refine both as your brand develops — but placeholder branding costs you more than a simple, functional version done well from the start.
Step-by-Step Instructions
Step 1: Design a Simple Logo
Start with Canva — it is free, works in a browser, and has enough control for a functional site logo. You do not need to start from a template. A blank canvas with your site name in a clear font is often the right starting point.
The simplest logos for new WordPress sites are one of three things:
- Site name in a clean, readable font
- Site name alongside a simple icon
- A standalone icon that represents the site’s focus
Stick to one or two colours that match your site palette — see how to choose website colours and fonts if you have not settled on those yet. Avoid script or decorative fonts. They look interesting at large sizes but become unreadable in the header at normal scale.
Export settings: PNG format with a transparent background. Width between 1,000 and 2,000 pixels — the theme scales it down automatically. A transparent background means the logo adapts cleanly to any header colour.
Step 2: Create a Favicon Version
Your full logo almost certainly will not work as a favicon. Most logos are wider than they are tall and contain text that becomes unreadable at 32×32 pixels. You need a separate, simplified square version.
Good favicon options:
- The first letter of your brand name in a strong font
- Your initials if the brand name is multiple words
- A simple icon already used in the logo
Required size: 512×512 pixels. WordPress generates all smaller sizes automatically from this. Export as PNG. If the icon is light-coloured, add a solid or slightly contrasting background so it stays visible against light browser chrome.
In my experience, a single bold letter on a coloured background is one of the most effective favicon approaches — instantly recognisable even at tab size.
Step 3: Upload Your Logo
Where you upload the logo depends on your theme type.
Classic theme (Customizer):
- Go to Appearance → Customize
- Open Site Identity
- Click Select Logo
- Upload your PNG and adjust the crop if prompted
- Click Publish
Block theme (Site Editor):
- Go to Appearance → Editor
- Open the Header template
- Click the Site Logo block
- Upload your PNG via the block toolbar
- Save the template
Step 4: Set Your Favicon
From WordPress 6.5 onwards, the site icon lives under Settings → General.
- Go to Settings → General
- Scroll to Site Icon
- Click Choose a Site Icon
- Upload your 512×512 PNG
- Crop if prompted, then click Set as Site Icon
- Click Save Changes
On older setups or classic themes still running WordPress below 6.5, the site icon may be under Appearance → Customize → Site Identity instead. For full technical background on how WordPress handles the favicon, see the WordPress favicon documentation.
Step 5: Check the Results
Open the site in a private browsing window — this bypasses cached assets — and do a hard refresh. Check three things:
- The favicon appears in the browser tab (may take a minute to propagate)
- The logo is visible and correctly proportioned in the header on desktop
- The logo does not break the mobile header layout
I always check mobile before closing out. A logo that looks fine at 1,400px wide can push the mobile nav off-screen if the image dimensions are not sensible.
Practical Tips
Keep it simple to start. A text-based logo with a clear font and one accent colour will outlast anything overcomplicated. You can always upgrade the design later — simple is not a compromise, it is a deliberate choice.
Always use a transparent background. A PNG with no background blends into the header whatever colour your theme uses. A white-background logo on a dark header looks like a mistake even if it was not.
Avoid logos that are extremely wide. A very horizontal logo causes problems at mobile widths. Keep the aspect ratio closer to square or mildly horizontal — something around 3:1 width to height works across most themes.
Match your site palette. The logo should use the same colours you use throughout the site. Think about how your overall visuals work together — the approach in choosing website images and visuals applies here too.
Test the favicon in both light and dark browser chrome. Some browsers switch between light and dark automatically depending on system settings. If your favicon icon disappears against a light tab bar, add a subtle coloured background to the icon itself.
Common Mistakes
Uploading the full logo as the favicon. It will be unreadable at tab size. Always create a dedicated square version with a single simplified element.
Using a font that is not legible at small sizes. Decorative or script fonts rarely survive scaling. Test the logo at 200px wide before committing — if it is hard to read there, it will be worse in the header at 150px on a phone.
Skipping the favicon entirely. It is easy to forget when you are focused on content and layout, but the missing favicon in Google search results looks unprofessional. It takes five minutes to set up.
Not checking mobile after upload. Logo width that looks proportional on a wide screen can dominate the entire mobile header. Always check, always fix before moving on.
When to Use This vs Alternatives
A simple DIY logo and favicon is the right approach when you are launching a new site, when branding is not yet finalised, or when budget does not include a designer at this stage. It gets something credible in place without delay.
A different approach makes sense when you are building a business brand with long-term recognition goals, when you need consistent logo variations across print, social, and merchandise, or when you are working with a designer as part of a full identity project.
For most WordPress sites — especially content sites, blogs, and service businesses — a clean functional logo is entirely sufficient. Logo and favicon are just two parts of how the overall site looks; when you are ready to think through the wider design picture, the guide to choosing your website layout is a practical next step, and the step-by-step guide to building a WordPress website covers the full sequence from domain to launch.
Conclusion
A logo and favicon do not need to be elaborate to do their job. A clean header image and a simple square icon are enough to make the site feel intentional — get both in place on day one, keep them simple, and revisit the design once the rest of the site is established.
Etienne Basson works with website systems, SEO-driven site architecture, and technical implementation. He writes practical guides on building, structuring, and optimizing websites for long-term growth.