How to Add a Favicon to Your WooCommerce Store (WordPress) in 2025

WordPress Site Icons: More Than Just Favicons

In WordPress, what most people call a "favicon" is actually part of a broader feature called the Site Icon. When you set a Site Icon, WordPress doesn't just create a simple favicon.ico file - it generates an entire suite of icons optimised for different devices and contexts. Your WooCommerce store benefits from this comprehensive approach, ensuring your brand appears crisp and professional everywhere from browser tabs to mobile home screens.

The beauty of WordPress's implementation is its simplicity. Upload one high-quality image, and WordPress handles all the technical complexity behind the scenes. No need to create multiple files or write code - perfect for store owners who want professional results without the technical hassle.

Before You Start: Requirements

Setting up your WooCommerce favicon requires just a few things:

WordPress 4.3 or higher: Site Icon feature is built into core (you're almost certainly running a newer version)
Admin access: You'll need administrator privileges to access the customiser
A square image: At least 512×512 pixels for best results
PNG or JPEG format: PNG is preferred for logos with transparency

Pro tip: Start with a 1024×1024px image if possible. WordPress will create all smaller sizes, and having extra resolution ensures future compatibility as displays continue to improve.

Method 1: Using WordPress Settings (Easiest)

Since WordPress 6.5, you can add your site icon directly from the Settings menu - no need to navigate through the customiser:

Step 1: Access General Settings

From your WordPress dashboard, navigate to Settings -> General. This opens the main configuration page for your site.

Step 2: Find Site Icon Section

Scroll down until you see the "Site Icon" section. If you haven't set an icon yet, you'll see a placeholder image and a button labelled "Select Site Icon".

Step 3: Upload Your Icon

Click "Select Site Icon" to open the Media Library. Either choose an existing image or upload your new favicon by dragging it into the window or clicking "Upload Files".

Step 4: Crop If Needed

WordPress will prompt you to crop your image to ensure it's perfectly square. Adjust the selection box if needed, then click "Crop Image". If your image is already square, you can skip cropping.

Step 5: Save Changes

Scroll to the bottom of the Settings page and click "Save Changes". Your new favicon is now live!

Method 2: Using the WordPress Customiser

The traditional method through the Customiser still works perfectly and offers a live preview:

Step 1: Open the Customiser

From your dashboard, go to Appearance -> Customize. This launches the live theme customiser with your site preview on the right.

Step 2: Navigate to Site Identity

Click on "Site Identity" in the customiser menu. This section controls your site title, tagline, and logo settings.

Step 3: Set Your Site Icon

Scroll down to find the "Site Icon" section. Click "Select Site Icon" to choose or upload your favicon image.

Step 4: Preview and Publish

The customiser shows a preview of how your icon will appear in browser tabs and as an app icon. Once satisfied, click "Publish" to make the changes live.

Method 3: For Block Theme Users

If your WooCommerce store uses a modern block-based theme (Full Site Editing), the process is slightly different:

Step 1: Open Site Editor

Navigate to Appearance -> Editor to open the Site Editor interface.

Step 2: Add Site Logo Block

If not already present, add a Site Logo block to your header template. Click the plus icon and search for "Site Logo".

Step 3: Configure Site Icon

With the Site Logo block selected, look for the "Use as site icon" toggle in the block settings panel (right sidebar). Upload your logo and enable this option.

Step 4: Save Changes

Click "Save" in the top toolbar. Your site icon will now appear across your WooCommerce store.

Troubleshooting Common Issues

Favicon Not Showing?

The most common culprit is caching. WordPress sites often use multiple caching layers:

1Browser cache: Clear it with Ctrl+Shift+Delete (Windows) or Cmd+Shift+Delete (Mac)
2WordPress cache: Clear any caching plugins (WP Super Cache, W3 Total Cache, etc.)
3Server cache: Some hosts provide server-level caching - check your hosting control panel
4CDN cache: If using Cloudflare or similar, purge the cache there too

Old Favicon Still Appearing?

Sometimes browsers stubbornly cache favicons. Try these advanced clearing methods:

Visit yoursite.com/favicon.ico directly and force refresh
Open your site in an incognito/private window
Try a different browser to confirm the change worked
On mobile, remove the home screen bookmark and re-add it

Image Upload Errors?

If WordPress rejects your image:

Check file size - some hosts limit uploads to 2MB or less
Ensure it's a valid PNG or JPEG (not WebP or SVG)
Verify the image isn't corrupted - try opening in an image editor
Check file permissions if self-hosting

WooCommerce-Specific Considerations

Mobile Commerce Impact

With mobile commerce dominating, your favicon becomes even more critical. When customers save your store to their home screen, the Site Icon becomes your app icon. Make sure it's instantly recognisable and works well at small sizes.

Checkout Trust Signals

During checkout, customers often have multiple tabs open comparing prices or reviewing cart contents. A professional favicon helps them quickly return to your store, reducing cart abandonment.

Email Integration

Some email clients display favicons next to sender addresses. A well-designed Site Icon reinforces your brand even in customer inboxes, particularly important for order confirmations and shipping notifications.

Design Tips for E-commerce Favicons

Keep It Simple

Your full logo might look great on your store header, but favicons need extreme simplification:

Use just your logo mark, not the full logo with text
Stick to 1-2 colours maximum
Ensure strong contrast against both light and dark backgrounds
Test at 16×16 pixels - if it's not recognisable, simplify further

Brand Consistency

Your favicon should instantly connect to your brand:

Use your primary brand colour
Maintain the same style as your main branding
Consider creating a simplified version of your logo specifically for favicon use
Ensure it complements your WooCommerce store's theme

Advanced Techniques

Seasonal Favicon Updates

Take advantage of WordPress's easy favicon updating for seasonal promotions:

Add a Santa hat for Christmas sales
Include a sale badge for Black Friday
Use themed colours for special events
Just remember to change it back afterward!

Using Plugins for Extra Control

While WordPress's built-in feature handles most needs, some plugins offer additional functionality:

All In One Favicon: Adds backwards compatibility for ancient browsers
Favicon by RealFaviconGenerator: Provides extensive device-specific optimisation
Heroic Favicon Generator: Includes favicon animation options

Performance Considerations

Your favicon impacts page load speed, albeit minimally. Optimise for best performance:

Compress PNG files using tools like TinyPNG before uploading
Avoid unnecessarily large source files - 512×512 is sufficient
Let WordPress generate optimised sizes rather than uploading multiple files
Use your CDN to serve favicon files if available

Testing Your New Favicon

After setting your favicon, verify it appears correctly everywhere:

1Browser tabs: Open your store in multiple browsers
2Bookmarks: Bookmark a page and check the icon appears
3Mobile home screen: Add to home screen on iOS and Android
4Google search results: Your favicon may appear in search listings
5Browser history: Check your icon shows in history listings

Creating Your Favicon

Need to create or optimise your favicon? Try Unwrite's Favicon Generator. Upload your logo and instantly generate all required sizes, perfectly optimised for WordPress. Everything processes in your browser - your brand assets stay private.

Final Thoughts

Adding a favicon to your WooCommerce store is a small task with big impact. It professionalises your store, builds brand recognition, and helps customers navigate back to your site. With WordPress making it so simple, there's no excuse for sporting the default WordPress "W" icon.

Remember: in e-commerce, every detail matters. Your favicon might be tiny, but it's often the first visual element customers see. Make it count, and your WooCommerce store will stand out in a sea of browser tabs.