Loading
Salesforce から送信されるメールは、承認済ドメインからのみとなります続きを読む

Experience Cloud サイトまたは Salesforce サイトでカスタムファビコンを作成する

公開日: May 1, 2026
説明

ファビコンについて:

ブラウザのアドレスバーまたはタブに表示されるアイコンや、ページがブックマークされた場合に表示されるアイコンをファビコンと呼びます。
ファビコン (お気に入りアイコン) として使用するリソースは 16x16 サイズ、.ico 形式である必要があります。

Web サイトのファビコンを指定する方法はいくつかあります。一般標準については、こちらを参照してください。

1.プロファイルで定義した rel 属性値を使用する。
2.ルートパス上の定義済み URI にファビコンを配置する。


ファビコンへの要求はブラウザにより送信されます。上記のいずれかの方法にてファビコンがどのように解決されるかは、こちらで規定されています。

引用:「PNG と ICO ファビコンの両方へのリンクが存在する場合、PNG ファビコン対応のブラウザでは、使用する形式とサイズが次のように選択されます。Firefox と Safari は最後のファビコンを使用します。Mac 用 Chrome は ICO 形式のファビコンを使用し、それがない場合は 32×32 ファビコンを使用します。Windows 用 Chrome は、最初のファビコンが 16×16 の場合はそのファビコンを使用し、それ以外の場合は ICO を使用します。前述のどのオプションも使用できない場合、どちらの Chrome も最初のファビコンを使用します。これは、Firefox および Safari とは正反対です。Mac 用 Chrome は 16×16 ファビコンを無視し、32×32 バージョンを使用します。Retina 以外のデバイスでのみ 16×16 に縮小します。Opera は、使用可能な任意のアイコンを完全にランダムに選択します。[33]
SeaMonkey のみは、デフォルトで、Web サイトのルートにある favicon.ico ファイルを取得しません。[34]」


Salesforce サイトを作成すると、デフォルトの雲形のロゴ (Salesforce のブランド設定による) がサイトの「/favicon.ico」パスで使用できるようになりますが、これを削除する方法はありません。
そのため、これを必要なロゴで上書きする必要があります。

ファビコンについての注意事項を次にいくつか示します。

1.正しくないファビコンが確認された場合:
[閲覧の履歴の削除] ([ツール] メニュー) を選択してキャッシュと履歴をクリアし、もう一度試します。

2.ビットマップ、png、gif などは機能しません。ファビコンは実際には .ico (アイコン) ファイルであり、16x16 のサイズである必要があります。

3.すべてのページで同じファビコンを設定する方法:
サイトのルートレベルでファビコンを設定します。

4.サイトのページごとに異なるファビコンを設定する方法:
注意: 一部の古い Lightning コミュニティテンプレートでは、ログインページが独立していて上書きできないため、これを行うことはできません。
各ページに異なるタグを配置して、異なるアイコンを参照します。
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>

 

Experience ビルダーサイト:
ヘッドマークアップ内でファビコンにリンクするのではなく、html コンポーネントまたは Visualforce ページを介して該当のページにのみファビコンを追加します。 



これらのサイトで使用するファビコンの favicon.ico ファイルを生成する方法。 

  • いくつかのファビコンジェネレータをオンラインで使用できます。これを使用して画像を適切な形式に変換します。
  • 次に、画像を静的リソースとして組織にアップロードします。
    • [設定] | [静的リソース] に移動します。
    • [新規] ボタンをクリックします。
    • 静的リソースに名前を付けます (例:「FaviconSite」)。
    • ファイルを選択します。 
    • [キャッシュコントロール] を設定します (使いやすくするため、[公開] を選択)。
    • 保存します。

これにより、静的リソースを選択できるあらゆるセクションでファビコンを使用できます。これは、さまざまな種別のサイトがある場合の決定的な方法としてお勧めします。

どのファビコンも表示したくない場合はどうなります? 雲形のファビコンを削除する方法は?

  • 最も簡単な方法は、空のアイコン画像を静的リソースとしてアップロードし、関連手順を実行することです。 
解決策

Salesforce サイト:

サイトドメインをすでに設定していることを前提とします ([設定] | [サイト] | サイトドメインを登録)。

