7

I am working on a Community for my portal with Napili template. I wanted to have my custom favicon to the entire community. I have configured Edit Head Markup in the community builder with this:

<link rel="shortcut icon" href="https:MySalesforceInstance.cs17.visual.force.com/resource/1596737864000/Comm_resources/images/headFavicon.ico" />

But this is working fine, if and only if I logged into our community. Strangely, this config is not working in all the browsers(even with Login) Am I missing anything in the tag?

Please let me know how can I make this favicon icon working on all browsers with or without Logging-in.

Thanks.

5

For the Favicon to work, I had to upload my image to the orgs assets library: Under Branding>"Select an image to generate a palette" :

enter image description here

enter image description here

Only then was I able to reference my icon, which I had to upload as a 16x16 png image.

Finally, I was able to reference it using the file-asset's relative path as follows:

enter image description here

Notice that the icon name when I reference it has a versioning appended to it,

<link rel="icon" href="/file-asset/coveofavicon?v=1" type="image/png" />

You can use your browsers dev tools to identify the relative path for your community assets, for reference purposes, here is another link provided that helped resolve this:

<link rel="icon" href="/sfsites/c/file-asset/Favicon_FileName?v=1" type="image/png" />

enter image description here

I did not find this documented anywhere =(, hope this helps other people.

This will change some of your community stylings, since it will detect the colors your image/favicon uses, however, this is easily reversible by re-selecting the original colors you had under the branding option.

  • Man, this works as smooth as butter. Only change I would suggest is with the reference you provided is not accurate. Here is the valid favicon reference: ` <link rel="icon" href="/sfsites/c/file-asset/Favicon_FileName?v=1" type="image/png" />` Anyways, by following your approach helped me in figuring the issue. \m/ – Arnold Jr. May 14 '17 at 17:12
  • Thank you very much man. You made my efforts on a weekend worthy :D. I owe you a beer \m/ – Arnold Jr. May 14 '17 at 17:18
  • glad it was of help. The href I provided works fine for my community, as described step-by-step. However, I will add your relative path for reference purposes as well – glls May 14 '17 at 17:18
2

For the Favicon I would recommend to use some public service which can host the image and provide https url of the image rather than using images from static resource and using different set of urls

<link rel="shortcut icon" href="https://static.url" id="favicon-ico">

I think the issue might be the url is wrong in your case .You might want to open browser console and check the error

Try using a relative url like below

<link rel="shortcut icon" href="/resource/Comm_resources/images/headFavicon.ico" />
  • Mohith, I agree with- hosting the image at a public service and use it by referring the url rather than static resources, this might work well. But I prefer manage-via-salesforce kind of images repo where I can use without dependency. FYI: The URL which I referred from Static resources is working fine when I logged in as a user in Chrome/FF. But not working on IE, even if I logged in as a user(seems weird). – Arnold Jr. May 13 '17 at 18:32
  • Do you see any error in console for IE ? What version of IE? – Mohith Shrivastava May 13 '17 at 18:32
  • For IE, I am using Windows 10 OS-which comes with Microsoft Edge. Verion: Microsoft Edge 38.14393.1066.0 – Arnold Jr. May 13 '17 at 18:34
  • Try adding id to the link tag . id="favicon" and see if that helps – Mohith Shrivastava May 13 '17 at 18:36
  • I could even able to find the Favicon url by viewing the page source in browser Edge, and if I try to open it in a new window, it is asking me if I wanted to download the .ico file. (-- _--) – Arnold Jr. May 13 '17 at 18:40
1

This answer actually helped me find my particular solution. In my case, I used the static resource relative URL with the type attribute in the link tag:

<link rel="shortcut icon" href="/resource/1509426236230/favicon" type="image/x-icon"/>

protected by Community Feb 25 at 18:34

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.