Loading

Création d’une favicon personnalisée sur votre site Experience Cloud ou Force.com

Date de publication: May 1, 2026
Description
À propos des favicons :

L’icône affichée dans la barre d’adresse et l’onglet du navigateur ou lorsque la page est dans vos favoris s’appelle une favicon (icône de favoris).
L’image de la favicon doit avoir une taille de 16x16 et être au format .ico. 

Il existe plusieurs façons d’ajouter une favicon à un site Web (les normes à respecter sont répertoriées ici) :
1. En utilisant une valeur d’attribut rel définie dans un profil
2. En associant la favicon à un URI prédéfini à la racine du site.

Les requêtes favicon sont envoyées par le navigateur selon l’une des méthodes ci-dessus, comme indiqué ici :

EXTRAIT : « Si des liens redirigent vers les favicons PNG et ICO, les navigateurs compatibles avec les favicons PNG sélectionnent le format et la taille à utiliser de la façon suivante. Firefox et Safari utiliseront la favicon indiquée en dernier. Chrome pour Mac utilisera la favicon au format ICO ou la favicon au format 32×32. Chrome pour Windows utilisera la favicon indiquée en premier si sa taille est de 16×16. Sinon, il choisira la favicon au format ICO. Si aucune des options précédentes n’est disponible, les deux versions de Chrome utiliseront la favicon indiquée en premier, à l’inverse de Firefox et de Safari. En effet, Chrome pour Mac ignorera la favicon au format 16×16 et utilisera la version 32×32 qu’il réduira au format 16×16 pour les appareils non équipés d’un écran Retina. Opera choisira la favicon aléatoirement parmi toutes les icônes disponibles.[33]
Seul SeaMonkey ne récupère pas les fichiers favicon.ico à la racine du site Web par défaut.[34] »


Lorsqu’un site Force.com est créé, le logo en forme de nuage par défaut (identité de la marque Salesforce) est disponible par le biais du chemin d’accès « /favicon.ico » du site. Il est alors impossible de le supprimer.
Pour le remplacer, il faut donc trouver une autre image. 

Bon à savoir :
 
1. Si une favicon est incorrecte,
effacez l’historique de navigation (dans le menu Outils) pour vider le cache et la mémoire de l’historique, puis réessayez.
 
2. Les fichiers .bitmap, .png, .gif, etc. ne fonctionneront pas. Il vous faut un fichier .ico (une icône) de 16x16.
 
3. Pour définir la même favicon pour toutes les pages :
Définissez la favicon à la racine du site.
 
4. Pour définir une favicon différente pour chaque page d’un site :
Remarque : pour certains modèles de communauté Lightning plus anciens, il est impossible de définir une favicon différente pour chaque page, car la page de connexion est indépendante et ne peut pas être remplacée.
Ajoutez sur chaque page une balise différente qui redirige vers une icône distincte. 

Pour Visualforce :
<apex:page showHeader="false" >        <link REL="ICÔNE RACCOURCI" HREF="{!URLFOR($Resource.favicon)}">        OU <link REL="ICÔNE RACCOURCI" HREF="<url site>/resource/favicon.ico?v=2" />    .....  </apex:page>

 

Pour les sites Experience Builder :
Au lieu de créer un lien vers la favicon dans la balise <head>, ajoutez la favicon uniquement à cette page via un composant HTML ou une page Visualforce. 


Comment générer un fichier .ico de la favicon à utiliser : 
  • Il existe de nombreux générateurs de favicons en ligne que vous pouvez utiliser pour convertir votre image au bon format.
  • Ensuite, importez votre favicon en tant que ressource statique dans votre organisation. 
    1. Accédez à Configuration | Ressources statiques.
    2. Cliquez sur le bouton Nouveau.
    3. Nommez la ressource statique (par exemple, « SiteFavicon »).
    4. Sélectionnez le fichier. 
    5. Définissez l’en-tête Cache-Control (choisissez Public).
    6. Enregistrez
Ainsi, la favicon pourra être utilisée dans n’importe quelle section où une ressource statique peut être choisie. Cette méthode définitive est recommandée pour de nombreux sites. 

Et si je ne veux pas afficher de favicon ? Comment supprimer la favicon en forme de nuage ?
  • Le plus simple est d’importer une image d’icône vide en tant que ressource statique et de suivre les étapes adéquates ci-dessous. 
Résolution

Pour un site Force.com :

En supposant que vous avez déjà configuré le domaine du site (Configuration | Sites | Enregistrer le domaine de votre site).
1. Ajoutez une favicon (contrôle de cache public) en tant que ressource statique à l’organisation.
2. Créez le site (Configuration | Sites | Nouveau) et ajoutez votre ressource statique de favicon à « Icône de favoris du site ».
3. Enregistrez

Si votre site n’est pas à la racine du domaine, vous devrez fournir un élément de lien approprié dans l’en-tête de la page pour y apporter la favicon personnalisée : 

