Favicon for WordPress: Add a Site Icon (No Code)
By AZ Utils Editorial · · 7 min read
Adding a favicon to WordPress is refreshingly easy — no code required. WordPress calls it the "Site Icon," and you can set it from the built-in Customizer in a couple of minutes. This guide shows you exactly how to add a favicon for WordPress, the right image to use, and how to troubleshoot it if it doesn't appear.
It's for bloggers, business owners and anyone running a WordPress site.
Key Concepts: WordPress Site Icon
WordPress has a native Site Icon feature that doubles as your favicon and app icon. You upload one square image, and WordPress automatically generates and serves the various sizes browsers and devices need — so you usually don't touch any HTML.
In short: In WordPress, add a favicon via Appearance → Customize → Site Identity → Site Icon, uploading a square image of at least 512×512 pixels. WordPress generates the sizes for you.
Step-by-Step: Adding a Favicon in WordPress
Method 1 — The Customizer (recommended)
- Prepare a square image (at least 512×512). Use the Favicon Generator to create a clean source if needed.
- In your dashboard, go to Appearance → Customize.
- Open Site Identity.
- Under Site Icon, click Select site icon and upload your image.
- Crop if prompted, then Publish.
Method 2 — Full Site Editing themes
On block themes, go to Settings → General or the editor's site settings, where the Site Icon option also appears.
Method 3 — A plugin
SEO or favicon plugins can manage the icon too, but the built-in Site Icon is enough for most sites.
Try Our Free Favicon Generator
Create the perfect square source image for WordPress with our free Favicon Generator — then upload it as your Site Icon.
- ✅ Clean 512×512 source + all sizes
- ✅ Small-size preview
- ✅ Works for any CMS
- ✅ Free, in your browser
Real-World Examples
Example 1 — A blog
A blogger uploads a 512px logo mark as the Site Icon; tabs and mobile bookmarks instantly show the brand.
Example 2 — WooCommerce store
A shop sets its Site Icon so customers recognise its tab among many during checkout comparisons.
Example 3 — Block theme
A site on a modern block theme sets the icon from Settings → General, with the same result.
Common Mistakes to Avoid
- Uploading a non-square or under-512px image, causing cropping or blur.
- Using a detailed logo unreadable at 16px.
- Expecting an instant change — browser caching can delay it.
- Adding manual favicon code that conflicts with the Site Icon.
Best Practices
- Use a 512×512 square, simple, on-brand image.
- Prefer the built-in Site Icon over manual code.
- Hard-refresh to see changes if caching delays them.
- Follow general Favicon Best Practices for design.
Frequently Asked Questions
How do I add a favicon in WordPress?
Go to Appearance → Customize → Site Identity → Site Icon, upload a square image of at least 512x512 pixels, crop if needed, and publish. WordPress generates the required sizes automatically.
What size should a WordPress Site Icon be?
At least 512x512 pixels and square. WordPress recommends this size so it can generate all the smaller favicon and app-icon sizes cleanly.
Do I need a plugin to add a favicon in WordPress?
No. The built-in Site Icon feature handles it. Plugins are optional and mainly useful if your theme lacks the option or you want extra control.
Why isn't my WordPress favicon showing?
It's usually browser caching. Hard-refresh or clear the cache, and confirm you published the Customizer change.
Where is the Site Icon option on block themes?
On full site editing themes, look under Settings → General or the site settings within the editor, where the Site Icon option appears.
Conclusion
WordPress makes favicons easy: upload one square Site Icon and it handles the rest. Start with a clean 512px source, set it in the Customizer, and hard-refresh to confirm. Your site looks branded across tabs and devices with zero code.
👉 Create your WordPress favicon now →
Related Resources
- Favicon Generator: Complete Guide — the full how-to
- Favicon for Shopify — the Shopify equivalent
- Favicon Sizes Guide — sizes explained
- What Is a Favicon — the basics
