The Problem
Your WordPress site shows the theme’s default placeholder logo and a generic browser-tab icon. Visitors see neither your brand mark nor your favicon when they bookmark the page. WordPress includes a built-in Site Identity panel that handles both. The fix takes minutes if your image files are ready: a logo for the header and a square site icon for browser tabs and home screens. This tutorial walks through preparing the right image sizes, uploading them through the Customizer or Site Editor, and verifying the result on every device.
What You’ll Need
- WordPress version: 4.3 or higher for site icon support; 5.9 or higher for the Site Editor logo block
- Permissions needed: Administrator role to access the Customizer and Media Library
- Time to complete: 10-15 minutes once your logo and icon files are prepared
- Difficulty level: Beginner
- Prerequisites: A logo image (PNG or SVG, transparent background recommended) and a square site icon image of at least 512×512 pixels
Step 1: Prepare Logo and Favicon Image Files
Open your logo in an image editor like Photoshop, Affinity, or Figma. Export a horizontal version sized 400-600 pixels wide for the header. Save it as a PNG with a transparent background. Create a separate square version for the favicon. The square crop should focus on the icon mark, not the full wordmark. Export the square at 512×512 pixels minimum. Save both files with clear names like logo.png and site-icon.png. WordPress generates smaller sizes from each image automatically.
[SCREENSHOT: logo-export-sizes]
Step 2: Open Site Identity in the Customizer
Go to Appearance → Customize in your WordPress dashboard. Click Site Identity in the left sidebar. The panel shows fields for Logo, Site Title, Tagline, and Site Icon. Most modern themes pull the logo here automatically. If your theme uses the Site Editor instead of the Customizer, jump to Step 5 for the block-theme path. Click Select logo to open the Media Library upload screen.
[SCREENSHOT: customizer-site-identity-panel]
Step 3: Upload Your Logo
Click Upload Files in the Media Library popup. Drag your logo.png into the drop zone. Wait for the upload to finish. Click Select. WordPress shows a crop screen if your image is larger than the theme’s logo container. Drag to position the crop or click Skip Cropping to keep the original. Click Crop Image or Skip Cropping. The Customizer preview updates immediately with your logo in the header. Click Publish at the top to save.
[SCREENSHOT: customizer-logo-upload]
Step 4: Set the Site Icon (Favicon)
Scroll down in the Site Identity panel to the Site Icon section. Click Select site icon. Upload site-icon.png through the Media Library. WordPress requires a minimum of 512×512 pixels for site icons. The Customizer shows two previews: the browser tab icon and the home screen icon. Click Publish. WordPress automatically generates the favicon.ico, the apple-touch-icon, and the Android home-screen icon from your single uploaded image.
[SCREENSHOT: customizer-site-icon-upload]
Step 5: Add the Logo Block in Site Editor
For block themes like Twenty Twenty-Five, open Appearance → Editor. Click the Templates section and edit the Header template part. Add a Site Logo block where you want the logo to appear. Click the placeholder and upload your logo file. Use the toolbar to resize. Add a Site Title block beside it if your theme expects one:
What this does: tells WordPress to render the site logo at 60-pixel height and link it to the home page.
<!-- wp:site-logo {"width":180} /-->
<!-- wp:site-title /-->Click Save. The logo appears in the header on every page that uses this template.
[SCREENSHOT: site-editor-logo-block]
Step 6: Verify on Mobile and Browser Tabs
Open the site in a new browser tab. Confirm the logo appears in the header and the favicon shows in the tab title. Open the site on a phone in Chrome or Safari mobile. Add the site to the home screen and confirm the icon shows your branded image. Test in Firefox, Edge, and Safari to verify cross-browser rendering. If the favicon still shows the old image, clear the browser cache — favicons are cached aggressively. For finer header control, our custom CSS tutorial shows how to size and position the logo with a few CSS rules.
[SCREENSHOT: favicon-browser-tab]
Troubleshooting
Error: The Customizer says “Site Icon must be at least 512 by 512 pixels”.
Fix: Resize your image in Photoshop, Figma, or any image editor before uploading. Save the larger version and try again.
Error: Logo appears too large or stretches across the header.
Fix: The theme has no max-width set on the logo container. Add a CSS rule under Customize → Additional CSS: .site-logo img { max-width: 220px; }.
Error: Favicon does not update in the browser tab after upload.
Fix: Browsers cache favicons for days. Open DevTools, right-click the refresh button, and pick Empty Cache and Hard Reload.
Error: Site Identity panel does not show a logo upload field.
Fix: The active theme does not declare logo support. Switch themes or use the Site Editor’s Site Logo block instead (Step 5).
Quick Recap
- Prepare a horizontal PNG logo (400-600 px wide) and a square site icon (512×512 px minimum)
- Use Customize → Site Identity for classic themes, the Site Editor for block themes
- WordPress generates favicon, apple-touch-icon, and home-screen icon from a single square image
- Test on mobile, in Chrome, Firefox, and Safari to confirm cross-browser rendering
- For header polish, our Elementor Pro review covers visual header builders. Reference: the custom logo theme guide on developer.wordpress.org