Ya has elegido el nombre de la web y el nombre de la marca. Has elegido una plantilla para tu web de Squarespace. La has personalizado para que tenga exactamente el aspecto que quieres. Solo te queda una cosa: ¡el logotipo!

Un logotipo es un elemento clave de la imagen de marca moderna. Hay datos que indican que Google da preferencia a los sitios web que utilizan logotipos gráficos frente a los que solo incluyen texto. Squarespace te permite utilizar sin problemas un título de texto para tu sitio web, pero hay un espacio destinado al logotipo, y casi siempre es una buena idea incluir uno.

No te preocupes demasiado por elegir un logotipo definitivo desde el principio. Al ser una página web pequeña, tienes la ventaja de poder ir cambiándolo a medida que crezcas. Una empresa como Pepsi o Home Depot tiene que darle mucha importancia al cambio de logotipo. Una marca pequeña puede elegir un logotipo y, si dentro de un año ya no encaja con la marca, cambiarlo sin ningún problema.

Lo que quiero decir es lo siguiente: ¡pon un logotipo en marcha! Crea uno que tenga buen aspecto y sirva como lugar de espera, que no te moleste usar, y da por bueno que sea suficiente. Ya puedes invertir en uno mejor más adelante si quieres, pero, por ahora, un logotipo básico es mejor que nada.

Squarespace tiene algunas peculiaridades y características interesantes en su sistema de logotipos que conviene conocer. Es fundamental dar el formato adecuado a un logotipo, teniendo en cuenta los distintos formatos y posiciones. Claro, puedes limitarte a subir un archivo JPG cuadrado y darlo por bueno, pero hay una forma mejor de hacerlo.

Formato general del logotipo

En primer lugar, conviene saber que el logotipo de tu sitio web sustituye al encabezado textual del mismo. Cuando escribes el nombre de tu sitio web, este aparece debajo del título del sitio. Sin embargo, debes asegurarte de especificar el título de tu sitio web de todos modos. Esto se debe a que el título de tu sitio web es lo que la imagen utiliza como texto alternativo cuando la subes. El texto alternativo es sumamente importante para el SEO y la accesibilidad, por lo que no conviene que algo tan importante como tu logotipo carezca de él.

Otra cosa importante que debes tener en cuenta es que, en Squarespace, tu logotipo siempre enlazará con tu página de inicio de forma predeterminada. Ahora bien, en el 99,999 % de los casos, eso es precisamente lo que quieres que haga. Prácticamente todas las páginas web de Internet hacen que su logotipo enlace a la página de inicio; hoy en día, es simplemente una práctica habitual en Internet. Sin embargo, si quisieras hacer alguna jugarreta con tu logotipo o hacer que enlace a otras páginas en días festivos concretos o algo por el estilo, tendrás que hacerlo mediante código personalizado.

Por lo general, cuanto más grande sea la imagen que utilices para tu logotipo, mejor. Sin embargo, eso no significa que puedas subir un archivo de 100.000 x 100.000 píxeles como logotipo. Squarespace ajustará el tamaño de tu archivo de imagen para que se adapte al área de visualización que le corresponda en la plantilla de tu sitio web. Esto varía en función de la plantilla en la versión 7.0, pero está estandarizado en todas las plantillas de la versión 7.1.

Una imagen demasiado pequeña se ampliará, lo que puede hacer que se vea pixelada. Por el contrario, una imagen más grande se reducirá. En el caso de logotipos sencillos y limpios, esto no supone ningún problema. Sin embargo, en el caso de imágenes complejas, se pueden perder algunos detalles. ¡Asegúrate de que tu logotipo se vea bien a diferentes escalas!

Squarespace establece una serie de requisitos generales para las imágenes, incluidas las que se utilizan en los logotipos.

Solo se admiten archivos JPG, PNG y GIF. No se pueden utilizar archivos como PDF, DOC o PSD.
Tu imagen no puede superar los 20 MB. Sin embargo, dado que la velocidad del sitio web es un factor que influye en el posicionamiento en los buscadores y que las imágenes suelen ser la parte más lenta de un sitio web, deberías intentar que tus archivos no superen los 500 kb. Plantéate utilizar una herramienta de optimización de imágenes para reducir el tamaño de una imagen sin perder calidad.
Los nombres de los archivos de imagen solo pueden contener letras, números, guiones bajos y guiones. No se pueden utilizar símbolos como «?», «&» o «%», ni caracteres acentuados, debido al funcionamiento del código del back-end.
Las resoluciones disponibles son muy altas: 60 megapíxeles. Probablemente, tu logotipo ni siquiera ocupe un solo megapíxel, así que esto no debería suponer ningún problema. Esto es más relevante en el caso de las imágenes generales que subas a tu blog y a las páginas de productos.
El modo de color de las imágenes es RGB. Las imágenes en CMYK suelen destinarse a la impresión y no se mostrarán correctamente en un navegador si no se optimizan.
El perfil de color ideal es sRGB. Si no sabes lo que significa, no te preocupes; prácticamente todas las aplicaciones de edición de imágenes que utilices para tu logotipo exportarán los archivos correctamente.
Se permiten los fondos transparentes (para que no tengas que ajustar los colores al color de fondo de tu página web), pero debes utilizar un archivo PNG para guardarlo con transparencia.

