How to Add a Favicon in WordPress & Squarespace: Complete 2026 Guide
Adding a favicon (also known as a "Site Icon" or "Browser Icon") is a small step that makes a big difference in branding and user experience. This complete guide shows you exactly how to add favicon in WordPress, Squarespace, and other popular platforms—with troubleshooting tips for when your favicon is not showing.
What Is a Favicon and Why It Matters
A favicon is a small icon that appears in browser tabs, bookmarks, and address bars. The word "favicon" comes from "favorite icon," and it was originally created for Internet Explorer 5 in 1999. Today, favicons are essential for professional websites and brand recognition.
When you add a WordPress favicon or add a site icon in WordPress, you're creating a visual identifier that helps users quickly recognize your website among dozens of open tabs. This tiny image significantly improves user experience and makes your site look more professional and trustworthy.
Key Benefits of Adding a Favicon
- Brand Recognition: Users instantly identify your site among multiple tabs
- Professional Appearance: Shows attention to detail and builds trust
- Better Bookmarking: Makes your site stand out in bookmark lists
- Mobile Home Screen: Creates an app-like icon when users save your site
- SEO Benefits: While not a direct ranking factor, it improves click-through rates in search results
What Platforms Support Favicon
Nearly every modern content management system (CMS) and website builder supports favicons. The good news is that adding a WordPress site icon or favicon in Squarespace has become incredibly easy—most platforms now have built-in favicon upload features.
WordPress
Native support since version 4.3 via Customizer, plus numerous plugins available
Squarespace
Built-in "Browser Icon" feature in both 7.0 and 7.1 versions
Shopify
Theme customizer includes dedicated favicon settings
Wix
Favicon upload in website settings (Premium plans)
Webflow
Project settings include favicon management
Static HTML
Manual link tag in HTML head section
Favicon Size Requirements for 2026
Before you add a favicon in WordPress or any platform, you need to understand the size requirements. Different devices and browsers require different favicon sizes for optimal display.
| Size | Purpose | Priority |
|---|---|---|
| 512x512 | WordPress site icon, PWA, high-res displays | Critical |
| 192x192 | Android home screen, Chrome | High |
| 180x180 | iOS home screen (Apple Touch Icon) | High |
| 32x32 | Modern browser tabs, retina displays | Medium |
| 16x16 | Standard browser tabs, bookmarks | Medium |
Best Practice for WordPress
When you add a WordPress favicon through the Customizer, always upload a square image that is at least 512x512 pixels. WordPress will automatically generate all the smaller sizes you need, including 16x16, 32x32, 180x180, and 192x192 versions.
Best Practice for Squarespace
For Squarespace favicon uploads, use a PNG file between 100x100 and 300x300 pixels, keeping the file size under 100 KB. Squarespace recommends PNG format for the best quality and transparency support.
Add Favicon in WordPress (Customizer Method)
The easiest way to add a site icon in WordPress is through the built-in Customizer. This method has been available since WordPress 4.3 and works with all themes. You don't need any coding knowledge or plugins to add a WordPress favicon this way.
Step-by-Step Instructions
- Log into WordPress Dashboard: Navigate to your WordPress admin panel by going to yoursite.com/wp-admin and entering your credentials.
- Open the Customizer: From the left sidebar, click on Appearance and then select Customize. This opens the WordPress Customizer interface.
- Find Site Identity: In the Customizer panel, look for and click on Site Identity. This section controls your site title, tagline, and icon.
- Upload Site Icon: Scroll down to the Site Icon section and click the Select Site Icon button.
- Choose Your Image: You can either upload a new image from your computer or select an existing image from your Media Library. Remember to use a 512x512 pixel square image for best results.
- Crop if Needed: WordPress will prompt you to crop the image to a perfect square if it's not already. Adjust the crop area to focus on the most important part of your icon.
- Publish Changes: Click the blue Publish button at the top of the Customizer panel to make your WordPress site icon live.
✓ Why This Method Works Best
- No plugins required—uses native WordPress functionality
- Automatically generates all required favicon sizes
- Works with any WordPress theme
- Creates proper HTML markup in your site's header
- Supports both regular displays and retina screens
- Generates app icons for iOS and Android devices
Add Favicon Using WordPress Plugins
While the WordPress Customizer method works perfectly for most users, plugins offer advanced features like multiple favicon versions for different devices, animated favicons, and separate admin panel icons. Here are the best WordPress favicon plugins for 2026.
Favicon by RealFaviconGenerator
Most Popular • Free • 100,000+ Active Installations
This is the most comprehensive WordPress favicon plugin available. RealFaviconGenerator creates platform-specific icons for iOS, Android, Windows, and all modern browsers from a single uploaded image.
Key Features:
- Generates 20+ different icon sizes automatically
- Creates device-specific icons (iPhone, iPad, Android, Windows tiles)
- Allows custom styling for different platforms
- Preview how your icon looks before publishing
- Supports compression for faster loading
How to Use:
- Install and activate the plugin from your WordPress dashboard
- Go to Appearance "Favicon"
- Upload your master image (at least 260x260 pixels recommended)
- Customize settings for each platform if desired
- Click "Generate favicon" and the plugin handles the rest
All In One Favicon
Versatile • Free • Multiple Icon Support
This plugin lets you upload different favicons for your website frontend and WordPress admin panel. It also supports animated GIF favicons, which can create eye-catching effects in browser tabs.
Unique Features:
- Separate favicons for frontend and admin dashboard
- Supports animated GIF favicons
- Simple, user-friendly interface
- Lightweight and fast
Fresh Favicon
Advanced • Free • Multi-Device Optimization
Fresh Favicon automatically generates 20 browser and device-specific favicons from one or multiple uploaded images. It's ideal for developers who want granular control.
Best For:
- Developers needing complete control
- Sites targeting multiple device types
- Projects requiring different icons per platform
⚠️ When to Use Plugins vs. Built-in Method
Use the built-in WordPress Customizer if:
- You just need a simple favicon for all platforms
- You want to minimize plugin usage
- Your site doesn't need platform-specific customization
Use a plugin if:
- You need different icons for iOS, Android, and Windows
- You want an animated favicon
- You need separate admin panel icons
- You want advanced preview and testing features
Add Favicon Without Plugin (Manual Method)
If you prefer to add a favicon without plugin, you can manually insert the favicon code into your WordPress theme. This method gives you complete control but requires basic HTML knowledge.
Manual Installation Steps
- Upload Your Favicon Files: Using FTP or your hosting file manager, upload your favicon.ico file to your WordPress root directory (where wp-config.php is located).
- Edit Your Theme Header: Go to Appearance "Theme File Editor" and select your header.php file.
- Add the Favicon Code: Insert this code in the <head> section:
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
- Save Changes: Click "Update File" to save your changes.
⚠️ Important Warning
Editing theme files directly means your changes will be lost when you update your theme. Always use a child theme for manual code modifications, or stick with the WordPress Customizer method for update-safe favicon management.
Add Favicon in Squarespace
Squarespace calls favicons "Browser Icons." The process to add a favicon in Squarespace is straightforward and differs slightly between Squarespace 7.0 and 7.1 versions. Both versions make it easy to upload your site's favicon without any technical knowledge.
Squarespace 7.1
Current Version • Recommended
Step-by-Step Guide:
- Log into your Squarespace account and select your website
- Click on Settings in the left menu
- Navigate to Website and then click Favicon
- Alternatively, press the forward slash (/) key and type "Favicon" in the search box for quick access
- Click Add a favicon to upload your file
- Upload a PNG or ICO file (100x100 to 300x300 pixels, under 100 KB)
- Click Save to apply your changes
Squarespace 7.0
Legacy Version
Step-by-Step Guide:
- Log into your Squarespace dashboard
- Go to Settings from the Home menu
- Click on Browser Icon (under Website section)
- Click Upload Browser Icon
- Select your favicon file (PNG or ICO format recommended)
- Squarespace will automatically resize your image
- Save your changes
Squarespace Favicon Requirements
- File Format: PNG is recommended for best quality and transparency support; ICO is also accepted
- Dimensions: Between 100x100 and 300x300 pixels (square)
- File Size: Must be under 100 KB
- Background: Use transparent background for PNG files to ensure proper display on different browsers
Pro Tips for Squarespace Favicons
- Keep your design simple—complex details won't show up clearly at small sizes
- Use your brand's primary color or logo mark
- Test on both light and dark browser themes
- After uploading, test your favicon on multiple browsers (Chrome, Firefox, Safari, Edge)
- If your favicon doesn't appear immediately, clear your browser cache or open an incognito window
Verify Favicon Display
After you add a WordPress favicon or Squarespace favicon, it's essential to verify that it displays correctly across different browsers and devices. Here's how to check if your site icon is working properly.
Quick Verification Methods
- Browser Tab Check: Open your website in a new tab and look at the browser tab. Your favicon should appear next to the page title.
- Bookmark Test: Bookmark your website and check your bookmarks bar or bookmarks menu. The favicon should appear next to the bookmark name.
- Incognito Mode: Open your site in an incognito or private browsing window to see the favicon without cached data affecting the display.
- Multiple Browser Test: Check your favicon in Chrome, Firefox, Safari, and Edge to ensure cross-browser compatibility.
- Mobile Test: View your site on mobile devices and try adding it to your home screen to see the mobile app icon.
Online Favicon Testing Tools
RealFaviconGenerator Checker
Shows how your favicon appears across 10+ platforms including iOS, Android, Windows, and modern browsers
Favicon Checker by Seobility
Analyzes your favicon implementation and provides suggestions for improvement
Browser DevTools
Press F12, go to Network tab, and filter by "ico" or "png" to see if favicon files are loading correctly
Fix Favicon Not Showing
If your WordPress favicon or Squarespace favicon is not showing up after upload, don't worry—this is a common issue with simple solutions. Here are the most effective troubleshooting steps to fix favicon display problems.
Problem: Favicon Not Appearing at All
Most Common Cause: Browser caching
Solutions:
- Clear Browser Cache: Press Ctrl+Shift+Delete (Windows) or Cmd+Shift+Delete (Mac) and clear cached images and files
- Hard Refresh: Press Ctrl+F5 (Windows) or Cmd+Shift+R (Mac) while on your website
- Clear Specific Favicon Cache: Visit yoursite.com/favicon.ico directly and press Ctrl+F5
- Use Incognito Mode: Open your site in a private/incognito window to bypass cache entirely
- Different Browser: Try a browser you haven't used to visit your site before
Problem: Favicon Looks Blurry or Pixelated
Most Common Cause: Wrong image dimensions
Solutions:
- For WordPress: Re-upload your site icon using a 512x512 pixel image instead of smaller sizes
- For Squarespace: Upload at least a 300x300 pixel PNG file
- Use Vector Graphics: If possible, create your favicon from a vector source (SVG) then export to PNG at high resolution
- Avoid Upscaling: Never upscale a small image; always start with a large, high-quality source
- Test on Retina Displays: Check your favicon on high-DPI screens to ensure it looks sharp
Problem: Old Favicon Still Showing After Update
Most Common Cause: Aggressive browser and CDN caching
Solutions:
- Wait it Out: Browsers can cache favicons for weeks; sometimes waiting 24-48 hours helps
- Clear Browser Data Completely: Clear all browsing data, not just cache
- Purge CDN Cache: If you use Cloudflare or another CDN, purge the entire cache from the CDN dashboard
- Use Version Parameter: For manual implementations, add a version query: favicon.ico?v=2
- WordPress-Specific: Deactivate and reactivate your favicon in Customizer
Problem: Favicon Shows in Some Browsers But Not Others
Most Common Cause: File format compatibility or incorrect HTML implementation
Solutions:
- Use Multiple Formats: Provide both .ico and .png versions in your HTML head
- Check File Format: Ensure your .ico file is a true ICO format, not a renamed PNG
- Add Explicit Link Tags: Even with WordPress Customizer, you can add manual link tags for better compatibility
- Test File Access: Visit yoursite.com/favicon.ico directly to confirm the file is accessible
- Check HTTPS: Ensure your favicon uses the same protocol (HTTP/HTTPS) as your site
Problem: Favicon Not Showing on Mobile
Most Common Cause: Missing Apple Touch Icon or Android icon tags
Solutions:
- WordPress Users: The Customizer automatically generates mobile icons; verify you've uploaded a 512x512 image
- Manual Implementation: Add apple-touch-icon link tag with a 180x180 PNG
- Android Chrome: Create a web app manifest file with 192x192 and 512x512 icons
- Clear Mobile Browser Cache: Mobile browsers cache aggressively; clear Safari/Chrome mobile cache
Ultimate Troubleshooting Checklist
File Requirements:
- ✓ Square dimensions (same width and height)
- ✓ Minimum 512x512 for WordPress
- ✓ 100-300x300 for Squarespace
- ✓ PNG or ICO format
- ✓ File size under 100 KB
Implementation Checks:
- ✓ Uploaded through correct settings page
- ✓ Changes saved and published
- ✓ Browser cache cleared
- ✓ CDN cache purged (if applicable)
- ✓ Tested in incognito mode
Frequently Asked Questions
How do I add a favicon in WordPress without a plugin?
The easiest way to add a WordPress favicon without a plugin is using the built-in Customizer. Go to Appearance > Customize > Site Identity > Site Icon, then upload your 512x512 pixel image. WordPress handles everything automatically without requiring any plugin installation.
Why is my WordPress favicon not showing?
The most common reason for a WordPress favicon not showing is browser caching. Clear your browser cache, try a hard refresh (Ctrl+F5), or open your site in incognito mode. Also verify you've uploaded a properly sized image (512x512 pixels) and clicked "Publish" in the Customizer.
What size should a WordPress site icon be?
WordPress recommends uploading a site icon that is at least 512x512 pixels. This large size ensures WordPress can automatically generate all the smaller versions needed for different browsers and devices, including 16x16, 32x32, 180x180, and 192x192 pixel versions.
How do I add a favicon in Squarespace 7.1?
To add a favicon in Squarespace 7.1, log into your site, go to Settings > Website > Favicon, then click "Add a favicon" and upload your PNG or ICO file (100-300x300 pixels, under 100 KB). Alternatively, press "/" and search for "Favicon" for quick access.
Can I use an animated GIF as a favicon?
Yes, you can use animated GIF favicons, but support varies by browser. Firefox supports animated favicons, while Chrome and Safari do not. If you want an animated favicon in WordPress, you'll need to use a plugin like "All In One Favicon" that supports GIF uploads.
Does a favicon help with SEO?
While favicons are not a direct ranking factor, they indirectly improve SEO by increasing brand recognition and click-through rates in search results. When users see your favicon in browser tabs and bookmarks, they're more likely to recognize and click on your site in Google search results.
What's the difference between a favicon and a site icon?
"Favicon" and "site icon" refer to the same thing—the small icon representing your website. WordPress specifically uses the term "Site Icon" in its Customizer, while Squarespace calls it "Browser Icon." All these terms describe the image that appears in browser tabs and bookmarks.
How long does it take for a favicon to update?
Favicon updates can take anywhere from a few minutes to several days due to browser caching. To see changes immediately, clear your browser cache or open your site in incognito mode. On other users' browsers, the update typically appears within 24-48 hours as their cache expires.
Should I use PNG or ICO format for my favicon?
For WordPress, use PNG format—WordPress will handle all format conversions. For maximum compatibility across all platforms and older browsers, ICO format is traditional, but modern browsers support PNG favicons. PNG offers better quality and transparency support, making it the recommended choice for 2026.
Need a Professional Favicon?
Before you add a site icon to WordPress or upload a Squarespace favicon, you need a great design. Our free favicon generator creates perfect square icons optimized for all platforms—WordPress, Squarespace, and beyond.