How to Add a Custom Favicon to Your Squarespace Website: Step-by-Step Guide
Adding a favicon ensures your website is easily recognizable in browser tabs and across the internet. Here's everything you need to know about implementing a custom favicon effectively.
What is a Favicon? A favicon is a small square image displayed next to page titles in browser tabs, bookmarks, and sometimes search results. It helps visitors quickly identify your website among multiple open tabs.
How to Add a Favicon:
- Access your website's favicon settings
- Upload your image through the uploader
- Optional: Add a dark mode version
- Save your changes
- Clear browser cache if the favicon doesn't update immediately
Image Requirements:
- Size: 100x100 to 300x300 pixels (displayed at 16x16)
- Format: PNG format (ICO files not supported)
- File size: Maximum 100 KB
- Search optimization: Use 48px multiples (48x48, 96x96, 144x144) for Google search results
Browser Display Behavior:
- Desktop: Visible in browser tabs and address bars
- Mobile: Generally not displayed in mobile browsers
- Search Results: May appear next to your website listing
Best Practices:
- Use simple, recognizable designs
- Ensure good visibility at small sizes
- Test across different browsers
- Upload single-version files only
- Consider dark mode compatibility
Troubleshooting: If your favicon doesn't appear immediately after uploading:
- Clear your browser cache
- Restart your browser
- Wait a few hours for changes to propagate
Remember that browser caching can sometimes delay favicon updates, so changes might not be immediately visible to all users.
Related Articles
Important Security Alert: How to Report Malware on Your Website
