Squarespace tiene su propio panel de subida. La tabla general de tamaño favicon y medidas favicon sirve para el resto de sitios.
Acabas de subir tu nuevo y magnífico logo a Squarespace, actualizas tu navegador y el icono de la pestaña parece una mancha borrosa y pixelada. Si alguna vez te has preguntado por qué tu sitio se ve profesional en el escritorio pero muestra un desastre de baja resolución en la barra de pestañas de Safari, es probable que las dimensiones de tu imagen original estén peleando con el agresivo procesador de imágenes de la plataforma.
Conseguir el favicon size squarespace perfecto no es cuestión de adivinar. Requiere dimensiones específicas para sobrevivir a su red de entrega de contenido (CDN) sin perder la nitidez de los bordes.
Qué archivo subir en el panel de Squarespace
Técnicamente, Squarespace acepta cualquier cosa entre 100x100 y 300x300 píxeles. Te recomiendo encarecidamente que ignores el límite inferior y subas exactamente 300x300 píxeles. ¿Por qué? Pantallas Retina.
Fíjate en Stripe o GitHub. Ya no suben archivos heredados de 16x16. Utilizan imágenes originales nítidas y de alta resolución que se reducen con gracia. Cuando subes un PNG de 300x300, el CDN de Squarespace genera automáticamente los tamaños más pequeños necesarios para diferentes dispositivos sin destruir los píxeles.
Requisitos previos para un icono nítido
Antes de tocar el botón de subir, verifica que tu imagen cumpla con estas estrictas bases:
- Formato: PNG (nunca JPEG, necesitas transparencia).
- Relación de aspecto: 1:1 (un cuadrado perfecto).
- Tamaño del archivo: Estrictamente por debajo de 100KB.
Paso a paso: Tamaño y subida
Aquí tienes el flujo de trabajo exacto de desarrollador para asegurar que tu icono se mantenga nítido en todos los navegadores.
- Abre tu herramienta de diseño y crea un lienzo de 300x300 píxeles.
- Centra tu logo, dejando un margen transparente del 10% alrededor de los bordes (la zona segura).
- Exporta como un PNG estándar con la transparencia activada.
- Comprime el archivo usando Mzu favicondl para eliminar metadatos innecesarios antes de subirlo.
Cómo procesa Squarespace tu archivo
Si inspeccionas tu sitio publicado de Squarespace usando las DevTools de Chrome, verás cómo reescriben tu HTML:
<link rel='icon' href='https://images.squarespace-cdn.com/.../favicon.png?format=100w'>Fíjate en ese parámetro ?format=100w. Squarespace sirve dinámicamente una versión de 100 píxeles de ancho a los navegadores modernos. Si tu subida original fue de solo 32x32, su CDN intenta ampliarla, resultando en esa temida borrosidad.
Errores comunes a evitar
Subir imágenes que no son cuadradas es el error más común. Si subes un logo rectangular, Squarespace lo recortará o aplastará a la fuerza. Usa siempre un lienzo 1:1.
Otra trampa es ignorar el modo oscuro. Si tu logo es negro sólido con un fondo transparente, desaparecerá por completo para los usuarios con temas de navegador oscuros. Usa un contorno blanco o un color de fondo sólido. Para más detalles sobre esto, revisa nuestra guía sobre fondos transparentes.
Si necesitas ayuda para navegar por los menús reales del panel de Squarespace para encontrar la pantalla de subida, revisa nuestra guía completa de configuración de Squarespace.