你刚刚把精心设计的新 Logo 上传到 Squarespace，满心欢喜地刷新浏览器，结果发现标签页上的图标变成了一团模糊的马赛克。如果你也曾纳闷，为什么网站在桌面上看起来很专业，但在 Safari 的标签栏里却像个低分辨率的半成品，那多半是因为你的原图尺寸正在和平台激进的图像处理器“打架”。

要搞定 favicon size squarespace 所要求的完美尺寸，靠猜是不行的。你需要特定的尺寸，才能让图标在经过他们的 CDN 压缩后依然保持边缘锐利。

2026年 Squarespace 真正需要的理想尺寸

从技术上讲，Squarespace 接受 100x100 到 300x300 像素之间的任何尺寸。但我强烈建议你直接无视下限，精确上传 300x300 像素的图片。原因很简单：视网膜（Retina）屏幕。

看看 Stripe 或 GitHub 的做法。他们早就不用 16x16 的老旧文件了。他们使用的是清晰的高分辨率原图，让浏览器优雅地缩小显示。当你上传 300x300 的 PNG 时，Squarespace 的 CDN 会自动生成不同设备所需的小尺寸，且不会破坏像素结构。

保持图标清晰的先决条件

在点击上传按钮之前，请务必检查你的图片是否符合这些硬性标准：

分步指南：调整尺寸与上传

遵循以下开发者工作流，确保你的图标在所有浏览器中都保持清晰。

  1. 打开你的设计工具，创建一个 300x300 像素的画布。
  2. 将 Logo 居中，在边缘留出 10% 的透明边距（安全区）。
  3. 导出为带有透明通道的标准 PNG。
  4. 在上传前，使用 Mzu favicondl 压缩文件，剥离多余的元数据。

Squarespace 是如何处理你的文件的？

如果你用 Chrome 开发者工具检查发布后的 Squarespace 网站，你会看到他们是如何重写 HTML 的：

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

注意那个 ?format=100w 参数。Squarespace 会动态向现代浏览器提供 100 像素宽的版本。如果你最初上传的只有 32x32，他们的 CDN 就会尝试将其放大，从而导致可怕的模糊。

需要避免的常见陷阱

上传非方形图片是最常见的错误。如果你上传一个长方形的 Logo，Squarespace 会强行裁剪或挤压它。请永远使用 1:1 的画布。

另一个陷阱是忽略深色模式。如果你的 Logo 是纯黑色的且背景透明，那么在使用深色浏览器主题的用户眼中，它会完全消失。建议使用白色轮廓或纯色背景。关于这点的更多细节，可以查看我们的透明背景指南。

如果你不知道在 Squarespace 后台哪里找到上传入口，请查阅我们完整的 Squarespace 设置指南。