Hay un montón de detalles, particularidades y excepciones que comentaré más adelante en esta entrada, pero, en general, esto es todo lo que tienes que tener en cuenta.

Creación de un logotipo

Crear tu logotipo es una tarea que puede resultar abrumadora, sobre todo si no eres diseñador gráfico. Por suerte, en realidad no es tan difícil.

Aunque puedes utilizar Photoshop o tu editor de imágenes favorito para crear una imagen, también puedes recurrir simplemente a Squarespace Logo. Squarespace Logo es una herramienta en línea que ofrece Squarespace y que te permite crear un logotipo partiendo de cero. Introduces el nombre de tu marca, tu eslogan y eliges un símbolo para añadirlo. Posiciones, tipografías, colores: puedes elegir todo eso para cada elemento. La biblioteca de símbolos parece pequeña a primera vista, pero si escribes lo que quieras en la barra de búsqueda, aparecerán docenas más.

Si te parece que el generador de Squarespace es un poco básico o no ofrece el diseño que buscas —o si prefieres algo más generado por IA o más personalizado—, puedes utilizar otro creador de logotipos. Existen muchos servicios diferentes que te permiten introducir el nombre de la marca, algunas palabras clave y otros detalles, y que generan una gran cantidad de logotipos entre los que puedes elegir.

Y, por supuesto, siempre existe la opción de utilizar un servicio como Canva para crear uno desde cero con una biblioteca más amplia de elementos personalizados.

Imagen del logotipo del encabezado de la página web

Añadir la imagen de tu logotipo es muy fácil. Una vez que hayas elegido el archivo adecuado, puedes seguir estos pasos en función de la versión de tu sitio web y de tu plataforma.

En la versión 7.1 en un ordenador, haz clic en «Editar», luego pasa el cursor por encima del encabezado y haz clic en «Editar encabezado del sitio». Haz clic en «Título y logotipo del sitio», asegúrate de que el texto esté especificado y, a continuación, arrastra y suelta la imagen de tu logotipo en el cuadro de imagen. También puedes hacer clic en el cuadro y seleccionar el archivo. Puedes desplazarte hacia abajo y cambiar la altura de la imagen para que se adapte a diferentes pantallas. Asegúrate de guardar los cambios.

En la versión 7.0 para ordenador, pasa el cursor por encima de tu logotipo en cualquier página y haz clic en «Editar». También puedes ir al menú de inicio, hacer clic en «Diseño» y, a continuación, en «Logotipo y título». Sube tu imagen y guárdala.

En ambos casos, en la aplicación de Squarespace, pulsa en «Configuración» y, a continuación, en «Logotipo y título». Pulsa en el logotipo y, a continuación, sube tu imagen. Pulsa en «Atrás» y, a continuación, en «Guardar».

El aspecto y la disposición de tu logotipo variarán en función de la plantilla que utilices. Cada plantilla de la versión 7.0 tiene una forma diferente de mostrar el logotipo y un método distinto para cambiarlo, si es que se puede cambiar. Por ejemplo:

Avenue: el logotipo puede aparecer a la izquierda, en el centro o a la derecha. Puedes cambiarlo mediante el ajuste «Estilo de diseño».
Bedford – El logotipo solo aparece a la izquierda y no se puede modificar.
Momentum: el logotipo aparece a la izquierda, pero puede situarse encima o debajo de la barra de navegación. Utiliza el ajuste «Posición de navegación» para cambiarlo.

Puedes consultar las diferencias entre cada conjunto de plantillas aquí.

Opciones de tamaño del logotipo

Cuando subes un logotipo a tu página web por primera vez, es posible que el tamaño con el que quieres que se muestre difiera considerablemente del deseado. Ahora puedes editar la imagen para que tenga exactamente el tamaño adecuado y se ajuste al espacio. Por desgracia, esto significa que necesitarás varios archivos de logotipo diferentes para distintos modos de visualización y, dado que solo puedes subir un logotipo, no acaba de funcionar. Por suerte, Squarespace te permite configurar el tamaño.

Entra en el editor de estilos y busca la sección correspondiente al tamaño de la imagen de tu logotipo. Se encuentra en la sección «Identidad visual del encabezado». Tienes que especificar el ancho de tu logotipo; la altura se generará automáticamente en función de las dimensiones de la imagen que hayas subido. La imagen no se distorsionará, así que no te preocupes por eso. Solo ten en cuenta que las imágenes demasiado altas estirarán tu página.

Si no te importa que la imagen se distorsione, o si quieres establecer una altura máxima por si acaso, hay algunos ajustes de CSS que puedes realizar. Tienes que encontrar la clase CSS de la imagen de tu plantilla, así que ve a tu sitio web, haz clic con el botón derecho del ratón sobre tu logotipo y, a continuación, selecciona «Inspeccionar elemento». Deberías acceder directamente a ella. A continuación, puedes pegar el código CSS correspondiente en el código de tu sitio web, siguiendo las instrucciones de esta página.

