Mostrar un favicon personalizado en tu sitio web de Squarespace es uno de esos detalles que pueden marcar la diferencia. Entonces, si te estás preguntando cómo cambiar el favicon en Squarespaceeste es tu lugar.
Pero antes que nada, si aún no sabes qué es un favicon, no te preocupes, te tenemos.
¿Qué es un favicon?
Un favicon es una imagen pequeña que aparece junto al título de una página en las pestañas de su navegador. También se conoce como icono de navegador. Aquí hay una imagen para indicar cuál es el favicon.
Las imágenes indicadas, por diminutas que sean, son cruciales para un sitio web y facilitan que los usuarios con múltiples pestañas abiertas en sus navegadores encuentren su camino con facilidad.
Favicons en Squarespace
En los sitios web de Squarespace, por lo general comenzarás con el favicon predeterminado de Squarespace que parece un cubo cuadrado.
Muchas personas que inician sus sitios web y hacen bricolaje de la plantilla a veces pueden olvidarse de cambiar el favicon a otra cosa. Son fáciles de identificar ya que su favicon siempre se parece al favicon predeterminado de Squarespace: un cubo simple.
Sin embargo, hay una manera de cambiar el favicon en Squarespace para que puedas poner algo para comercializar tu marca allí, tanto en Squarespace 7.0 como en 7.1.
Según la versión de Squarespace en la que estés, la forma en que agregas un favicon en Squarespace varía. Echemos un vistazo a los dos. Comenzaremos con la versión más nueva.
Cambiar Favicon en Squarespace 7.1
Paso 1
Haga clic en “Diseño” en el menú Inicio.
Paso 2
Haga clic en “Logotipo y Título”.
Paso 3
Desplácese hacia abajo hasta el “Icono del navegador” (favicon) sección.
Etapa 4
Arrastra tu foto al cargador de imágeneso haga clic en el cargador para seleccionar un archivo de su computadora, desplazándose hacia abajo hasta el ícono del navegador.
– Tamaños recomendados de Favicon de Squarespace: 100x100px, 300x300px.
– Formato recomendado de Favicon de Squarespace: Archivo .ico o .png (es posible que los navegadores antiguos no admitan PNG)
Paso 5
Haga clic en “Ahorrar” cuando su imagen de favicon haya terminado de cargarse
Cambiar Favicon en Squarespace 7.0
Paso 1
Hacer clic “Diseño” en el menú de inicio.
Paso 2
Haga clic en “Logotipo y Título”.
Paso 3
Desplácese hacia abajo hasta el Icono del navegador (favicon) sección.
Etapa 4
Arrastre/suelte su imagen en el cargador de imágenes o elija un archivo de su computadora haciendo clic en el cargador.
Paso 5
Hacer clic “Ahorrar” una vez que su imagen haya terminado de cargarse.
¿El Favicon de Squarespace no se muestra?
Recomendamos borrar el caché de su navegador y reiniciarlo si su favicon no aparece inmediatamente. Los navegadores a veces pueden retener los favicons almacenados en caché hasta que borre el caché.
- Ir a su página web (http://www.tudominio.com)
- Añadir / favicon.ico. (http://www.tudominio.com/favicon.ico)
- Recarga la página.
Si eso no funciona, intente borrar el caché de su navegador o abra una ventana de incógnito.
¿Cuáles son los tamaños recomendados para Favicons en cada navegador?
Normalmente se prefiere 16px ya que es compatible con todos los navegadores. Sin embargo, aquí hay algunas pautas para el tamaño en todas las plataformas.
- 16 píxeles: Uso general para pestañas, marcadores y la barra de direcciones.
- 195px: Marcación rápida de ópera
- 128px: Tienda virtual de Chrome
- 114 píxeles: Ícono de la pantalla de inicio del iPhone 4+ (el doble del tamaño de la pantalla retina)
- 96px: Plataforma de televisión de Google
- 72 píxeles: icono de la pantalla de inicio del iPad
- 57 píxeles: Pantalla de inicio estándar de iOS (iPod Touch, iPhone de 1.ª a 3.ª generación)
- 32 píxeles: La barra lateral “Leer más tarde” de Safari, la página de nueva pestaña en Internet Explorer y el botón de la barra de tareas en Windows 7 y superior.
- 24 píxeles: Internet Explorer 9 páginas ancladas
Formatos recomendados para su Favicon
- formato SVG. Este formato es compatible y se utiliza para los navegadores Opera.
- OIC de Windows: El archivo ICO es, con mucho, el más popular. El ICO tiene la ventaja de poder incluir numerosos niveles de resolución y profundidades de bits, lo que funciona bien y es particularmente beneficioso para Windows.
- PNG: El formato de archivo PNG es útil por varias razones. Un archivo PNG no requiere ningún software adicional para producir, lo que lo hace increíblemente fácil de usar. Nos permite tener el tamaño de archivo más pequeño posible al mismo tiempo que permite el uso de transparencia alfa. Sin embargo, Internet Explorer no acepta archivos PNG y solo permite archivos ICO, lo cual es un inconveniente importante al diseñar uno.
- GIF: Este formato no tiene más ventajas que la compatibilidad con navegadores más antiguos. Si bien atraerán más la atención de los usuarios, también los irritarán y la percepción abrumadora es que no son la mejor opción para este uso.
- JPG: El formato JPG no se usa mucho y no ofrece el mismo nivel de resolución que PNG. Además, el JPEG tiende a perder todas sus ventajas debido al pequeño tamaño del favicon.
- PNG: Esta es una variante animada del formato PNG que, si bien es compatible con Firefox y Opera, sufre los mismos problemas que los GIF animados en términos de desviar a los usuarios del contenido del sitio.
Siempre es mejor usar una opción que sea de alta resolución, que no distraiga y que tenga un tamaño decente para obtener la mejor visibilidad de su favicon.
Las ventajas de tener tu propio Favicon
Si tiene un sitio web, lo más probable es que esté tratando de correr la voz sobre algo en línea. Puede ser una tienda, una persona, un evento, una plataforma o cualquier cosa a la que las personas puedan acceder en sus navegadores a través de Internet en una página web.
He aquí por qué tener un favicon personalizado es una gran idea:
1. Un Favicon proporciona conocimiento y exposición de la marca
El favicon funciona de manera similar a los logotipos de elementos físicos o ubicaciones, razón por la cual los logotipos o versiones de logotipos se usan con frecuencia como favicons. Un favicon es una característica distintiva y atractiva que ayuda a un visitante a ubicar o reconocer un producto digital, como un sitio web entre muchos.
Además, si las características de identificación de un sitio web están bien diseñadas y se prueba su legibilidad en tamaños o resoluciones pequeños, los visitantes instintivamente recuerdan la imagen progresivamente mejor a medida que pasa el tiempo. Este componente contribuye a la estrategia de promoción general al aumentar el reconocimiento de la marca en una amplia gama de medios.
2. Los Favicons mejoran la usabilidad
La mayoría de los usuarios son seres visuales que procesan las imágenes más rápido que el texto. Sugiere que los favicons ahorran tiempo al buscar una determinada pestaña o enlace: la pequeña imagen actúa como un ancla o una etiqueta visual, lo que permite al usuario identificar el contenido deseado en cuestión de segundos simplemente navegando a través de la colección de imágenes en lugar de leyendo la copia de cada enlace o ficha.
3. Favicon ayuda con el SEO
Tener un favicon impacta directamente en las clasificaciones de búsqueda de su sitio web. Es por eso que debe mostrarse en las pestañas de su navegador, marcadores, archivos de historial y otros lugares para no solo ayudar a los usuarios a encontrar su sitio fácilmente, sino también aumentar la posibilidad de participación del usuario.
Esto aumentará la cantidad de tiempo que las personas pasan en su sitio web y la cantidad de interacciones que tienen con él, lo que dará como resultado más visitas a su sitio durante períodos prolongados, lo que mejorará su SEO.
Mejores prácticas para diseñar el Favicon perfecto
Al diseñar un favicon para su sitio web, hay varios factores a considerar. Debería tener un gran impacto, a pesar de su pequeño tamaño y simplicidad. Es fundamental crear el mejor favicon posible porque así es como la gente reconocerá su marca. Al crear su favicon, siga estas prácticas recomendadas.
1. Usa bien el espacio
Un favicon no suele ser solo una pequeña réplica de su logotipo corporativo. Se debe tener en cuenta el tamaño completo de su favicon. Debe elegir 16px porque es compatible con todos los navegadores, pero tiene otras opciones como hemos discutido, en caso de que quiera ir por una ruta diferente.
2. Mantenlo simple
Incluso si su favicon es una representación visual de su empresa, debe hacerlo simple. Los favicons más simples son los más efectivos. Los colores son fundamentales para captar la atención de los clientes potenciales y destacar por el diminuto tamaño del favicon y la sencillez de las formas empleadas. Un Favicon con demasiados detalles puede parecer abarrotado y desorganizado.
3. Conviértelo en un identificador de marca
Su favicon es el emblema visual de su marca, por lo que debe comunicar claramente a los usuarios lo que representa su empresa. Esto les muestra inmediatamente lo que hace tu marca. Trate de ser creativo, incluso si es difícil con ese diseño pequeño y simple.
Algunos ejemplos incluyen los favicons de YouTube, Twitter y Whatsapp.
4. Usa abreviaturas
Uso de abreviaturas El uso de la letra inicial del nombre de su empresa o de abreviaturas es un método de uso frecuente. También puede usar un acrónimo para el nombre de su empresa. Experimente con algunas opciones múltiples para encontrar la que mejor represente su negocio.
5. Coordina los colores
Coordinación de colores El ojo puede detectar fácilmente diseños y formas cuando se utilizan colores muy contrastantes. Debido a que los favicons son tan pequeños, debe representar verdaderamente a su organización ante el usuario, y el color es crucial. Tenga en cuenta que cada navegador es un poco diferente, lo que requiere una investigación para saber qué usar.
Pensamientos finales
Un favicon le da a su marca una apariencia profesional y bien organizada. Es mucho mejor que usar el favicon de forma de cubo de Squarespace ya que todos lo están usando.
Experimente con variaciones para ver qué funciona e implemente la mejor iteración para lograr la visibilidad que su marca necesita.
Artículos relacionados
