如何在Salesforce Experience Builder中基于域名动态切换Favicon？

下面是几种可行的实现方式，你可以根据自己的站点类型选择：

一、前端JavaScript动态替换（通用方案） #

这是适配性最强的方案，几乎适用于所有类型的Salesforce站点：

1. 先把每个域名对应的图标上传为Salesforce静态资源，比如命名为DomainA_Favicon、DomainB_Favicon
2. 在站点的全局页眉/页脚组件中添加自定义JavaScript代码，通过检测当前访问域名切换图标：

// 获取当前访问的域名
const currentDomain = window.location.hostname;
// 定义域名与对应静态资源的映射关系
const faviconMap = {
  "domain-a.com": "/resource/DomainA_Favicon",
  "domain-b.com": "/resource/DomainB_Favicon",
  // 可继续添加更多域名的映射规则
};
// 找到页面中已有的favicon标签
let faviconTag = document.querySelector('link[rel="icon"]') || document.querySelector('link[rel="shortcut icon"]');
// 如果页面没有favicon标签，创建一个新的
if (!faviconTag) {
  faviconTag = document.createElement('link');
  faviconTag.rel = 'icon';
  document.head.appendChild(faviconTag);
}
// 匹配并设置对应域名的图标
if (faviconMap[currentDomain]) {
  faviconTag.href = faviconMap[currentDomain];
}

• 提示：如果担心浏览器缓存旧图标，可以在资源URL后加版本号，比如/resource/123/DomainA_Favicon（123是静态资源的版本ID）

二、Visualforce站点专属方案（结合后端控制器） #

如果你的站点基于Visualforce构建，可以通过后端逻辑配合页面渲染实现：

1. 在Visualforce控制器中获取当前请求的域名，并返回对应图标URL：

public with sharing class FaviconController {
    public String getCurrentDomain() {
        return ApexPages.currentPage().getHeaders().get('Host');
    }
    
    public String getFaviconUrl() {
        String domain = getCurrentDomain();
        if (domain.contains('domain-a.com')) {
            return '/resource/DomainA_Favicon';
        } else if (domain.contains('domain-b.com')) {
            return '/resource/DomainB_Favicon';
        }
        // 域名未匹配时返回默认图标
        return '/resource/Default_Favicon';
    }
}

2. 在Visualforce页面的<head>区域引用控制器返回的图标URL：

<apex:page controller="FaviconController">
    <head>
        <link rel="icon" href="{!faviconUrl}" type="image/x-icon" />
    </head>
    <!-- 页面其他内容 -->
</apex:page>

三、Experience Cloud站点方案（自定义LWC组件） #

如果是Experience Cloud（原社区云）站点，可以通过自定义LWC组件实现：

1. 创建LWC组件，编写检测域名并渲染图标的逻辑：

import { LightningElement } from 'lwc';
import DomainA_Favicon from '@salesforce/resourceUrl/DomainA_Favicon';
import DomainB_Favicon from '@salesforce/resourceUrl/DomainB_Favicon';

export default class DynamicFavicon extends LightningElement {
    connectedCallback() {
        const currentDomain = window.location.hostname;
        let faviconUrl;
        if (currentDomain === 'domain-a.com') {
            faviconUrl = DomainA_Favicon;
        } else if (currentDomain === 'domain-b.com') {
            faviconUrl = DomainB_Favicon;
        }
        this.updateFavicon(faviconUrl);
    }

    updateFavicon(url) {
        let faviconTag = document.querySelector('link[rel="icon"]') || document.querySelector('link[rel="shortcut icon"]');
        if (!faviconTag) {
            faviconTag = document.createElement('link');
            faviconTag.rel = 'icon';
            document.head.appendChild(faviconTag);
        }
        faviconTag.href = url;
    }
}

2. 将这个组件添加到Experience站点的全局页眉区域，确保所有页面都会加载该组件。

通用注意事项 #

• 确保所有图标静态资源的访问权限设置正确，站点用户组拥有读取权限
• 测试不同域名下的切换效果，注意浏览器缓存问题，必要时添加版本号或缓存控制参数
• 图标文件推荐使用.ico格式，同时包含16x16、32x32等多种尺寸，适配不同设备

内容的提问来源于stack exchange，提问作者K Dilip Kumar