El tamaño del logotipo es muy fácil de modificar en una web 7.1. Solo tienes que acceder al editor del encabezado de tu web e indicar allí las dimensiones. ¡Y ya está!

Opciones de texto del logotipo

Si no subes una imagen, aparecerá un texto con un estilo que se adapte al diseño de tu página web, en lugar de un logotipo. Si subes una imagen, aparecerá la imagen, pero el texto se convertirá en texto alternativo. ¿Qué ocurre, entonces, si quieres un logotipo con texto, algo como «TinySeed» o «BeAligned»?

Bueno, si te fijas bien en su logotipo, verás el truco. Hacen que el texto forme parte de la imagen. Así que lo único que tienes que hacer es crear tu logotipo con el texto integrado en la imagen.

Lo complicado aquí es asegurarse de que tenga el tamaño y la resolución adecuados para evitar que se vea borrosa al redimensionarla para las diferentes versiones de tu página web. Lo mejor es utilizar una imagen grande con texto que no sea demasiado fino ni complejo. No puedo darte demasiados detalles porque todo depende de la tipografía, el estilo y el tamaño que elijas. Intenta que la imagen inicial no sea demasiado grande y no deberías tener problemas al redimensionarla.

Formato del favicon

Un favicon, también conocido como icono del navegador, es el símbolo que aparece en la pestaña en la que se carga tu sitio web, tanto en navegadores móviles como de ordenador. Básicamente, es una versión reducida de tu logotipo. Sin embargo, si tu logotipo es más grande, más complejo o incluye texto, no queda bien en un favicon. ¿Cómo se crea un buen favicon?

En primer lugar, debes saber que las especificaciones de imagen del favicon son diferentes a las de un logotipo.

Los favicons se muestran con un tamaño de 16x16 píxeles, pero lo habitual es subir una imagen más grande, normalmente de entre 100x100 y 300x300. Los favicons siempre son cuadrados o circulares, por lo que los rectángulos no quedan bien.
Por lo general, deberías utilizar un archivo PNG o ICO. El formato PNG no funciona con versiones muy antiguas de Internet Explorer, pero nunca he tenido ningún problema con él.
El archivo tiene que ser pequeño. Menos de 100 kb.

Añadir tu favicon es muy sencillo, al menos. En la versión 7.1, haz clic en el menú de inicio, luego en «Diseño» y, a continuación, en «Icono del navegador».

Sube tu imagen allí y guárdala. En la versión 7.0, haz clic en el menú de inicio, luego en «Diseño» y, a continuación, en «Logotipo y título». El icono del navegador se encuentra más abajo en la página.

Súbelo y guárdalo.

Cómo utilizar un logotipo en formato SVG

Si sabes lo que son los gráficos vectoriales, quizá te preguntes si puedes utilizar un archivo SVG para el logotipo de tu página web. Los archivos SVG son, en esencia, instrucciones de texto para crear una imagen vectorial que se puede ampliar o reducir sin pérdida de calidad. Son muy potentes, muy ligeros y no son archivos de imagen propiamente dichos, tal y como los conocemos tradicionalmente. Por desgracia, Squarespace no los admite de forma predeterminada. Sin embargo, puedes utilizarlos si lo deseas.

Para ello, básicamente tienes que hacer que Squarespace cargue el archivo SVG mediante código personalizado.

En primer lugar, sustituye la imagen del logotipo del encabezado por un archivo PNG transparente del tamaño que desees que tenga la imagen del encabezado.

A continuación, crea tu logotipo en formato SVG. Aquí tienes una guía sobre cómo hacerlo.

Una vez que tengas tu archivo SVG, tienes que subirlo. En cualquier página de tu sitio web, selecciona un fragmento de texto y haz clic en el icono de enlace. En lugar de crear un enlace a una página, haz clic para crear un enlace a un archivo y sube tu archivo SVG. Básicamente, se trata de una solución alternativa para subir tu archivo a los servidores de Squarespace, ya que no requiere ningún software adicional y es un proceso bastante rápido.

Una vez que hayas subido el archivo de tu logotipo, haz clic en el enlace para obtener el nombre del archivo. Tendrá este aspecto:

https://yoursitename.com/s/svglogoname.svg

A veces, el nombre del archivo puede ser muy largo, como por ejemplo:

https://static1.yoursitename.com/static/605d8c67275bb80d4f-1b1fcb/t/602e9274f59cb32c9e67195c/1613265654987/file-name.svg

No pasa nada. Anótalo y déjalo a un lado. Puedes borrar el enlace al archivo; no hace falta que lo guardes en la página en la que lo hayas creado.

A continuación, utiliza código personalizado para añadir CSS a tu encabezado. El código exacto que necesitas depende de la plantilla de tu sitio web, por lo que no puedo enumerarlos todos. Solo tienes que buscar «logotipo SVG en nombre de la plantilla» para encontrar una guía, como esta para Brine. Asegúrate de hacer lo mismo también con tu logotipo para dispositivos móviles.

¡Y ya está! Tendrás un logotipo SVG perfectamente escalado y listo para usar.

5 formas de dar formato a tu logotipo en tu página web de Squarespace