Webflowのファビコン設定方法とウェブクリップの追加

Webflowでファビコンとウェブクリップを追加する方法を解説。Iconsの設定場所、自動生成されるサイズ、公開手順、反映されないときの対処法まで紹介します。

よくある質問

Webflowのファビコンは何ピクセルにすればよいですか?

Webflowのヘルプセンターでは、ファビコンは32x32、ウェブクリップは256x256と案内されています。現在の仕様では正方形の画像を1枚アップロードすれば、残りのサイズはWebflowが自動で生成します。そのため、256x256ピクセル以上の正方形で、縮小しても見分けがつくデザインのファイルを用意しておけば問題ありません。

Webflowでファビコンはどこからアップロードしますか?

Site settings(サイト設定)を開き、Generalタブの「Icons」セクションに進みます。正方形の画像をアップロードし、更新するアイコンを選んで変更を適用したら、サイトを公開(Publish)してください。古い解説記事では「Project settings」と呼ばれていますが、同じ場所です。

Webflowのウェブクリップとは何ですか?

ウェブクリップは、サイトをスマートフォンのホーム画面などにショートカットとして保存したときに表示される、大きめのアイコンです。Webflowでは256x256ピクセルとされています。ブラウザのタブに表示される小さなアイコン(ファビコン)とは別のものです。

Webflowでファビコンをアップロードしたのに表示されないのはなぜですか?

最も多い原因は、アップロード後にサイトを公開していないことです。アイコンは公開済みのサイトにしか反映されません。次に多いのがブラウザのキャッシュです。アップロードに失敗したと判断する前に、まず公開を行い、プライベートウィンドウや別のブラウザで確認してみてください。

WebflowはSVGやダークモード用のファビコンに対応していますか?

Webflowのアップデート情報によると、PNG、JPG、GIF、ICO、SVGをアップロードできます。ヘルプ記事には、ダークモード用のタブアイコンを任意で設定できるとも書かれています。なお、SVGはブラウザ間の互換性のためにPNGへ変換されるので、主要なブラウザで見え方を確認しておきましょう。

新しいWebflowのファビコンがGoogleに表示されるまでどれくらいかかりますか?

決まった期間はありません。検索結果のアイコンを再クロールして更新するタイミングはGoogleが判断するもので、コミュニティの報告では数日から数週間、場合によってはそれ以上かかることもあるようです。こちらでコントロールできるのは、公開サイトにアイコンが正しく反映されている状態にしておくことです。

結論: Webflowでは、Site settings > General > Iconsを開き、正方形の画像を1枚アップロードします。更新するアイコン(ライトモード用ファビコン、任意のダークモード用ファビコン、ウェブクリップ)を選んで変更を適用し、サイトを公開(Publish)してください。Webflowが案内しているサイズはファビコン32x32、ウェブクリップ256x256で、それ以外のサイズはアップロードした画像から自動生成されます。公開するまでは、ライブサイトには何も反映されません。(2026年11月時点のWebflowヘルプセンターとアップデート情報で確認済み)

Webflowが求めるもの

古い解説記事では、32x32のファビコンと256x256のウェブクリップを別々にアップロードする手順が紹介されています。一方、Webflowの現在のヘルプ記事では、正方形の画像を1枚アップロードすればサイズ調整はWebflowが行う、というシンプルな流れになっています。それぞれのアイコンの役割は次のとおりです。

アイコンWebflowが案内するサイズ表示される場所
ファビコン(ライト)32x32ブラウザのタブ、ブックマーク
ファビコン(ダークモード、任意)32x32ブラウザがダークモードのときのタブ
ウェブクリップ256x256ホーム画面のショートカットなど、保存されたリンク
自動生成されるその他のアイコン48x48のファビコン、180x180と192x192のタッチアイコンアップロードした画像からWebflowが生成

Webflowのアップデート情報によると、アップロードできる形式はPNG、JPG、GIF、ICO、SVGです。SVGはブラウザ間の互換性を確保するため、PNGに変換されます。

プラットフォームごとのサイズについて詳しくは、ファビコンのサイズガイドをご覧ください。

先に画像を準備する

ファビコンはタブ上では幅16〜32ピクセル程度で表示されるため、設定そのものよりも元の画像のほうが重要です。

  • 正方形で作る。 ウェブクリップが引き伸ばされないよう、256x256以上の正方形のキャンバスで書き出します。
  • シンプルにする。 ロゴ全体ではなく、ロゴマークか1文字だけを使いましょう。細かい要素はタブサイズでは潰れてしまいます。
  • 背景に注意する。 透過PNGはライトモードのタブでは見栄えがよくても、ダークモードでは見えなくなることがあります。ダークモード用のファビコンを使う場合は、明るい色のマークで別バージョンを作成してください。
  • ファイル名は無難にする。 アップロードしたアセットの名前が公開HTMLに含まれることがあるため、「final_v3_REAL.png」のような名前は避けましょう。

