Have you ever tried to replace the standard Salesforce cloud favicon to give that last final branding touch to your Salesforce Community Cloud implementation?
If so, you know that it can be tricky. There could be different combinations of operating systems, browsers, types of files, and cached cookies that you would need to take into consideration. This post will tell you what you need to know to make sure that you can set up your favicon in a Lightning Salesforce Community Cloud and maintain a cohesive branding theme.
1. Select your custom favicon
When selecting a custom favicon for your Salesforce Community Cloud implementation, less is more. Given that favicons are small icons, the main objective is to make them look distinctive. We recommend avoiding using words and busy graphics. For example, at Plative we selected our symbol, The Lantern, as our favicon. It symbolizes the guiding light that we strive to deliver to all of our clients and communities. The simple, clean, and timeless design of our own logo that we call “Lantern” is easily recognizable and ensures that our brand stands out.
2. Create your favicon
After you have selected the image for your favicon, you will need to create the favicon file. This should be a .ico file that is 16×16 pixels in size. Bitmaps, .pngs, .gifs, etc, will not work. There are many websites that can convert and resize a standard PNG or JPEG file into the right format. We recommend Favicomatic, a free app that will allow you to resize your image and download it to your computer as a .ico file.
3. Set up your favicon
Now that you have selected your image and put it in the right format, you are ready to start setting up your favicon by following these simple steps:
Step 1: Upload your favicon as a static resource to your Salesforce environment. Here’s how:
?Navigate to “Setup”, then “Static Resources”
?Click the “new” button
?Give the static resource a name
?Select the favicon .ico file
?Set the cache control to public for ease of use
?Hit save
Step 2: Link your favicon as a static resource to the community. Remember, in order to set the same favicon for all pages in your Salesforce Community, it must be set at the site root level. Here’s how:
?Go to Workspaces > Administration > Pages section in your Salesforce Community
?Click Go to Force.com
?Click Edit
?Add your favicon static resource to the “sites favorite icon”.
?Hit save
Step 3: Add the favicon link in the head markup in your Community. This is the most critical and often missed step in making sure that the favicon is propagated on different browsers. Here’s how:
?In Community Builder, go to Settings > Advanced > Edit Head Markup.
?Add the following text: 
<SITE> : Insert the community’s URL (you can find this information at Setup | All Communities) and /resource/<faviconname>: Insert the last part of the Static Resource URL (you can find this information by clicking “View File” on the Static Resource Favicon record). The ?v=2 ensures it’s refreshed and up to date.
?Here’s how it should look: 
?Select save
?Publish in the Salesforce Community Builder
4. Test your favicon on different browsers
Open the Community pages on different browsers (Google Chrome, FireFox, Internet Explorer) and make sure that your favicon is displaying on the browsers tab. We recommend testing on incognito mode as well. Please note that it usually takes time for the favicon to appear on the browser tabs. If you are still unable to see it, try refreshing the page and clearing your browser’s cache.
Tying it all together:
Adding a favicon to your Community is like the cherry on top of the cake in defining your brand presence. Now that you know the tips and tricks to properly set up the favicon in your Salesforce Lightning Community, you are ready to wow your customers with your brand without worrying that the favicon will not display properly.
If you need assistance with your next Community implementation, Plative has years of experience delivering community solutions for a broad range of clients. To hear more about our client success stories, don’t hesitate to contact us!
