Fixing Favicon Issues on SFCC: How to Ensure Your E-commerce Site Displays the Correct Icon in Google Search Results
Favicons are the tiny icons that appear next to your site's name in browser tabs, bookmarks, and, very importantly, in Google search results.
September 11, 2024
•
A favicon is a small but significant element of your e-commerce site, often overlooked despite its crucial role in branding and user experience. Favicons are the tiny icons that appear next to your site's name in browser tabs, bookmarks, and, importantly, in Google search results. They serve as a visual identifier for your website, helping users to easily recognize and locate your site among multiple open tabs or saved bookmarks.
Favicons are essential for reinforcing brand identity and credibility. A well-designed favicon can leave a lasting impression, making your site more memorable and professional in the eyes of users. Moreover, favicons play a subtle yet important role in search engine optimization (SEO). They contribute to a cohesive brand presence across the web, and in Google search results, a clear and recognizable favicon can improve click-through rates by standing out from competitors.
However, for many Salesforce Commerce Cloud (SFCC) users, ensuring the correct favicon displays in search engine results pages (SERPs) can be challenging.
A common problem is the display of an outdated or incorrect favicon, such as the old Demandware logo, instead of the intended site-specific icon. This issue occurs due to the incorrect file structure of the logo image. This not only weakens your branding efforts but also confuses potential customers. According to SFCC documentation and community discussions, the favicon must be placed in a specific folder with a specific name for Google to recognize it correctly. In this post, we’ll explore how to resolve it, ensuring that your e-commerce site displays the correct favicon across all platforms, including Google SERPs.
Understanding the Favicon Issue on SFCC
Many SFCC sites have encountered problems with the favicon.ico icon not displaying correctly in Google search results, often showing an outdated icon instead.
This issue primarily arises because SFCC doesn’t serve custom files from the root directory by default. Instead, SFCC requires the favicon.ico file to be placed within a specific cartridge directory, and this file is then served as the default icon from the site's root directory.
How to Solve the Favicon Issue on SFCC
To resolve the problem of incorrect favicons appearing in SERPs, follow these steps:
1. Place the Favicon.ico in the Correct Directory
- Navigate to your SFCC cartridge directory.
- Place your custom favicon.ico file in the following location:
*/cartridge/static/default/images/favicon.ico - This ensures that the favicon is recognized and served correctly from the site's root directory.
2. Ensure Proper Implementation in the <head> Section
- While the favicon.ico file is served from the root directory, it’s also crucial to implement the correct HTML <link> tags in the <head> section of your site’s pages.
- Ensure that your site includes the following code in the <head> section:
<link rel="icon" href="/favicon.ico" type="image/x-icon"> - If your site uses different sizes or types of favicons, include additional <link> tags as necessary to cover all bases (e.g., for touch icons or different resolutions).
3. Resubmit Your Favicon to Google Search Console
- You can do this by requesting indexing for your site's homepage. This will prompt Google to recrawl your site and detect the updated favicon file, ensuring that the latest version is displayed in search results. Taking this extra step can help accelerate the process of updating the favicon across Google’s index.
Ensuring that your e-commerce site displays the correct favicon in Google search results is essential for maintaining a consistent brand image and enhancing user experience. Following the steps outlined above, you can resolve common favicon issues on Salesforce Commerce Cloud and ensure that your site’s branding is accurately represented across all platforms.
Don’t let a small technical oversight undermine your brand’s presence online. A properly implemented favicon not only enhances your site’s appearance but also contributes to better SEO performance, helping you stand out in the competitive e-commerce landscape.
FOLLOW US