Loading

Create a Custom Favicon on your Experience Cloud Site or Force.com Site

Publiceringsdatum: May 1, 2026
Beskrivning

About Favicons:

The icon displayed on the browser's address bar/ tab or when the page is bookmarked is called the favicon.
Resources to be used as a favicon (favorite icon) has to be 16x16 in size and of .ico format. 

There are multiple ways of specifying a favicon for a website and the standards are listed here:

1. Use of a rel attribute value defined in a profile
2. Putting the favicon at a predefined URI on the root path.


Favicon requests are sent by the browser and how it resolves to any of the methods above is specified here:

QUOTE: "If links for both PNG and ICO favicons are present, PNG-favicon-compatible browsers select which format and size to use as follows. Firefox and Safari will use the favicon that comes last. Chrome for Mac will use whichever favicon is ICO formatted, otherwise the 32×32 favicon. Chrome for Windows will use the favicon that comes first if it is 16×16, otherwise the ICO. If none of the aforementioned options are available, both Chromes will use whichever favicon comes first, exactly the opposite of Firefox and Safari. Indeed, Chrome for Mac will ignore the 16×16 favicon and use the 32×32 version, only to scale it back down to 16×16 on non-retina devices. Opera will choose from any of the available icons completely at random.[33]
Only SeaMonkey doesn’t fetch favicon.ico files in the website’s root by default.[34]"


When a Force.com site is created, the default cloud logo(in accordance with the salesforce branding) is available on the "/favicon.ico" path of the site and there is no way of removing it.
So, we need to override it, with what we want it to be. 

Here are some further points to be noted with favicons:
 

1. If you observe an incorrect favicon,
Delete Browsing History (on the Tools menu) to clear the cache and the history store and try again.
 
2. Bitmaps, pngs, gifs, etc, will not work. It must actually be a .ico (an Icon) file. it must also be 16x16.
 
3. In order to set the same favicon for all pages:
Set the favicon at the site root level.
 
4. In order to set a different favicon for every page on a site:
Note: For some older Lightning Community Templates this is not possible as the login page is separate and cannot be overwritten.
Put a different tag on each page, pointing to a different icon. 

For Visualforce: 
<apex:page showHeader="false" > 
      <link REL="SHORTCUT ICON" HREF="{!URLFOR($Resource.favicon)}"> 
      OR
      <link REL="SHORTCUT ICON" HREF="<site url>/resource/favicon.ico?v=2" />
   ..... 
</apex:page>

 

For Experience Builder Sites:
Instead of linking to favicon in the head markup, add it to just that page via an HTML component, or Visualforce page. 


How to generate a favicon.ico file of the favicon you wish to use for these sites. 

  • There are a number of favicon generators available online which will convert your image to the right format.
  • Then, upload it as a Static Resource to your org. 
    1. Go to Setup | Static Resources
    2. Click the New button
    3. Give the static resource a name (for example, "FaviconSite").
    4. Select the file 
    5. Set the Cache Control (for ease of use, choose Public)
    6. Save

This will allow the favicon to be used in any section where a static resource can be chosen. This is recommended as the definitive way for many of the different types of Sites. 

What if I don't want ANY favicon to be displayed? How do I remove the cloud favicon?

  • The easiest way to do this is to upload a blank icon image as a static resource and follow the relevant steps below. 
NOTE : It's not possible to add Favicon on root level of a custom domain. Custom Favicon can only be added at site level.

Lösning

For a Force.com Site:

Assuming that you've already got the site domain setup (Setup | Sites | Register your site domain).

1. Add favicon (public cache control) as a static resource to the org
2. Create the Site (Setup | Sites | New), add your favicon Static Resource to the 'Sites Favourite Icon'
3. Save


If your site is not at the root path of the domain, then you will need to provide an appropriate link element in the page header to serve custom favicon: 

Example:

<link rel="shortcut icon" href="http://mydomain/mypath/favicon.ico" type="image/x-icon" />


Or, you can create an inactive site at the root path, and add the favicon to that site setting. Note: This will be the same favicon for all sites at different paths.

Notes:
This might take a while to work properly. One thing to consider is the use of multiple sites at different subdomains. For example, a site at favicontesting.force.com/ will load the favicon quicker than one at favicontesting.force.com/NotRootPath

If you are using showHeader="false" in a Force.com Site Visualforce page, the "Site Favorite Icon" setting will be ignored for that page. You would need to manually add the code for the icon, such as one of the following examples:

<apex:page showHeader="false" applyHtmlTag="false"> 
<head>
   <link rel="icon shortcut" href="{!$Resource.favicon}" />
   <!-- OR -->
   <link rel="icon shortcut" href="{!$Site.Prefix}/favicon.ico" />
  </head>
</apex:page>



For an Experience Builder Site:

Things to Note:

  • There are a number of ways to set a favicon for an Experience Builder site. For example, you could add the favicon.ico to the Assets folder of your Experience Cloud site in Site.com Studio and reference that file instead of the "Sites Favourite Icon"  which would be at: "/ + <site path> + <asset path>" 
Example in this case: 
<link rel="shortcut icon" href="/customers/s/favicon.ico">
  1. First, we should ensure that sites are enabled on the org: 
    1. Go to Setup | Digital Experiences | Settings
    2. Select Enable Digital Experiences 
    3. Register the Domain
  2. Then in Setup | Digital Experience | All Sites, create a new site, select the template and choose whether to give it a subdomain or not.


Then, here are the steps to add the favicon to the site:

1. Add favicon (public cache control) as a static resource to the organization
2. Create the site, and ensure the template is fully updated
3. Go to Experience Workspaces | Administration | Pages  Force.com
4. Click Edit. Add your favicon static resource to the 'Sites Favourite Icon' then Save
5. In Experience Builder, go to Settings | Advanced Edit Head Markup. 
6. Add the following: <link rel="shortcut icon" href="<SITE>/favicon.ico?v=2" /> 
Note: This works as adding the Favourite Icon in Force.com adds the static resource as the favicon with a name favicon.ico to the root part of the site.
For example: A community with /identity will mean that favicon is at /identity/favicon.ico.
The ?v=2 ensures it's refreshed and up to date.
The <SITE> would be the URL of the site. For example, whatever the URL value at Setup | Digital Experience | All Sites says. 
7. Save
8. Publish the site in Experience Builder, and also publish changes in Site.com Studio (Experience Workspaces | Administration | Pages | Site.com) 


You should now see that the favicon is visible on all pages.

Note: For older Lightning Community Templates (eg. Aloha Template), it is not possible to set the favicon on the login page. However, there is a workaround that MIGHT help. 

If you create a site at the root path of the domain, then set the "Site Favourite Icon", save, publish, and then deactivate the site, the favicon may be used for the login page of the active site. 


For a Tabs + Visualforce Site:

1. Add favicon (public cache control) as a static resource to the org
2. Create the site and ensure the template is fully updated
3. Go to Workspaces | Administration | Pages | Force.com.
4. Click Edit. Add your favicon static resource to the 'Sites Favourite Icon.'
5. Save.


Note: Your org only supports one favicon for workspace pages: the one assigned to the site that uses the root URL, not a site with a prefix. Let’s say you assign a favicon to workspace pages with a root prefix, and a favicon is also assigned to a site using the root URL. The workspace pages using the root prefix show the favicon assigned to the site using the root URL.

NOTE : Your favicon must be a multiple of 48px square, for example, 48x48px, 96x96px, 144x144px, and so on (or SVG with a 1:1 (square) aspect ratio). Any valid favicon format is supported.

Knowledge-artikelnummer

000383315

 
Laddar
Salesforce Help | Article