1.ファビコン (公開キャッシュコントロール) を静的リソースとして組織に追加します。
2.サイトを作成し ([設定] | [サイト] | [新規])、ファビコン静的リソースを [サイトのお気に入りアイコン] に追加します。
3.保存します。


サイトがドメインのルートパスにない場合、ページヘッダーに適切なリンク要素を指定して次のようにカスタムファビコンを提供する必要があります。

例:

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


または、ルートパスに無効なサイトを作成し、ファビコンをそのサイト設定に追加することもできます。
メモ: これはさまざまなパスの全サイトで共通のファビコンになります。

メモ:
適切に動作するまで少し時間がかかる場合があります。考慮事項の 1 つに、さまざまなサブドメインで複数のサイトを使用することがあります。たとえば、favicontesting.force.com/ のサイトでは、favicontesting.force.com/NotRootPath のサイトよりも短時間でファビコンが読み込まれます。

Salesforce サイトの Visualforce ページで howHeader="false" を使用している場合、そのページでは [サイトのお気に入りのアイコン] 設定が無視されます。次の例のいずれかのように、手動でアイコンのコードを追加することが必要になります。

<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>



Experience ビルダーサイト:

注意事項:

  • Experience ビルダーサイトのファビコンを設定する方法はいくつかあります。たとえば、Site.com Studio で favicon.ico を Experience Cloud サイトのアセットフォルダに追加し、そのファイルを [サイトのお気に入りアイコン] の代わりに参照することができます。ファイルは「/ + <community path> + <asset path>」にあります。 
この場合の例: 
<link rel="shortcut icon" href="/customers/s/favicon.ico">
  • まず、組織でサイトが有効になっていることを確認する必要があります。
    • [設定] | [コミュニティ設定] に移動します。
    • サイトを有効にします。
    • ドメインを登録します。
  • 次に、[設定] | [すべてのコミュニティ] で、新しいサイトを作成し、テンプレートを選択して、サイトにサブドメインを提供するかどうかを選択します。


次の手順に従って、ファビコンをサイトに追加します。

1.ファビコン (公開キャッシュコントロール) を静的リソースとして組織に追加します。
2.サイトを作成し、テンプレートが完全に更新されていることを確認します。
3.[エクスペリエンスワークスペース] | [管理] | [ページ] | Salesforce に移動します。
4.[編集] をクリックします。ファビコン静的リソースを [サイトのお気に入りアイコン] に追加します。保存します。
5.Experience ビルダーで、[設定] | [詳細] | [ヘッドマークアップを編集] に移動します。
6.次のコードを追加します: <link rel="shortcut icon" href="<SITE>/favicon.ico?v=2" /> 
注意: これは、Salesforce へのお気に入りアイコンの追加として機能し、静的リソースを favicon.ico という名前のファビコンとしてサイトのルート部分に追加します。例: /identity を含むサイトでは、ファビコンは /identity/favicon.ico にあります。?v=2 はファビコンが更新され、最新であることを保証します。
<SITE> はサイトの URL です。たとえば、[設定] | [すべてのコミュニティ] で設定されている URL 値です。 
7.保存します。
8.Experience ビルダーでコミュニティを公開し、Site.com Studio ([エクスペリエンスワークスペース] | [管理] | [ページ] | Site.com) で変更も公開します。 


ファビコンがすべてのページで表示されるようになります。


注意: 古い Lightning コミュニティテンプレート (Aloha テンプレートなど) では、ログインページでファビコンを設定することはできません。ただし、役に立つ場合がある回避策があります。
ドメインのルートパスでコミュニティを作成し、[サイトのお気に入りアイコン] を設定した後、サイトを保存、公開、無効化すると、有効なサイトのログインページでファビコンを使用できる場合があります。


タブ + Visualforce コミュニティ:

1.ファビコン (公開キャッシュコントロール) を静的リソースとして組織に追加します。
2.サイトを作成し、テンプレートが完全に更新されていることを確認します。
3.ワークスぺース | [管理] | [ページ] | Salesforce に移動します。
4.[編集] をクリックします。ファビコン静的リソースを [サイトのお気に入りアイコン] に追加します。
5.保存します。


 

ナレッジ記事番号

000383315

 
読み込み中
Salesforce Help | Article