How to Add Favicon to the Website & Troubleshooting
The Ultimate Guide to Favicons: What They Are, How to Add Them to Squarespace, and Troubleshooting Tips
Favicon is a little icon that you see on your browser tab right by the name of the page. It is very important for a website, where you are a wellness practitioner or a beauty studio, favicon can help your brand to be more recognizable.
On top of that, this small icon makes your website look far more professional and helps your visitors navigate through their browser tabs.
They might be small, but they play a significant role in your website's branding and user experience. These tiny icons appear in browser tabs, bookmark lists, and other key places, helping users to quickly identify your site.
In this comprehensive guide, we’ll explore everything you need to know about favicons, including what they are, why they’re important, how to add them to your Squarespace site, and how to troubleshoot common issues.
By the end of this post, you’ll have a clear understanding of how to effectively use favicons to enhance your website’s identity.
What is a Favicon?
Definition and Purpose
A favicon, short for "favorite icon," is a small, 48x48 or 96x96 pixel square image that represents a website. It's displayed in a browser’s address bar, tab, bookmark list, and other interface elements. The primary purpose of a favicon is to help users quickly identify a website among multiple open tabs or in their bookmarks.
Importance of Favicons
Brand Recognition: Favicons reinforce your brand identity and make your website easily recognizable.
User Experience: They help users quickly find and return to your site among many open tabs.
Professionalism: A custom favicon shows attention to detail and can enhance the perceived professionalism of your site.
How to Add a Favicon to Your Squarespace Site
1.1 Understanding different Favicon formats
To begin with, it’s crucial to understand the different favicon formats and their compatibility with various browsers:
ICO (Icon) Format: The most universally supported format. Ideal for ensuring compatibility with older versions of Internet Explorer and modern browsers.
PNG (Portable Network Graphics): Widely used for its support for transparency and better compression. It works well with most modern browsers.
SVG (Scalable Vector Graphics): Scalable without losing quality, making it perfect for high-resolution displays. Supported by most modern browsers but not by Internet Explorer.
GIF (Graphics Interchange Format): Less common and typically not recommended due to limited color support and outdated use.
But please keep in mind that Squarespace recommends using a .png file as the favicon image and doesn’t support uploading .ico files.
1.2 Preparing Your Favicon
Before you can add a favicon to your Squarespace site, you need to create one. Here are the steps:
Design Your Favicon: Use a graphic design tool like Adobe Illustrator, or Photoshop, or an online tool like Canva to design a 48x48 or 96x96 pixel icon (the side of the icon must be divisible by 48). Keep it simple and clear.
Save in the Right Format: Favicons should be saved as a .png file. Although the .ico format is widely supported across all browsers and is common for icons, Squarespace doesn’t allow uploading files in .ico format. So stick to .png
Squarespace suggests that your favicon is in PNG file format and recommended sizing is between 100 x 100px and 300 x 300px. It also has to be no more than 100Kb in size. But keep in mind that by Google standards the side of the icon image should be divisible by 48px. Google Chrome is the most commonly used browser, so you probably want to follow their rules 🙂
1.3 Adding the Favicon to Squarespace
Once your favicon is ready, follow these steps to add it to your Squarespace site:
Log In to Squarespace: Access your Squarespace account and navigate to the site you want to edit.
On the left-hand panel click “Settings” and under the “Website” tab pick “Favicon”.
Upload Your Favicon: Click the "Add a Favicon" button and upload your favicon file. Ensure the file is in the correct format and dimensions.
Save Your Changes: After uploading, click "Save" to apply the changes.
1.4 Verifying the Favicon
Once you’ve added your favicon, you’ll want to verify that it’s displaying correctly:
Clear Your Cache: Browsers often cache favicons. Clear your browser cache or open your site in an incognito window to see the changes.
Check Different Browsers: Ensure that your favicon appears correctly in various browsers like Chrome, Firefox, Safari, and Edge.
2. Testing Your Favicon
After implementing the favicon, it’s important to test its appearance and functionality across different browsers and devices:
Desktop Browsers: Test on Chrome, Firefox, Safari, Edge, and Internet Explorer.
Mobile Browsers: Test on both Android and iOS devices using browsers like Chrome, Safari, and Firefox.
Bookmarks and Shortcuts: Add your site to bookmarks and home screen shortcuts to ensure the favicon displays correctly.
Recommendation: Use browser developer tools to simulate different devices and resolutions.
To access browser developer tools in Google Chrome, open the Chrome Menu in the upper-right-hand corner of the browser window and select More Tools > Developer Tools. You can also use Option + ⌘ + J (on macOS), or CTRL + Shift + J (on Windows and Linux).
And there you will see an icon with a little laptop and mobile next to each other. Clicking that icon will open a tab where you can simulate different devices.
2.1 Updating Your Favicon
Keep your favicon up-to-date with your brand’s visual identity. If you rebrand or change your logo, update your favicon to match. This helps maintain consistency and brand recognition.
2.2 Redesigning Your Favicon
When updating your favicon, follow these steps to ensure it aligns with your new brand identity:
Consistency with Brand Colors: Use your brand’s color palette to create a favicon that matches your overall visual identity.
Simplify the Design: Given the small size of favicons, ensure your design is simple and easily recognizable. Avoid intricate details that may not be visible.
2.3 Communicating the Change
If your favicon update is part of a larger rebranding effort, consider communicating the change to your audience. This can be done through:
Blog Posts: Write a post explaining the new look and what it represents for your brand. The new favicon can be a part of a bigger re-branding project.
Social Media: Announce the update on your social media channels to ensure your audience is aware.
Email Newsletters: Include information about the rebranding and favicon update in your newsletters.
THE UPDATED FAVICON WHICH FEATURES A SIMPLIFIED VERSION OF OUR LOGO, ENSURES IT REMAINS CLEAR AND RECOGNIZABLE EVEN AT SMALLER SIZES.
This change can be part of our broader effort to ensure consistency across all touchpoints, reinforcing your brand identity as a wellness professional no matter where your customers interact with you.
3. Possible Problems and Troubleshooting
3.1 Favicon Not Showing
If your favicon isn't showing up, here are some potential reasons and solutions:
File Format and Size: Ensure your favicon is in the correct format (.png) and is properly sized (48x48 or 96x96 pixels).
Browser Cache: Clear your browser cache or try a different browser to see if the issue persists.
Upload Issues: Re-upload the favicon to Squarespace to ensure the file wasn’t corrupted during the upload process.
URL Issues: Ensure that your site URL is correct and that there are no typos or incorrect paths in the favicon settings.
Time: although if you’ve cleared the cache, the favicon should appear instantly, sometimes it takes a little bit of time for your favicon to show.
3.2 Favicon Appears Blurry
A blurry favicon can result from improper dimensions or poor image quality:
Correct Dimensions: Ensure your favicon is exactly 48x48 or 96x96 pixels. Larger images can cause scaling issues, leading to blurriness.
High-Quality Image: Start with a high-quality, high-resolution image to avoid pixelation.
3.3 Favicon Not Updating
If you’ve updated your favicon but the old one still appears:
Browser Cache: Clear your browser cache or use an incognito window.
DNS Propagation: Sometimes changes take a while to propagate across all servers. Wait a few hours and check again.
3.4 Compatibility Issues
Some browsers or devices might not display your favicon correctly:
Test Across Browsers: Ensure your favicon works in all major browsers (Chrome, Firefox, Safari, Edge).
Use .png Format: Although the .ico format is the most universally supported for favicons, Squarespace doesn’t support uploading files in that format.
3.5 Favicon doesn’t show on Google Search results
Favicons in Google search results provide a visual representation of your website, making it easier for users to identify your site at a glance.
Favicons in Google search results provide a visual representation of your website, making it easier for users to identify your site at a glance.
They contribute to a cohesive and professional appearance in search listings, which can enhance click-through rates (CTR) and overall user engagement. Given their importance, it’s essential to ensure your favicon displays correctly in search results.
I remember, when I launched my website, I had trouble with the favicon not appearing on Google Search results next to my website link.
I HAD TO LOOK ALL OVER THE INTERNET IN ORDER TO FIND THE RIGHT SOLUTION.
Finally, I put some pieces of advice together and the icon showed itself several days later.
Basically, the problem is that Google doesn’t know where exactly to look for your favicon in your website settings. And if you want to speed up the process, you make this easier for Google.
You want to inject the following code to your Homepage header code injection. It is important that you do it specifically for the Homepage.
<link rel="icon" href="FAVICON LINK">.
To find a link to your favicon, you follow one of two methods:
#ONE
go to the asset library on your website,
find the image of your favicon
through the 3 dots menu click on “File details”
right-click on the image and open it in a new tab
the link in the browser will be the link of your favicon
#TWO
on Chrome browser Open the dev console (F12 key. You can also use Option + ⌘ + J (on macOS), or CTRL + Shift + J (on Windows and Linux)).
Click on the three dots menu on the bottom-left of the console to "Search..."
Type “favicon” to search for that term
There you will see the link to your favicon
Copy the whole link and add it to the code snippet:
<link rel="icon" href="FAVICON LINK">.
Before adding a link to the header of my Homepage, my Google Search results looked like this:
And after I completed the steps I wrote out, my Google Search results changed to:
Keep in mind that favicons are very important.
Favicons are a small but powerful element of your website’s branding and user experience. They help with brand recognition, improve user experience, and add a touch of professionalism to your site.
By following this guide, you can easily create and add a favicon to your Squarespace site, ensuring it looks great and functions well across all platforms. Additionally, with troubleshooting tips and advanced advice, you’ll be well-equipped to handle any favicon-related issues that arise.
Remember, attention to detail matters. A well-designed favicon can enhance your site's credibility and make it more memorable for your visitors.
Take the time to create a favicon that truly represents your brand, and enjoy the benefits of a polished and professional online presence.
IF YOU ARE READY TO LAUNCH YOUR WEBSITE YOU WANT TO MAKE SURE THAT YOU TAKE ALL THE NECESSARY STEPS.
Launching a website is an exciting milestone, whether you're starting a new business, revamping an existing site, or creating a personal blog.
However, the process can be overwhelming, with numerous details to consider to ensure a smooth and successful launch.
To help you navigate this journey with confidence, I've created a comprehensive, free checklist designed to cover all the essential steps and best practices for launching your website.
