How Do I Set Up a Proper Favicon and Site Icon in WordPress?
How to Set It Up
Under Appearance → Customize → Site Identity (classic themes) or the equivalent Global Settings area for a block theme, uploading a square image (WordPress recommends at least 512x512 pixels for best quality across all the sizes it generates) sets the Site Icon, which WordPress then automatically renders as the browser tab favicon, bookmark icon, and mobile home-screen icon across the site.
Things Worth Getting Right
- Use a genuinely square image as the source, since a non-square image will be cropped in a way that may not look right across all the different icon contexts it's used for.
- A simple, recognizable design works best at small sizes — a favicon is often displayed extremely small (browser tab size), so overly detailed logos can become an illegible blur at that scale.
- Caching can delay the new icon appearing after being set, both browser-side caching and any site-level caching, so a hard refresh or private browsing window is worth trying if the change doesn't appear to have taken effect.
- Some older browsers or specific platforms occasionally look for a traditional
favicon.icofile at the site root as a fallback, which WordPress's Site Icon feature doesn't always fully replace — worth checking if an icon isn't appearing correctly on a specific older platform.
Setting This Up Properly
- Prepare a square, simple, recognizable image at a high enough resolution.
- Set it as the Site Icon via the Customizer or Site Editor Global Settings.
- Clear caches and test across a few browsers to confirm it displays correctly.
Need branding elements like favicons set up consistently across your site? See WordPress bug fix.