Squarespaceに美しい新しいロゴをアップロードし、ブラウザを更新した瞬間、タブのアイコンがぼやけたピクセルの塊になっていてガッカリしたことはありませんか？デスクトップではプロフェッショナルに見えるサイトが、Safariのタブバーでは低解像度の悲惨な状態になるのは、ソース画像のサイズがプラットフォームの強力な画像処理エンジンと相性が悪いからです。

最適な favicon size squarespace を見つけるのは当てずっぽうではいけません。CDNの圧縮を生き抜き、エッジのシャープさを保つための正確な寸法が必要です。

2026年にSquarespaceが求める理想的なサイズ

技術的には、Squarespaceは100x100から300x300ピクセルまでのサイズを受け入れます。しかし、私は下限を無視して、正確に300x300ピクセルをアップロードすることを強くお勧めします。理由はRetinaディスプレイです。

StripeやGitHubを見てください。彼らはもはや16x16の古いファイルをアップロードしていません。きれいに縮小される、鮮明で高解像度なソース画像を使用しています。300x300のPNGをアップロードすると、SquarespaceのCDNはピクセルを破壊することなく、さまざまなデバイスに必要な小さなサイズを自動的に生成します。

鮮明なタブアイコンのための前提条件

アップロードボタンを押す前に、画像が以下の厳格な基準を満たしているか確認してください：

ステップバイステップ：サイズ調整とアップロード

すべてのブラウザでアイコンをシャープに保つための正確なワークフローは以下の通りです。

  1. デザインツールを開き、300x300ピクセルのキャンバスを作成します。
  2. ロゴを中央に配置し、端の周りに10%の透明な余白（セーフゾーン）を残します。
  3. 透明度を有効にした標準PNGとしてエクスポートします。
  4. アップロードする前に、Mzu favicondlを使用してファイルを圧縮し、不要なメタデータを削除します。

Squarespaceによるファイル処理の裏側

公開されたSquarespaceサイトをChromeのDevToolsで検査すると、HTMLがどのように書き換えられているかがわかります：

<link rel='icon' href='https://images.squarespace-cdn.com/.../favicon.png?format=100w'>

この ?format=100w パラメータに注目してください。Squarespaceは最新のブラウザに対して、動的に100ピクセル幅のバージョンを提供します。もし元のアップロードが32x32しかなかった場合、CDNはそれを拡大しようとし、結果としてあの恐ろしいぼやけが生じるのです。

避けるべきよくある落とし穴

正方形以外の画像をアップロードするのは最もよくある間違いです。長方形のロゴをアップロードすると、Squarespaceは強制的に切り取るか押しつぶします。常に1:1のキャンバスを使用してください。

もう一つの罠はダークモードの無視です。ロゴが透明な背景に真っ黒な場合、ダークテーマを使用しているユーザーには完全に見えなくなります。白いアウトラインを追加するか、単色の背景を使用してください。詳細については、透明背景のガイドをご覧ください。

実際のSquarespaceのダッシュボードでアップロード画面を見つける方法については、完全なSquarespaceセットアップガイドを確認してください。