メインコンテンツにスキップ

ファビコンを設定する

Studioでサイトのファビコン(Favicon)を設定する方法と注意点を解説します。

今日アップデートされました

ファビコン(Favicon)とは

ファビコン(Favicon)とは、ブラウザのタブやブックマークリストに表示されるサイトを象徴するアイコンです。

サイトをスマートフォンのホーム画面に設置した際も、カバー画像としてファビコンが適用されます。

ファビコンは、サイト全体、またはページごとに設定できます。

注意:モーダルにはファビコンを設定できません。


この記事では、ファビコンの設定手順を紹介します。

(1) サイト設定パネル・ページ設定パネルを開く

要素(ボックス)を何も選択していない状態で、右パネルを開きます。

ページ設定は[ページ]タブで編集し、サイト設定は[サイト]タブで編集します。

Point:サイト設定とページ設定の違い

Studioでは、タイトルとディスクリプションをサイト単位とページ単位の両方で設定できます。

  • サイト設定:サイト全体に適用されます。ページ設定が未入力のページにはサイト設定の内容が適用されます。

  • ページ設定:個別のページのみに適用され、サイト設定より優先されます。

(2) 画像をアップロードする

[ファビコン]の項目で画像アップロードボタンをクリックし、使用する画像ファイルを選択します。

推奨サイズ:48x48ピクセル以上(Google検索セントラルより)

ファイルサイズが大きすぎる場合、画像が正しく読み込まれないことがあります。

アップロードした画像を削除する場合は、画像をホバーし、右上に出る[×]をクリックします。

(3) サイトを公開・更新する

画像の設定や変更を行った後は、サイトを公開または更新して、設定内容を反映します。すでに公開済みのサイトでファビコンを変更した場合は、サイトを更新するまで外部サービスには反映されません。

注意:公開サイトへの反映のタイムラグについて

ファビコンをサイト公開後に編集する場合、SNSや検索エンジンに変更が反映されるまでには時間がかかることがあります。

こちらの回答で解決しましたか?