各ウェブサイトビルダーでファビコンを変更する方法
ファビコンの変更方法
Webflow、Wix、Shopifyなどでファビコンを変更する方法 | We.Inc
Webflow、Squarespace、Wix、Shopify、WordPress、HTMLでのファビコン変更手順、公式のサイズ規定、Googleに古いアイコンが表示され続ける理由を解説します。
ファビコンを変更するには、ビルダーのサイト設定で新しい正方形の画像をアップロードし、公開します。Webflow、Squarespace、Wix、Shopify、WordPressにはそれぞれ専用のアイコン欄があります。手作りのサイトでは、ファイルとlink rel=iconタグを差し替えます。ブラウザーとGoogleはアイコンをキャッシュするため、古いアイコンがしばらく残ることがあります。
ファビコン設定の場所（2026年10月時点）
- Webflow
- サイト設定（ファビコンまたはアイコンの欄を探します）
- 最新のサイズ規定はWebflowのヘルプページで確認してください
- Squarespace
- ファビコンパネル
- 100x100〜300x300 px、.png、最大100 KB
- Wix
- 設定 > ウェブサイト設定 > ファビコン
- 48 pxの倍数の正方形（SVGを除く）
- Shopify
- テーマを編集 > テーマ設定 > ロゴまたはファビコン
- 16x16または32x32 px
- WordPress 6.5+
- 設定 > 一般 > サイトアイコン
- 正方形、512 px以上、.png推奨
下の一覧からお使いのビルダーを探してください。各手順はそれぞれのビルダーの公式ヘルプページに基づいています。手作りのサイトなら、最後のカードでlinkタグを自動作成できます。まだアイコンがない場合は、先に私たちのファビコンジェネレーターで作りましょう。
- 一覧からお使いのビルダーを探して手順に従い、プランによる制限も確認します。
- 手作りのサイトの場合は、アイコンファイルを置くフォルダーを入力するとlinkタグが作成されます。
- アップロードまたは貼り付けてサイトを公開し、プライベートウィンドウで開いて新しいアイコンを確認します。
- Googleの再クロールを待ちます。Googleのファビコンのヘルプによると、数日から数週間かかることがあります。
- アイコンは正方形にしましょう。Googleは縦横比1:1を必須とし、48x48ピクセルより大きいサイズを推奨しています。
- 公開後はアイコンのURLを変えないようにしましょう。Googleは安定したファビコンURLを求めています。
- robots.txtがアイコンファイルをブロックしていないか確認しましょう。GooglebotとGooglebot-Imageの両方が取得できる必要があります。
- 太くシンプルな形にしましょう。細かいディテールはタブのサイズでは見えなくなります。
よくある質問
Googleに古いファビコンが表示され続けるのはなぜですか？
Googleはホームページを再クロールしたときに新しいファビコンを取得します。ヘルプページによると、これには数日から数週間かかることがあります。Search ConsoleのURL検査ツールでホームページのインデックス登録をリクエストすれば、再クロールを早めるよう依頼できます。
ブラウザーに古いアイコンが表示され続けるのはなぜですか？
ブラウザーはファビコンを長期間キャッシュに保存します。Squarespaceのヘルプページでは、ブラウザーのキャッシュを削除してブラウザーを再起動するよう勧めています。プライベートウィンドウでサイトを開くと、新しいアイコンが本当に反映されているかをすぐ確認できます。
ShopifyのStarterプランや無料のWixサイトでファビコンを追加できますか？
2026年10月時点ではできません。Shopifyのヘルプページによると、Starterプランではファビコンを追加できません。WixではPremiumプランと接続済みのドメインが必要で、先にサイトを公開する必要があります。
ダークモードで別のファビコンを表示できますか？
一部のビルダーでは可能です。Squarespaceでは、デフォルトのアイコンを設定した後にダークモード版をアップロードできます。手作りのサイトでは、SVG内のprefers-color-schemeメディアクエリで色が変わるSVGアイコンを指定できます。
Googleがアイコンを表示するための条件
- Googleはホームページのhead内のlinkタグを読み取ります。relの値としてicon、shortcut icon、apple-touch-icon、apple-touch-icon-precomposedに対応し、ICO、PNG、GIF、JPEGなどの形式を受け付けます。
- Googleが表示するファビコンはホスト名ごとに1つです。shop.example.comのようなサブドメインは独自のファビコンを持てますが、example.com/shopのようなフォルダーは持てません。
ビルダーに設定項目がない場合
- プランによってファビコン欄が表示されない場合、ホスト型のビルダーではページのheadを自分で編集できないため、通常はアップグレードが唯一の方法です。セルフホストのサイトなら、いつでもlinkタグを手動で追加できます。
Googleのファビコン規定
Googleのファビコンのヘルプページより（2026年10月）
- サイズ
- 8x8 px以上。48x48より大きいサイズを推奨
- 形式
- ICO、PNG、GIF、JPEG、BMPなど有効なファビコン形式
- クロール
- GooglebotとGooglebot-Imageが取得できる必要があります
- 更新
- 数日から数週間。インデックス登録をリクエストすると早まります
コード例
ダークモードで切り替わるSVGファビコン
SVGをicon.svgとして保存します。内部のstyleブロックが、訪問者のシステムがダークモードのときに塗りの色を変えます。すべてのブラウザーがSVGアイコンを読めるわけではないので、favicon.icoも残しておきましょう。
お使いのビルダーの手順
手作りのサイト（HTML）
アイコンを置くフォルダー
SVGアイコンもある
すべてのページのheadに貼り付け
コピー
コピーしました。
先にfavicon.ico、icon.png（48x48以上）、apple-touch-icon.png（180x180）をそのフォルダーにアップロードしてください。
Webflow
- サイトの設定を開き、ファビコンまたはサイトアイコンの欄を探します。
- 正方形の画像を1枚アップロードします。
- 保存してからサイトを公開し、新しいアイコンを反映させます。
確認時にWebflowのヘルプページを読み込めなかったため、正確なメニュー名とサイズはご自身のダッシュボードの表示に従ってください。
Squarespace
- ファビコンパネルを開きます。
- 画像をアップローダーにドラッグするか、クリックしてファイルを選びます。
- 必要に応じてダークモード版を追加します（デフォルトのファビコンを設定した後のみ）。
- 「保存」をクリックします。
ヘルプページでは、100x100〜300x300ピクセル、.pngファイル、100 KB以下を推奨しています。
Wix
- サイトのダッシュボードで「設定」を開きます。
- 「ウェブサイト設定」をクリックします。
- ファビコンの下にある「画像をアップロード」をクリックします。
- ファイルを選択します。
Premiumプラン、接続済みのドメイン、公開済みのサイトが必要です。画像はSVGを除き、48 pxの倍数の正方形である必要があります。
Shopify
- Shopify管理画面で「オンラインストア」を開きます。
- テーマを探して「テーマを編集」をクリックします。
- テーマ設定のアイコンをクリックし、テーマに応じて「ロゴ」または「ファビコン」を選びます。
- ファビコン画像の下で「画像を選択」をクリックし、画像を選ぶか追加して「完了」をクリックします。
- 「保存」をクリックします。
Shopifyは16x16または32x32 pxを理想的なサイズとしています。Starterプランでは利用できません。
WordPress
- 512 px以上の正方形の画像をメディアライブラリにアップロードします。
- 「設定」から「一般」を開きます。
- 「サイトアイコンを選択」をクリックします。
- アップロードした画像を選びます。
バージョン6.5より前は、「外観」>「カスタマイズ」>「サイト基本情報」に設定がありました。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る