Agregar un favicon a Espacio cuadrado
Mejora la estética de tu sitio. Aprenda a configurar un favicon de pestaña limpia dentro de la configuración de Squarespace.
Agregar un favicon a Squarespace solo lleva unos minutos. Necesita una imagen de favicon adecuada, acceso al sitio web correcto de Squarespace y la posibilidad de abrir su configuración de favicon. En esta guía, aprenderá cómo preparar un favicon, subirlo a Squarespace, verificar que funcione, reemplazarlo o eliminarlo y solucionar casos en los que el nuevo ícono no aparece de inmediato.
¿Qué es un Favicon de Squarespace?
Un favicon, también llamado ícono del navegador, es la pequeña imagen cuadrada asociada con su sitio web. Normalmente aparece junto al título de su página en las pestañas y marcadores del navegador. Dependiendo del navegador o dispositivo, también puede aparecer en otras interfaces del navegador y, a veces, en los resultados de búsqueda.
Cada sitio de Squarespace comienza con el favicon de cubo predeterminado de Squarespace, a menos que agregues uno personalizado. Reemplazarlo con su propio ícono brinda a los visitantes un identificador visual reconocible para su sitio web.
Un favicon está separado del logotipo de su sitio web. Su logotipo puede aparecer de manera destacada en el encabezado de su sitio, mientras que el favicon está diseñado para seguir siendo reconocible en un tamaño muy pequeño.
¿Qué debes preparar antes de agregar un Favicon a Squarespace?
Antes de abrir Squarespace, prepara la imagen que deseas usar como tu favicon. La guía actual de favicon de Squarespace recomienda lo siguiente:
- Usar PNG: Squarespace recomienda archivos .png para favicons y no permite cargar archivos .ico.
- Utilice una imagen cuadrada: Un lienzo cuadrado funciona mejor porque los favicons se muestran como pequeños íconos cuadrados.
- Apunta a 100 × 100 px a 300 × 300 px: Squarespace recomienda este rango para imágenes de favicon. Aunque los favicons pueden mostrarse en dimensiones muy pequeñas, como 16 × 16 px, una imagen de origen más grande dentro de este rango funciona mejor en todos los navegadores.
- Mantenga el archivo por debajo de 100 KB: Squarespace afirma que los archivos favicon no pueden exceder los 100 KB.
- Utilice un diseño sencillo: Un favicon es mucho más pequeño que un logotipo normal, por lo que las ilustraciones complicadas y el texto largo pueden volverse irreconocibles.
- Utilice un fuerte contraste: El icono debe permanecer distinguible en las interfaces claras y oscuras del navegador.
- Evite el exceso de detalles: Las líneas finas, las letras pequeñas y los múltiples elementos visuales son difíciles de identificar en el tamaño de un favicon.
- Comience con una fuente de alta calidad: Reducir la escala de una fuente limpia y nítida generalmente produce un mejor resultado que ampliar una imagen pequeña.
¿Qué formato de archivo recomienda Squarespace?
Para un favicon específicamente, Squarespace recomienda PNG y no admite la carga de un archivo .ico a través de su cargador de favicon.
No confundas la compatibilidad general con la carga de imágenes de Squarespace con los requisitos específicos de favicon. Squarespace admite varios formatos en otras áreas de imágenes, pero su documentación de favicon recomienda específicamente PNG.
¿Cómo se agrega un Favicon a Squarespace?
El proceso actual de Squarespace utiliza un panel Favicon dedicado. La ruta exacta a ese panel puede variar según la interfaz de Squarespace que esté utilizando, así que concéntrese en ubicar el favicon del sitio o la configuración del ícono del navegador en lugar de confiar en una ruta de menú anterior.
- Inicie sesión en Squarespace: Abra Squarespace e inicie sesión en la cuenta que administra su sitio web. Asegúrese de tener permisos de edición para el sitio cuyo favicon desea cambiar.
- Abra el sitio web correcto: Desde el panel de tu cuenta de Squarespace, abre el sitio web que deseas editar. Esto es importante si tu cuenta administra varios sitios web de Squarespace. Cargar un favicon en un sitio no cambiará el favicon en otro sitio.
- Abra la configuración del favicon: Navegue por la configuración del sitio o los controles de diseño hasta llegar al panel Favicon. La documentación de ayuda actual de Squarespace se refiere a este destino específicamente como el panel Favicon. Los tutoriales más antiguos pueden describir la configuración con etiquetas como Icono del navegador o colocarla en diferentes áreas de la interfaz. No asuma que una ruta anterior sigue siendo idéntica en su cuenta.
- Sube tu favicon: Dentro del panel de Favicon, arrastre la imagen de su favicon al cargador o haga clic en el cargador para seleccionar el archivo desde su computadora. Selecciona el favicon PNG que preparaste. Espere a que finalice la carga. Comprueba que la imagen cargada aparezca en el área del favicon. Actualmente, Squarespace admite un favicon alternativo opcional para el modo oscuro. Se debe agregar un favicon predeterminado antes de poder agregar la versión en modo oscuro.
- Guarde los cambios: Haga clic en Guardar después de que se haya cargado la imagen. Guardar es importante porque cargar o seleccionar la imagen por sí sola no reemplaza el favicon publicado hasta que se guarde el cambio. Las instrucciones actuales de Squarespace dirigen específicamente a los usuarios a hacer clic en Guardar después de cargar las imágenes.
- Abra su sitio web y verifique la pestaña del navegador: Abra la URL publicada de su sitio en un navegador. Mire la pestaña del navegador junto al título de la página. Tu nuevo favicon debería reemplazar el ícono predeterminado de Squarespace.
Si aún ves el favicon anterior, no asumas inmediatamente que la carga falló. Los navegadores pueden almacenar en caché los favicons de forma agresiva, por lo que el icono antiguo puede seguir apareciendo incluso después de que el nuevo favicon se haya guardado correctamente.
¿Dónde está el entorno Favicon en Squarespace?
La interfaz ha cambiado con el tiempo, por lo que diferentes tutoriales de Squarespace pueden mostrar diferentes rutas de navegación. La documentación actual de Squarespace identifica el destino como el panel Favicon.
Es posible que encuentre instrucciones más antiguas que se refieran a:
- Icono del navegador
- Logotipo y título
- Diseño
- Una configuración de ícono del navegador dentro del diseño del sitio o controles de marca
Estas etiquetas no deben considerarse universalmente vigentes. Squarespace puede cambiar la ubicación o el nombre de los controles entre interfaces y versiones de plataforma. La configuración importante es la destinada específicamente al favicon o icono del navegador del sitio. No es la misma configuración que el logotipo de su sitio o el título de la página.
¿Cómo se crea un Favicon para Squarespace?
No es necesario diseñar un favicon desde cero. El enfoque más simple depende de los activos de marca que ya tenga.
Crea un favicon a partir de tu logo
Si ya tiene un logotipo, cree una versión cuadrada simplificada del mismo. No utilice automáticamente todo el logotipo horizontal. Un nombre comercial largo puede volverse ilegible cuando se reduce a las dimensiones de un favicon. Un mejor enfoque suele ser utilizar un símbolo reconocible del logotipo, una única inicial, un monograma o una marca simplificada.
Crea un favicon a partir de texto o iniciales
Para un favicon basado en texto, utilice una o dos letras destacadas en lugar del nombre comercial completo. Por ejemplo, una empresa llamada Digital Marketing Solutions podría utilizar DM en lugar de intentar introducir el nombre completo en el icono. Utilice un tipo de letra simple y en negrita y suficiente contraste para que las letras sean reconocibles.
Convertir un PNG existente en un favicon
Si ya tiene un logotipo o icono PNG adecuado, puede convertirlo en una obra de arte lista para favicon utilizando una herramienta de conversión de imágenes. Por ejemplo, PNGtoFavicon.com Puede convertir una imagen PNG en un favicon. Esto es útil cuando ya tienes un PNG cuadrado pero necesitas un archivo orientado a favicon para tu sitio web.
Antes de cargar el resultado en Squarespace, verifique que la imagen final cumpla con los requisitos de favicon de Squarespace, particularmente el formato PNG, las dimensiones cuadradas y el tamaño máximo de archivo de 100 KB.
Mantenga el diseño reconocible en tamaños pequeños
La prueba de diseño más importante es simple: reduzca sustancialmente el ícono y mírelo sin acercarlo. Si no puede identificar el símbolo o la letra rápidamente, simplifíquelo. Un favicon normalmente funciona mejor como una marca visual llamativa que como una versión en miniatura de todo su logotipo.
¿Cómo puedes comprobar si tu Favicon de Squarespace está funcionando?
Después de guardar el favicon, verifíquelo en el sitio web publicado.
- Consulta la pestaña del navegador: Abra su sitio web y observe el ícono al lado del título de la página en la pestaña del navegador. Esta es la prueba más directa porque las pestañas del navegador son uno de los lugares principales donde aparecen los favicons.
- Pruebe una nueva sesión del navegador: Si el ícono anterior permanece visible, abra una ventana privada o de incógnito, visite su sitio web y revise la pestaña del navegador nuevamente. Esto ayuda a determinar si el problema se debe a los datos de favicon almacenados en caché en la sesión normal del navegador.
- Verifique otro navegador de escritorio: Pruebe el sitio en otro navegador como Chrome, Edge, Firefox o Safari. Un favicon que se muestra correctamente en un navegador pero no en otro puede indicar un comportamiento de visualización o almacenamiento en caché específico del navegador en lugar de un problema de carga de Squarespace. Safari puede mostrar favicons de forma diferente a otros navegadores. Squarespace señala que Safari puede mostrar el favicon cuando haces clic en la barra de direcciones o cuando hay varias pestañas abiertas, y puede agregar un borde o fondo para contrastar.
- Consultar en el móvil: No trate la ausencia de un favicon en un navegador móvil como prueba de que la carga falló. Squarespace afirma que la visualización del favicon en un dispositivo móvil depende del navegador móvil y, en algunos casos, el favicon no se mostrará en absoluto.
¿Por qué no se muestra mi Favicon de Squarespace?
Un favicon que no aparece inmediatamente suele ser un problema de configuración o almacenamiento en caché más que un motivo para reconstruir todo el sitio web.
caché del navegador
Problema: Su navegador todavía muestra el antiguo favicon.
Arreglar: Borre el caché del navegador, ciérrelo y vuelva a abrirlo, luego vuelva a visitar su sitio. Squarespace recomienda específicamente borrar el caché del navegador y reiniciarlo cuando un favicon no se actualiza inmediatamente.
El favicon no fue guardado
Problema: La imagen se cargó pero el cambio no se guardó.
Arreglar: Regrese al panel Favicon, confirme que esté presente la imagen correcta y haga clic en Guardar.
Editaste el sitio web equivocado
Problema: El favicon no parece haber cambiado porque la imagen se cargó en otro sitio de Squarespace en su cuenta.
Arreglar: Confirme el nombre y el dominio del sitio web antes de cambiar el favicon.
La imagen no cumple con los requisitos de favicon.
Problema: El archivo es demasiado grande, utiliza un formato inadecuado o tiene dimensiones que producen un resultado deficiente.
Arreglar: Vuelva a exportar la imagen como PNG, manténgala por debajo de 100 KB y use una imagen cuadrada entre 100 × 100 px y 300 × 300 px como recomienda Squarespace.
El favicon fue cambiado recientemente.
Problema: Squarespace guardó el nuevo favicon, pero su navegador aún muestra una versión anterior.
Arreglar: Pruebe en una ventana privada/de incógnito u otro navegador antes de realizar cambios adicionales.
Estás probando el dominio o la página equivocados
Problema: Estás verificando un dominio de prueba, una vista previa, un dominio de Squarespace integrado o un dominio diferente al que editaste.
Arreglar: Abra la URL exacta del sitio web publicado asociado con el sitio de Squarespace que cambió.
Comportamiento del navegador móvil
Problema: El favicon aparece en el escritorio pero no en su teléfono.
Arreglar: Verifique el mismo sitio en un navegador de escritorio antes de asumir que la carga falló. El comportamiento de los favicons móviles varía según el navegador, y Squarespace señala que es posible que los navegadores móviles no muestren favicons en absoluto.
¿Cuánto tiempo tarda en actualizarse un Favicon de Squarespace?
Hay tres eventos separados para distinguir:
- Squarespace guarda el favicon: Esto sucede cuando carga la imagen y guarda la configuración del favicon.
- Su sitio web ofrece el nuevo favicon: La configuración del sitio guardada debe proporcionar el icono actualizado a los visitantes.
- Su navegador muestra el nuevo favicon: El navegador puede continuar usando un favicon previamente almacenado en caché.
Debido a que los navegadores pueden retener datos de favicon, no existe un tiempo de actualización universal confiable que garantice que el nuevo ícono aparecerá inmediatamente. Squarespace advierte específicamente que los navegadores pueden ser persistentes con los favicons almacenados en caché. Pruebe una ventana privada del navegador o un navegador diferente antes de concluir que el cambio falló.
¿Cómo se cambia o reemplaza un Favicon de Squarespace?
Reemplazar un favicon existente sigue esencialmente el mismo proceso que agregar uno por primera vez.
- Inicia sesión en Squarespace.
- Abra el sitio web que desea cambiar.
- Abre el panel de favicon.
- Seleccione el cargador de favicon existente.
- Sube la nueva imagen PNG. (Si usa un favicon en modo oscuro, actualice esa versión por separado según sea necesario).
- Haga clic en Guardar.
- Abra el sitio web publicado y consulte la pestaña del navegador. Pruebe en una ventana privada si el favicon anterior sigue apareciendo.
Squarespace permite un favicon en modo oscuro opcional, pero el favicon predeterminado debe existir antes de que se pueda agregar una versión alternativa en modo oscuro.
¿Cómo se elimina un Favicon de Squarespace?
Si desea dejar de usar su favicon personalizado, abra la configuración de favicon y busque el control de eliminación o eliminación disponible junto a la imagen cargada. El control exacto puede variar según la interfaz actual de Squarespace, así que no confíes en un tutorial anterior que especifique un nombre de botón en particular.
Después de eliminar el favicon personalizado, guarde la configuración y pruebe el sitio web nuevamente. Squarespace afirma que los sitios sin un favicon personalizado comienzan con su favicon de cubo predeterminado.
Errores comunes que se deben evitar en el Favicon de Squarespace
- Usando una imagen complicada: Simplifique el diseño para que el ícono siga siendo reconocible en un tamaño pequeño.
- Usando una pequeña imagen fuente: Comience con una fuente limpia y de tamaño adecuado en lugar de ampliar una imagen de baja resolución.
- Mal contraste: Un icono que se mezcla con el fondo de un navegador puede parecer invisible.
- Usar demasiado texto: Los nombres comerciales completos rara vez permanecen legibles en un favicon.
- Subiendo el tipo de archivo incorrecto: Squarespace recomienda PNG para favicons y no permite la carga de .icon.
- Exceder el límite de tamaño de archivo: Los archivos Favicon no pueden exceder los 100 KB.
- Olvidar guardar: Guarde siempre después de que la imagen termine de cargarse.
- Comprobando solo un navegador: Utilice otro navegador o una ventana privada durante la prueba.
- Suponer un ícono almacenado en caché significa que la carga falló: Borre el caché antes de realizar cambios innecesarios.
- Esperar que los navegadores móviles se comporten como navegadores de escritorio: La compatibilidad y visualización de favicons móviles varían según el navegador.
Preguntas frecuentes sobre el favicon de Squarespace
¿Puedo agregar un favicon PNG a Squarespace?
Sí. Squarespace recomienda PNG para cargar favicon. La documentación actual del favicon de Squarespace también indica que los archivos .icon no se pueden cargar a través de la configuración del favicon.
¿Qué tamaño debe tener un favicon de Squarespace?
Squarespace recomienda subir un favicon de entre 100 × 100 px y 300 × 300 px. También establece que el archivo favicon no debe tener más de 100 KB.
¿Por qué no se muestra mi favicon de Squarespace?
La explicación más común es el almacenamiento en caché del navegador. Borre la memoria caché de su navegador, reinícielo o pruebe el sitio en una ventana privada u otro navegador. También confirme que guardó el favicon y que está revisando el sitio web publicado correctamente.
¿Puedo cambiar mi favicon de Squarespace?
Sí. Abra el panel Favicon, cargue la imagen de reemplazo y guarde el cambio.
¿Squarespace cambia automáticamente el tamaño de un favicon?
La documentación actual de Squarespace recomienda cargar ilustraciones de favicon entre 100 × 100 px y 300 × 300 px, aunque señala que los favicons se muestran en tamaños muy pequeños, como 16 × 16 px. El enfoque más seguro es preparar la imagen en un tamaño cuadrado apropiado en lugar de depender de un archivo fuente pequeño.
¿Cómo creo un favicon para Squarespace?
Cree un ícono cuadrado simple a partir de su logotipo, iniciales o un símbolo de marca reconocible. Expórtalo como PNG, mantenlo por debajo de 100 KB y usa dimensiones entre 100 × 100 px y 300 × 300 px. Una herramienta de conversión como PNGtoFavicon.com puede ayudar a convertir un PNG existente en una obra de arte lista para favicon.
¿Cuánto tiempo tarda en actualizarse un favicon de Squarespace?
No existe un tiempo universal confiable para que se actualice la pantalla del navegador. Squarespace puede guardar el cambio inmediatamente, pero el navegador puede continuar mostrando una versión en caché del favicon anterior. Borre el caché o pruebe en una ventana privada al verificar la actualización.
¿Puedo usar mi logotipo como favicon de Squarespace?
Sí. Se puede utilizar un logotipo como favicon, pero se debe simplificar cuando sea necesario para que siga siendo reconocible en dimensiones pequeñas. Squarespace también señala que su propia herramienta Squarespace Logo puede crear logotipos PNG que pueden usarse como favicons.
Conclusión
Para agregar un favicon a Squarespace, prepare un PNG cuadrado simple, abra el panel Favicon del sitio, cargue la imagen y guarde el cambio. Luego verifíquelo en una pestaña del navegador. El punto de solución de problemas más importante es el almacenamiento en caché. Es posible que una carga exitosa de favicon no aparezca inmediatamente porque los navegadores pueden conservar el favicon anterior. Pruebe en una ventana privada, borre el caché o consulte otro navegador antes de asumir que la carga de Squarespace falló.