Exemple :
<link rel="icône raccourci" href="http://mondomaine/monchemin/favicon.ico" type="image/x-icon" />

Vous pouvez également créer un site inactif sur le chemin racine et ajouter la favicon à ce paramètre de site. Remarque : la même favicon sera utilisée pour tous les sites sur des chemins différents.

Remarques :
L’application de cette configuration peut prendre un certain temps. Vous pouvez envisager d’utiliser plusieurs sites avec différents sous-domaines. Par exemple, un site sur favicontesting.force.com/ chargera la favicon plus rapidement qu’un site sur favicontesting.force.com/PasCheminRacine.

Si vous utilisez showHeader="false" dans une page Visualforce du site Force.com, le paramètre « Icône de favoris du site » sera ignoré pour cette page. Vous devrez ajouter manuellement le code de l’icône, comme dans l’un des exemples suivants :
<apex:page showHeader="false" applyHtmlTag="false"> <head> <link rel="raccourci icône" href="{!$Resource.favicon}" /> <!-- OU --> <link rel="raccourci icône" href="{!$Site.Prefix}/favicon.ico" /> </head> </apex:page>


Pour un site Experience Builder :

Remarques :
  • Il existe plusieurs moyens de définir une favicon pour un site Experience Builder. Vous pouvez par exemple ajouter le fichier favicon.ico au dossier Ressources de votre site Experience Cloud dans Site.com Studio et référencer ce fichier au lieu de « Icône de favoris du site », qui se trouverait à l’emplacement suivant : « / + <site path> + <asset path> » 
Exemple dans ce cas : 
<link rel="icône raccourci" href="/customers/s/favicon.ico">
  1. Nous devons dans un premier temps nous assurer que les sites sont activés dans l’organisation : 
    1. Accédez à Configuration | Expériences numériques | Paramètres.
    2. Sélectionnez Activation des expériences numériques. 
    3. Enregistrez le domaine.
  2. Puis dans Configuration | Expériences numériques | Tous les sites, créez un site, sélectionnez le modèle et choisissez de lui attribuer un sous-domaine ou non.

Voici les étapes à suivre ensuite pour ajouter la favicon au site :
1. Ajoutez une favicon (contrôle de cache public) en tant que ressource statique à l’organisation.
2. Créez le site et assurez-vous que le modèle est entièrement mis à jour.
3. Accédez à Espaces de travail de l’expérience | Administration | Pages Force.com.
4. Cliquez sur Modifier. Ajoutez votre ressource statique favicon à « Icône de favoris du site », puis Enregistrez.
5. Dans Experience Builder, accédez à Paramètres | Modification avancée du balisage d’en-tête. 
6. Ajoutez le texte suivant : <link rel="icône raccourci" href="<SITE>/favicon.ico?v=2" /> 
Remarque : l’ajout de l’icône de favoris dans Force.com ajoute la ressource statique en tant que favicon avec le nom favicon.ico dans la partie racine du site.
Par exemple : une communauté avec /identity signifiera que la favicon est à l’emplacement /identity/favicon.ico.
Le texte ?v=2 permet de s’assurer qu’elle est actualisée et à jour.
La partie <SITE> serait l’URL du site. Par exemple, la valeur de l’URL indiquée dans Configuration | Expérience numérique | Tous les sites. 
7. Enregistrez.
8. Publiez le site dans Experience Builder et publiez également les modifications dans Site.com Studio (Espaces de travail de l’expérience | Administration | Pages | Site.com). 

La favicon doit maintenant être visible sur toutes les pages.


Remarque : pour les modèles de communauté Lightning plus anciens (par exemple le modèle Aloha), il n’est pas possible de définir la favicon sur la page de connexion. Il existe néanmoins une solution de contournement qui pourrait peut-être aider. 

Si vous créez un site à la racine du domaine, puis définissez « Icône de favoris du site », enregistrez, publiez, puis désactivez le site, la favicon pourrait être utilisée pour la page de connexion du site actif. 


Pour un site Visualforce à onglets :
1. Ajoutez une favicon (contrôle de cache public) en tant que ressource statique à l’organisation.
2. Créez le site et assurez-vous que le modèle est entièrement mis à jour.
3. Allez dans Espaces de travail | Administration | Pages | Force.com.
4. Cliquez sur Modifier. Ajoutez votre ressource statique favicon à « Icône de favoris du site ».
5. Enregistrez.

Remarque : votre organisation ne prend en charge qu’une seule favicon pour les pages d’espace de travail, à savoir celle attribuée au site qui utilise l’URL racine, et non un site avec un préfixe. Supposons que vous attribuez une favicon aux pages de l’espace de travail avec un préfixe racine, et qu’une favicon est également attribuée à un site au niveau de l’URL racine. Les pages de l’espace de travail utilisant le préfixe racine affichent la favicon attribuée au site qui emploie l’URL racine.
Numéro d’article de la base de connaissances

000383315

 
Chargement
Salesforce Help | Article