ファビコン（ブラウザタブのアイコン）を変更する
新規追加（標準スコープ補完）
ブラウザのタブやブックマーク一覧に表示される 小さなアイコン を「ファビコン（Favicon）」と呼びます。ブランディングの基本要素です。 実画面例: faviconやサイト名などの基本設定は、Site settingsのGeneral周辺で確認することがあります。
1. ファビコンとは？
ブラウザのタブの左端、またはブックマークバーに表示される小さなアイコンのことです。
例:
- Google タブ → カラフルな「G」
- Apple タブ → りんごマーク
- 自社サイト → 自社ロゴの簡易版
ロゴをそのまま小さくしたものや、ロゴの一部（マーク部分のみ）を使うことが多いです。
2. 準備するファイル
ファビコンは2種類用意するのがベストプラクティスです：
| 用途 | サイズ | 形式 |
|---|---|---|
| Favicon（標準） | 32×32 px | PNG または ICO |
| Webclip（iOSホーム画面用） | 256×256 px | PNG |
ヒント: デザイナーが用意したファビコン用画像があるはずです。制作担当者から受け取ったファイル を使ってください。
3. Webflow での変更手順
- Webflow にログインし、対象サイトの Project Settings を開く
- 左メニューから 「General」 タブを選択
- 「Favicon & Webclip」 セクションまでスクロール
- Favicon の Upload ボタンをクリックして 32×32 px のファイルをアップロード
- Webclip の Upload ボタンをクリックして 256×256 px のファイルをアップロード
- ページ下部の Save Changes をクリック
- Designer モードを開いて Publish することで、サイトに反映されます
4. 反映確認
ファビコンはブラウザに強くキャッシュされるため、変更後すぐに反映されない ことがあります。
確認方法:
- ブラウザで対象サイトを開く
- スーパーリロード（Windows: Ctrl+F5 / Mac: Cmd+Shift+R）
- それでも反映されない場合は シークレットモード で開く
- しばらく時間を置いて再確認
5. よくある質問 (Q&A)
ファビコンが正方形でないとどうなりますか？
ブラウザによっては自動で正方形にトリミングされ、変な見た目になります。必ず正方形（1:1） で用意してください。
ロゴを小さくしただけだと潰れて見えません。どうすれば？
ロゴの一部（マーク部分のみ）を使うか、32×32 px 専用に再デザイン されたものを IGNITE公式サイトのお問い合わせフォーム から依頼するのがおすすめです。
SVG 形式は使えますか？
最近の Webflow は SVG ファビコンに対応していますが、互換性を重視するなら PNG が無難です。
次のステップ: 既存ページを複製して新しいページを作る方法を学びましょう → 「既存ページを複製して新しいページを作る」