Webflowでファビコンとウェブクリップを追加する手順

  1. WebflowのDesignerまたはダッシュボードでプロジェクトを開き、Site settingsに移動します。
  2. Generalタブを選び、Iconsまでスクロールします。
  3. Upload iconをクリックし、正方形の画像を選択します。
  4. 画像で更新するアイコン(ファビコン、任意のダークモード用ファビコン、ウェブクリップ)を選びます。
  5. ダークモード用に別のアイコンを使いたい場合は、ダークモード用のスロットに追加します。この手順は任意です。
  6. Applyをクリックします。UIの表記はWebflowのアップデートで多少変わることがあるので、表示されているラベルに合わせて操作してください。
  7. サイトをドメインに公開(Publish)します。保存しただけではアイコンはライブサイトに反映されません。
  8. プライベートウィンドウでライブサイトを開き、タブのアイコンを確認します。

コピーして使えるチェックリスト

`` [ ] 256x256以上の正方形の元画像を用意した [ ] タブサイズでも読み取れるシンプルなマークにした [ ] ライトとダークの両方のブラウザテーマで確認した [ ] Site settings > General > Iconsからアップロードした [ ] 変更を適用した [ ] 本番ドメインに公開した(webflow.ioのステージングドメインだけでなく) [ ] プライベートウィンドウで確認した [ ] 古いアイコンが残る場合は、ハードリロードまたはキャッシュ削除を行った ``

トラブルシューティング

古いアイコンやWebflowのロゴが表示されたままになる

次の順番で確認してください。

  1. もう一度公開する。 アイコンは公開して初めてライブサイトに反映されます。複数のドメインに公開している場合は、すべてのドメインを対象にしてください。
  2. プライベートウィンドウで確認する。 ブラウザはファビコンを強力にキャッシュするため、通常のタブでは古いアイコンが長く表示され続けることがあります。
  3. ページをハードリロードするか、ブラウザをいったん閉じて開き直します。
  4. ファイルを直接開く。 ページのソースに記載されているアイコンのURLを、別のタブで開けるか確認します。

アップロードが拒否される、または画像が歪む

正確なピクセル数を求める古い仕様では、サイズエラーが出るという報告がコミュニティのスレッドにいくつかあります。その場合は正方形の画像を使って再度試し、それでも直らなければ別のブラウザやプライベートウィンドウで試してください。これはWebflowの公式ドキュメントではなくフォーラムの報告に基づく内容なので、あくまで回避策として参考にしてください。

Googleの検索結果に違うアイコンが表示される

検索結果のアイコンを管理しているのはWebflowではなくGoogleです。コミュニティのスレッドでは、更新に数日から数週間、あるいはそれ以上かかるという声があります。ライブサイトでアイコンが正しく読み込まれることを確認したら、あとは待ちましょう。正方形のアイコンを同じURLで安定して配信しておくと有利です。

タブでアイコンがぼやける

元の画像のディテールが細かすぎるか、そもそも解像度が低いことが主な原因です。よりシンプルなマークを大きなサイズで作り直し、再度アップロードしてください。

どの形式でアップロードすべきか

形式向いている用途注意点
PNGほとんどのサイト。信頼性が高く、透過にも対応ウェブクリップ用に十分な解像度が必要
SVGきれいなベクター素材WebflowがPNGに変換するため、仕上がりをプレビューで確認する
ICO従来のワークフローWebflowがサイズを自動生成するため、不要なことが多い
JPG選ぶ場面はほとんどない透過できず、背景の四角が残る

迷ったら、256x256以上の正方形のPNGがもっとも無難です。

公開準備の中での位置づけ

ファビコンは、タイトル、ディスクリプション、SNS用画像と並ぶ、公開前チェックリストの項目のひとつです。プラットフォーム選びで迷っている方は、Webflowの比較とWebflowの代替サービスのページで、それぞれのメリットとデメリットを確認できます。複数のプラットフォームでサイトを運用している場合は、ファビコン変更の総合ガイドも参考になります。

できあがったレイアウトから始めたい方には、We.Incの無料プランがあります。用意済みのテンプレートから最大3サイトまで公開できます。プロンプトからサイトの下書きを作るAIビルダーは、月額$20のStarterプランから利用できます。こちらから登録できます。

無料で始める · クレジットカード不要

Umair Ali Sadaqat

We.Inc創業者

UmairはWe.Incの創業者です。AIによるウェブサイト制作、制作会社、ウェブ制作スタジオの経営について執筆しています。

素晴らしいものを作る準備はできましたか？

立ち上げ、成長、自動化のすべてを1つのプラットフォームで行う15,000+社がWe.Incを利用しています。

無料で始める

クレジットカード不要 · 営業担当に相談する

関連: ブログ｜デジタルマーケティングと集客のヒント

製品

ご利用いただける方

機能

リソース

会社情報

サイトマップを見る