STUDIOのファビコン設定方法｜推奨サイズや反映されない時の対処法

STUDIOサイトにファビコンを設定しよう

STUDIO（studio.design）でWebサイトを作成したら、ファビコンの設定もお忘れなく。ファビコンを設定すると、ブラウザのタブやブックマーク、Google検索結果にサイト独自のアイコンが表示され、訪問者にプロフェッショナルな印象を与えます。

STUDIOでは画像を1枚アップロードするだけで設定できます。コードの編集は不要です。この記事では、設定手順から反映されないときの対処法まで詳しく解説します。

用意する画像

項目	推奨値
サイズ	512x512px
形状	正方形
形式	PNG
内容	サイトロゴ、ブランドシンボル、頭文字

STUDIOは、アップロードした画像をブラウザタブ・ブックマーク・スマホのホーム画面など各表示場所に合わせて自動的にリサイズしてくれます。そのため、大きめの512x512px画像を1枚用意するのがベストです。

48x48pxなど小さいサイズでも設定はできますが、スマホのホーム画面やブックマークでぼやける原因になります。

画像がない場合は、当サイトのファビコンデザイナーでサイト名の頭文字からデザインするのが手軽です。

ファビコンデザイナー図形やテキストを組み合わせてファビコンをデザイン

設定手順

ステップ1：デザインエディタを開く

STUDIOのダッシュボードからプロジェクトを選択し、デザインエディタを開きます。

ステップ2：何も選択していない状態にする

キャンバス上の何もない場所をクリックして、すべての要素の選択を解除します。ボックスが選択されているとファビコン設定が表示されません。これが最初のつまずきポイントです。

ステップ3：右パネルを開く

画面右上のトグルボタンで右パネルを表示します。パネル上部に「ページ」と「サイト」の2つのタブが表示されます。

ステップ4：サイトタブでファビコンを設定する

「サイト」タブを選択し、「ファビコン」セクションのアップロードボタンをクリックして画像を選択します。

サイトタブで設定したファビコンは、サイト全体のデフォルトとして適用されます。

ステップ5：公開して確認する

設定が完了したら、「公開」ボタンをクリックしてサイトを更新します。ファビコンの変更は公開後に反映されます。

ブラウザタブを確認し、ファビコンが表示されていれば完了です。表示されない場合は Ctrl+Shift+R（Mac: Cmd+Shift+R）でスーパーリロードを試してください。

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

STUDIOでは、ファビコンをサイト全体とページ個別の2レベルで設定できます。

設定場所	適用範囲	優先度
サイトタブ	サイト全体（デフォルト）	低い
ページタブ	そのページのみ	高い（上書き）

ページタブで個別にファビコンを設定すると、そのページだけサイト全体の設定より優先されます。通常はサイトタブで1つ設定すれば十分ですが、LPなどでページごとに異なるアイコンを使いたい場合はページタブを活用できます。

なお、モーダルにはファビコンを設定できません。

OGP画像（カバー画像）も一緒に設定しよう

ファビコンと同じ右パネルで、OGP画像（カバー画像）も設定できます。OGP画像はSNSでサイトをシェアしたときにサムネイルとして表示される画像です。

項目	推奨値
サイズ	1200x630px
形式	JPEG または PNG
ファイルサイズ	5MB以下

ファビコンと同様に、サイトタブで全体のデフォルトを設定し、必要に応じてページタブで個別に上書きできます。

反映されないときの対処法

ブラウザタブにファビコンが表示されない

サイトを公開したか確認する — ファビコンの変更は公開後に反映されます。編集中のプレビューには反映されない場合があります
ブラウザのキャッシュをクリアする — スーパーリロード（Ctrl+Shift+R）を試す。それでもダメなら、シークレットモードで確認
画像がアップロードされているか確認する — 右パネルのファビコン欄にサムネイルが表示されているか確認。表示されていなければ再アップロード

Google検索結果にファビコンが反映されない

Google検索結果への反映には数日〜数週間かかります。設定直後に表示されないのは正常です。

よくある状況：

検索結果にSTUDIOのロゴが表示される → カスタムファビコンがまだGoogleにインデックスされていない
Googleがファビコンを丸くクリッピングして表示する → これはGoogleの仕様です

反映を早めるには：

Google Search Consoleで再クロールをリクエストする（STUDIOの有料プランが必要）
ファビコンのサイズが48pxの倍数（48x48、96x96等）であることを確認する

Google検索結果でのファビコン表示については以下の記事で詳しく解説しています。

Google検索結果で丸くトリミングされて見切れる

Googleはモバイル検索結果でファビコンを丸くクリッピングして表示します。四隅ぎりぎりまでデザインを詰めていると、角が切れて見栄えが悪くなります。

対策： ファビコンの中心80%の範囲内にロゴや文字を収め、周囲にパディングを確保する。背景色を塗っておくと、丸くトリミングされても自然に見えます。

Apple Touch Iconとスマホ対応

STUDIOでは、アップロードしたファビコンがスマホのホーム画面に追加した際のアイコンとしても自動的に使用されます。Apple Touch Iconを別途設定するUIはありません。

そのため、ファビコンとして512x512pxの十分な解像度の画像をアップロードしておくことが重要です。48x48pxなど小さい画像だと、スマホのホーム画面で拡大されてぼやけます。

Apple Touch Iconの仕様やデザインのコツについて詳しくは以下の記事を参照してください。

STUDIOの制約と注意点

項目	内容
HTMLの直接編集	不可。`<link rel="icon">` タグはSTUDIOが自動生成
ICO形式のアップロード	不要。PNG画像をアップロードすればSTUDIOが内部で処理
SVGファビコン	アップロード可能
複数サイズの個別指定	不可。1枚の画像から自動リサイズ
Search Console連携	有料プランのみ
モーダルへのファビコン設定	不可

STUDIOはコードを書かずにすべて完結するため、HTMLを直接編集する必要はありません。逆に言えば、<link rel="icon" type="image/svg+xml"> のような細かい指定はできないため、ファビコンの高度なカスタマイズ（SVGダークモード切替など）には対応していません。

よくある質問（FAQ）

Q. 無料プランでもファビコンは設定できる？

はい。ファビコンの設定は無料プランでも利用可能です。ただし、Google Search Consoleとの連携（検索結果への反映を早めるため）は有料プランが必要です。

Q. ファビコンの推奨形式は？

PNG形式の512x512px正方形が推奨です。SVGもアップロード可能です。ICO形式に変換する必要はありません。

Q. ダッシュボードにファビコン設定が見つかりません

ファビコンの設定はダッシュボードではなく、デザインエディタの右パネルにあります。デザインエディタを開き、何も選択していない状態で右パネルの「サイト」タブを確認してください。

Q. ページごとに違うファビコンを使える？

はい。右パネルの「ページ」タブで個別にファビコンを設定すると、そのページだけサイト全体の設定を上書きできます。

Q. 他のノーコードツールではどう設定する？

各プラットフォームの設定方法をまとめた記事があります。

まとめ

ステップ	内容
1. 画像を用意	512x512pxのPNG（正方形）
2. デザインエディタを開く	何も選択せず右パネルを表示
3. サイトタブでアップロード	ファビコン欄に画像を設定
4. 公開する	公開後にブラウザタブで確認

STUDIOでは1枚の画像をアップロードするだけで、ブラウザタブ・ブックマーク・スマホのホーム画面すべてに自動対応します。まだ設定していない方は、ぜひ試してみてください。

ファビコンの画像をまだお持ちでない方は、こちらから作成できます。