Squarespaceで作成した素晴らしいデザインのウェブサイトなのに、ブラウザのタブに汎用的な灰色の四角や空白のアイコンが表示されているのを見たことはありませんか？これは小さなことですが、ファビコンが欠けていたり、最適化されていなかったりすると、「未完成」という印象を与えてしまいがちです。ファビコンは、混み合ったブラウザタブの中で、あなたのブランドの小さな看板として機能します。Squarespaceでどこをクリックすれば良いかを知っていれば、これを正しく設定するのは驚くほど簡単です。（そして、これは単にフルロゴを縮小するだけではありませんよ。私を信じてください。）
Prerequisites
Squarespaceのインターフェースに飛び込む前に、2つの準備が必要です。
ウェブサイトの管理権限を持つSquarespaceアカウント。
ファビコン画像。理想的には正方形のPNGファイルです。Squarespaceは最低300x300ピクセルを推奨していますが、500x500ピクセルであれば将来的なスケーリングにおいてより柔軟に対応できます。ゼロから作成する場合や、既存の画像を変換する必要がある場合は、Mzu favicondlが完璧なサイズと最適化されたファビコンを作成するための最高のツールとなるでしょう。
Squarespace ファビコン設定：ステップバイステップガイド
このプロセスは、Squarespaceのバージョン（7.0と7.1）間で概ね一貫していますが、メニューの表示が若干異なる場合があります。
-
ファビコン画像を正しく準備する
Squarespaceはかなり柔軟ですが、透明な背景を持つPNGファイルを適切な解像度（例：500x500px）で用意するのが最も確実です。複雑なディテールは避け、シンプルで大胆、そして認識しやすいデザインを心がけましょう。Googleの「G」アイコンやGitHubのOctocatを見てください。それらが象徴的なのは、シンプルだからです。もし現在のロゴが複雑すぎる場合は、この小さなスペースのために簡略化してください。お手伝いが必要ですか？Mzu favicondlは、既存の画像から必要なすべてのサイズと形式を生成し、どこでも鮮明に見えるようにします。フルロゴをそのまま縮小しようと考えているなら、まずファビコンとロゴの違いに関するガイドをご覧ください。
-
Squarespaceアカウントにログインする
squarespace.com/loginにアクセスし、ウェブサイトのダッシュボードにサインインします。これはおなじみの手順ですね。
-
デザイン設定に移動する
メインサイトのダッシュボードから、左側のメニューにあるデザインをクリックします。ここがあなたのサイトのあらゆる視覚的要素を設定する場所です。
-
ブラウザアイコン（ファビコン）オプションを見つける
デザインメニュー内で下にスクロールし、ブラウザアイコン（古いバージョンや特定のテンプレートでは「ファビコン」と表示されることもあります）をクリックします。通常、「サイトタイトルとロゴ」などのブランド設定オプションの近くにあります。
-
ファビコン画像をアップロードする
画像をアップロードするエリアが表示されます。画像をアップロードをクリックするか、準備したPNGファイルを指定されたボックスに直接ドラッグ＆ドロップします。Squarespaceが処理を行います。
-
変更を保存する
アップロード後、必ず保存（通常、デザインパネルの左上隅にあります）をクリックして、新しいファビコンをサイトに適用してください。これを忘れると、せっかくの作業が無駄になってしまいます！
-
ブラウザキャッシュをクリアする（およびSquarespaceキャッシュ）
これは非常に重要です。ブラウザはファビコンを積極的にキャッシュすることで知られています。ハードリフレッシュ（
Ctrl+Shift+RまたはCmd+Shift+R）を行うか、ブラウザのキャッシュを完全にクリアしてください。Squarespaceにも独自のキャッシュがあるため、新しいアイコンがグローバルに反映されるまで数分（最大1時間）かかる場合があります。シークレットウィンドウでサイトにアクセスすると、ライブで表示されているか確認しやすいでしょう。もしそれでも表示されない場合は、ファビコンが表示されない？ガイドでさらに多くのトラブルシューティングのヒントをご覧ください。
よくある落とし穴と回避策
Squarespaceがプロセスを簡素化していても、いくつかの問題が発生することがあります。
不適切な画像サイズまたは形式： Squarespaceは変換を行いますが、高品質な正方形のPNG（例：500x500px）から始めるのが最良の結果をもたらします。小さな16x16pxの画像をアップロードしないでください。Squarespaceがそれを拡大すると、見栄えが悪くなります。
過剰なブラウザキャッシュ： 前述の通り、これが最大の原因です。忍耐強く、キャッシュをクリアするか、別のブラウザやデバイスを試してみてください。
複雑すぎるデザイン： ファビコンは非常に小さいです。ロゴに細かいテキストや複雑なディテールがあると、判読不能な塊になってしまいます。シンプルに、シンプルに、シンプルに。スターバックスのファビコンを考えてみてください。人魚だけで、テキストはありません。
保存し忘れ： 誰にでも起こりうることです。Squarespaceエディタでは常に「保存」ボタンをクリックしましょう！
Apple Touch Iconの考慮不足： Squarespaceは、アップロードされたファビコンから基本的なApple Touch Iconを自動生成することがよくあります。しかし、完全な制御や特定のiOS最適化（角の丸みやスプラッシュスクリーンなど）のためには、通常、特定のHTMLメタタグを追加する必要がありますが、Squarespaceのデフォルトのファビコンアップロードでは直接露出していません。ほとんどのSquarespaceユーザーにとっては、デフォルトの動作で十分ですが、知っておくと良いでしょう。
Conclusion
Squarespaceのファビコン設定はロケット科学ではありませんが、プロフェッショナルなオンラインプレゼンスには不可欠なステップです。これは、あなたのサイトを完成させ、ユーザーが数多くの開かれたタブの中からあなたのブランドを素早く見つけるのに役立つ小さなディテールです。追加で5分かけて正しく設定すれば、あなたのサイトはきっと感謝するでしょう。