8

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.

Improve this question

3 Answers 3

Reset to default
7

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.

Improve this answer
3
  • 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/
    – SatyaV
    Commented May 14, 2017 at 17:12
  • Thank you very much man. You made my efforts on a weekend worthy :D. I owe you a beer \m/
    – SatyaV
    Commented May 14, 2017 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
    Commented May 14, 2017 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" />
Improve this answer
6
  • 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).
    – SatyaV
    Commented May 13, 2017 at 18:32
  • Do you see any error in console for IE ? What version of IE?
    – Mohith Shrivastava
    Commented May 13, 2017 at 18:32
  • For IE, I am using Windows 10 OS-which comes with Microsoft Edge. Verion: Microsoft Edge 38.14393.1066.0
    – SatyaV
    Commented May 13, 2017 at 18:34
  • Try adding id to the link tag . id="favicon" and see if that helps
    – Mohith Shrivastava
    Commented May 13, 2017 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. (-- _--)
    – SatyaV
    Commented May 13, 2017 at 18:40
2

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"/>
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .