Skip to main content

Salesforce

Favicons: Your Salesforce Community is Not Complete Without One

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.

Salesforce Cloud Favicon

Guidelines for your Favicon

When installing your favicon, you need to follow some fairly simple rules:

  1. 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:
    Simple Favicon Example

  2. 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.

  3. 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.

  1. Upload as a Static Resource.
  2. In the Sites area of your community, set the “Site Favorite Icon” by selecting the static resource you just uploaded.
    1. How to access for Lightning Community: Community Management/Administration > Pages > Click “Go to Force.com” > Edit > Upload static resource in Site Favorite Icon field.
    2. 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!

Thoughts on “Favicons: Your Salesforce Community is Not Complete Without One”

  1. 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 🙂

  2. Laurel Jones Post author

    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!

  3. 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?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Laurel Jones, Senior Business Consultant, UI/UX Design

More from this Author

Categories
Follow Us
TwitterLinkedinFacebookYoutubeInstagram