Setting a favicon in WordPress gives your site a professional identity and improves brand recognition in browser tabs. This quick visual marker helps visitors recognize your site instantly and adds a layer of polish to your overall design.
A favicon is also a small but important part of user experience, especially when your site is saved as a bookmark or shared in a tab tray. The process is straightforward in WordPress, whether you use the built-in Site Editor or a popular plugin.
| Method | When to Use | Difficulty | Best For |
|---|---|---|---|
| WordPress Site Editor | Full site editing is active | Easy | Block themes with global site templates |
| Customizer → Site Identity | Using a classic theme with the Customizer | Easy | Quick upload with live preview |
| Plugin (e.g., Site Icon or Yoast SEO) | Need more control or legacy support | Easy | Advanced settings, social and touch icons |
| Manual code via theme functions | Custom development or no plugin preference | Intermediate | Full control and performance optimization |
Uploading Your Favicon File
Before you assign a favicon, you need the correct image file. WordPress expects a square icon in one of the common sizes, most commonly 512x512 pixels or higher so it can be scaled down cleanly.
You can prepare your favicon using any image editor and save it as a .ico file for maximum compatibility, though modern WordPress also accepts .png files. Keep the design simple, with clear text or strong shapes, because it will shrink very small on screens.
Assigning the Favicon in Site Editor
If your theme supports full site editing, you can set the favicon directly in the Site Editor without installing extra plugins.
- Open the Site Editor from Appearance → Editor.
- Access Site Settings from the Settings panel or top toolbar.
- Upload your image in the Site Identity or Favicon section and publish the changes.
Assigning the Favicon in Customizer
For themes that still use the Classic Editor or a block theme with Customizer support, the Site Identity section is the standard location.
- Navigate to Appearance → Customize.
- Open Site Identity and click Select Site Icon or Upload.
- Adjust any cropping, then publish the changes to make the favicon live.
Using Plugins for Favicon Management
Plugins add flexibility, such as uploading multiple sizes, attaching a fallback SVG, or integrating SEO metadata. A Site Icon option or an SEO plugin like Yoast SEO can handle favicon and touch icon settings in one place.
With a plugin, you can often auto-generate touch icons for iOS, Android, and Windows devices, ensuring consistent appearance across platforms and browsers.
Final Checks for Favicon Visibility
After you set the favicon, verify it appears in the right places and under different conditions.
- Check the favicon in browser tabs, bookmarks, and mobile home screens.
- Test on desktop and mobile devices with both light and dark mode if supported.
- Confirm the image scales well at small sizes and remains legible.
- Verify that the correct mime type is served and no broken link errors appear in console.
FAQ
Reader questions
Will changing the favicon break my site or hurt SEO?
No, changing the favicon is a frontend-only visual update and does not affect content, rankings, or site performance. Just make sure the file is accessible and not excessively large to avoid slow loading.
What file formats does WordPress accept for a favicon?
WordPress accepts .ico, .png, .jpg, and .svg in many cases, though .ico remains the most reliable format for browser compatibility across all devices and legacy systems.
How do I clear caching plugins or browser cache after updating the favicon? Clear any caching plugin storage, then hard refresh your site with Ctrl+F5 or Cmd+Shift+R. If you use a CDN, purge its cache as well so visitors see the new icon immediately. Can I use a transparent or animated favicon?
You can use PNG with transparency, but some older browsers may not render it correctly. Animated favicons such as GIF are not recommended because they can be distracting and are not supported in all browsers.