How to Change Favicon in WordPress
A step-by-step guide to adding a custom favicon (browser icon) to your WordPress website. Covers the Settings screen, the Customizer, the Site Editor for block themes, plugins, and theme code — plus recommended sizes, file formats, and troubleshooting when your favicon won't appear.
Before you start: create your favicon
You need a favicon file before you can upload it to WordPress. If you already have one, skip to the instructions below. If not, you can create one in seconds using EasyFavicon — pick an emoji, type a letter, or upload a logo, choose a background, and download a ready-to-use favicon PNG sized correctly for WordPress.
- Dimensions: at least 512×512px. WordPress requires a minimum of 512×512px for the Site Icon. Upload this size and WordPress automatically generates the smaller variants.
- Format: PNG. PNG is ideal for WordPress — it supports transparency and produces sharp edges at small icon sizes.
- Keep it simple. Favicons display at 16×16px in browser tabs. Complex images and small text become unreadable. A bold icon, letter, or emoji works best.
- Use high contrast. A dark icon on a light background (or vice versa) ensures visibility in both light and dark browser themes.
Method 1 — Settings → General → Site Icon (WordPress 6.5+)
WordPress 6.5 added the Site Icon to the General Settings screen, making it the quickest place to set your favicon. If you're running WordPress 6.5 or newer:
- Open Settings. From your WordPress dashboard, go to Settings → General.
- Find Site Icon. Scroll down to the Site Icon section. You'll see the current icon (a default placeholder if you haven't set one yet).
- Choose or upload your image. Click Choose a Site Icon and either select an existing image from the media library or upload a new one. WordPress requires a square image at least 512×512px.
- Crop if needed. If your image is larger than 512×512px, WordPress asks you to crop it to a square. Drag the crop handles and click Select.
- Save Changes. Scroll to the bottom of the Settings page and click Save Changes. Your new favicon is live.
Quick path:
Settings → General → Site Icon → Choose Image → Save Changes
Method 2 — Appearance → Customize → Site Identity (classic themes)
If you're using a classic WordPress theme, the Site Icon is also available in the Customizer. This path works on all WordPress versions with classic themes and is just as quick:
- Open the Customizer. From your WordPress dashboard, go to Appearance → Customize.
- Select Site Identity. In the Customizer sidebar, click Site Identity.
- Upload your Site Icon. Under Site Icon, click Select site icon. Upload or choose a square image (512×512px or larger) and crop if prompted.
- Publish. Click Publish at the top of the Customizer to save your changes.
Quick path:
Appearance → Customize → Site Identity → Select Site Icon → Publish
Using a block theme (Twenty Twenty-Four, Twenty Twenty-Five, etc.)?
Block themes don't use the Customizer. Instead, go to Appearance → Editor to open the Site Editor, then navigate to Styles → Settings → Site Icon to upload your favicon.
Method 3 — Using a plugin
If your theme hides the Site Icon option, or you want extra control (like SVG support, separate Apple touch icons, or per-device variants), a favicon plugin is a straightforward alternative:
- Go to Plugins. From your WordPress dashboard, click Plugins → Add New.
- Search for a favicon plugin. Popular options include Favicon by RealFaviconGenerator and All in One Favicon. Both are free and well-maintained.
- Install and activate. Click Install Now, then Activate.
- Upload your favicon. Open the plugin's settings page, upload your icon image, configure the sizes you need, and save.
Method 4 — Theme code (functions.php + wp_head)
For full control — including SVG favicons that the uploader won't accept — add the favicon link tags directly to your theme's <head> using a wp_head hook. Upload your icon files to your theme folder and add this to functions.php:
function my_custom_favicon() {
$dir = get_stylesheet_directory_uri();
echo '<link rel="icon" type="image/png" sizes="32x32" href="' . $dir . '/favicon-32x32.png">' . "\n";
echo '<link rel="icon" type="image/png" sizes="192x192" href="' . $dir . '/icon-192.png">' . "\n";
echo '<link rel="apple-touch-icon" sizes="180x180" href="' . $dir . '/apple-touch-icon.png">' . "\n";
echo '<link rel="manifest" href="' . $dir . '/manifest.webmanifest">' . "\n";
}
add_action('wp_head', 'my_custom_favicon');Prefer editing templates directly? You can paste the same <link> tags directly inside the <head> of your theme's header.php — but the functions.php approach is cleaner and survives theme updates better. Always use a child theme so your changes aren't overwritten when the parent theme updates.
Recommended favicon size and format for WordPress
| Property | Recommendation | Notes |
|---|---|---|
| Dimensions | At least 512×512px | WordPress requires this minimum; upload larger and crop down |
| Format | PNG (preferred) or ICO | PNG supports transparency and compresses well |
| File size | Under 100KB | Smaller files load faster; oversized images may fail silently |
| Shape | Square | Non-square images will be cropped to fit |
| Auto-generated sizes | 32×32, 180×180, 270×270, 192×192 | WordPress generates these automatically from your upload |
Troubleshooting: WordPress favicon not showing
It's common for a new favicon to take a few minutes to appear — and sometimes it feels like it's not working at all. Here are the most common fixes, ordered by how often they solve the problem:
1. Hard-refresh your browser
Browsers cache favicons very aggressively. A hard refresh forces the browser to re-download everything:
- Chrome / Firefox / Edge: Ctrl + Shift + R (Windows) or Cmd + Shift + R (Mac)
- Safari: Hold Option (⌥) and click the refresh button, or Cmd + Option + R
2. Clear your browser cache
If a hard refresh doesn't work, clear the full cache. In Chrome: go to Settings → Privacy and Security → Clear browsing data → select “Cached images and files” → Clear data. Then reload your site.
3. Clear WordPress and CDN caches
If you use a caching plugin like WP Rocket, W3 Total Cache, or LiteSpeed Cache, purge all caches. If your site uses Cloudflare or another CDN, purge the CDN cache too. Cached pages can serve the old favicon link tags for hours.
4. Check that your theme supports Site Icons
WordPress themes must call wp_head() in their header.php file for the Site Icon to work. Open your theme's header.php and look for <?php wp_head(); ?> inside the <head> tag. If it's missing, add it — this function outputs the favicon link tags and is essential for most plugins and features.
5. Check the file format and size
Make sure your file is a PNG or ICO, not a JPG, GIF, or SVG (the built-in uploader rejects SVGs). The image must be at least 512×512px. If it's larger than 100KB, compress it — an oversized file can fail to upload silently.
6. Test in an incognito window
Open your site in a private/incognito window or on a different browser. If the favicon appears there, the issue is your main browser's cache, not WordPress. Google can take 1–14 days to update favicons in search results.
WordPress vs other platforms
Building on a different platform? We have guides for those too:
- How to change favicon on Squarespace — step-by-step for both 7.1 and 7.0
- How to install a favicon — universal guide covering HTML, Next.js, and more
- Favicon sizes guide — all the dimensions you need for every platform
- What is a favicon? — the complete overview for beginners
Ready to create your WordPress favicon? Pick an emoji, type a letter, or upload your logo — all processed in your browser, nothing uploaded to a server.
Generate your WordPress favicon →