Whether you are the Championship-winning Golden State Warriors, the data center leader Equinix, or the versitle camera maker GoPro, your new Salesforce Community will need a favorite icon, also known as “favicon.” For the uninitiated, the favicon is the tiny icon that appears in the tabs of your browser as well as when you “favorite”, or bookmark, a page, hence the name. This icon is often only seen by people in the periphery but a website really isn’t complete without one. Also, it tends to be one of the last things done on a Salesforce Communities project, and I would argue that it should be done as soon as is reasonable, as it does take time to propagate through to the browsers. Favicons truly complete a website and if it isn’t applied to the community, the favicon will stay as the blue Salesforce Cloud icon which may confuse your users.
Guidelines for your Favicon
When installing your favicon, you need to follow some fairly simple rules:
-
Make it Simple
Favicons will be tiny representations of your website and brand. You want that to come across clearly and effectively, even at such a small size. Words should also be avoided in favicons, but single letters (e.g. https://www.thetimes.co.uk/) can work. GoPro uses a piece of their logo – one solid color block – instead of all the squares + the GoPro text:
-
Generate your Favicon
Once you’ve chosen an appropriate image, you will need to size it to 16×16 px and save it as an .ico file. If you don’t have a resource to do this for you, or if your current corporate site doesn’t have one, I would suggest using a favicon generator (Favicomatic is good but there are others). It will shrink your chosen image down to the right size and present it to you as a zip file.
-
Review your Favicon at Size
After you have the icon at size, definitely take a look at the finished product. It should be clear, even at that size, and should represent your brand well.
Setup Favicon in Salesforce Communities
Now that you have a favicon, you need to get it onto your Salesforce Community. This can be straightforward, but there are some steps to follow and some areas to check to ensure your favicon appears as expected.
- Upload as a Static Resource.
- In the Sites area of your community, set the “Site Favorite Icon” by selecting the static resource you just uploaded.
- How to access for Lightning Community: Community Management/Administration > Pages > Click “Go to Force.com” > Edit > Upload static resource in Site Favorite Icon field.
- How to access for Visualforce + Tabs Community: Setup > Sites > Your community > Edit > Upload static resource in Site Favorite Icon field.
Troubleshooting your Favicon
While this should do the trick, sometimes different combinations of browsers versions, operating systems, and cached cookies and files make it difficult. Here are some things to note:
- If you can’t see it immediately, try clearing your browser’s cache (including cookies, images and icon databases)
- If you’re using a Visualforce community, and you’ve disabled the header, this essentially removes the place where the favicon lives. To get around this, you’ll need to hard-code the link to the favicon in the <head> tags on the page, like this:
<link rel=”icon shortcut” href=”{!$Site.Prefix}/favicon.ico” /> - If you’re using a Lightning community, you can try adding the link to the favicon in the head markup from within the Builder. Go to Settings > Advanced > Edit Head markup and enter in the following:
<link rel=”shortcut icon” href=”/resource/<faviconName>.ico” type=”image/x-icon” /> - Lastly, give it time. It’s a good reason to do this step as early as possible in order to troubleshoot any issues that come up.
Good luck with your next Community and implementing your favicon, if you need assistance, Perficient has years of experience delivering portals and community solutions for a broad range of clients in a number of industry segments. We would love to discuss your needs!
hi – I’m struggling to figure this out, would love some help! I followed the steps as mentioned but my favicon isn’t popping up. I also tried uploading the favicon as an asset into the branding section of Community Builder but I’m not able to figure out what the relative path to reference it would be. BTW, I’m adding code to the header markup section as I am using a Lightning Community. Let me know if you have any suggestions 🙂
Hi J, I recommend you upload it as a static resource, since the community’s Force.com configuration, (#2 in the Setup Favicon in Salesforce Communities section above) requires that the favicon be a static resource. If you configure it this way, you won’t need to add it to the head section in the Advanced settings in the Builder. Hope that helps!
Thanks for your response! I uploaded the favicon as a static asset but it still did not upload – what do you suggest doing / any tips on figuring out that relative path?