La identidad de tu tienda de comercio electrónico reúne varios elementos, como el logotipo, los colores del sitio y su materiales de marketing. Esta identidad fortalece su marca en general y crea un recordatorio saludable para sus clientes, evocando sentimientos de comodidad y confiabilidad cuando ven las imágenes y los colores de su marca.
Aunque es de tamaño pequeño, el Favicon también se relaciona con esa estrategia de marca. En este tutorial, le mostraremos cómo crear y agregar un favicon a su Shopify tienda, completando su apariencia en línea y haciendo que sea más fácil reconocer su tienda cuando los clientes la visitan.
En este artículo
Qué es un Shopify ¿Favicón?
A Shopify Favicon, o cualquier Favicon para el caso, es un pequeño icono de su sitio web que aparece en la pestaña del navegador junto al nombre de su sitio web.
La barra de direcciones del navegador es el área más común para ver el sitio Favicon, pero también aparece en las siguientes ubicaciones:
- Aplicaciones de la barra de herramientas
- Favoritos
- Resultados del historial
- Barras de búsqueda
- A veces, cuando se comparte en las redes sociales
Básicamente, cada vez que el navegador necesita mostrar un enlace a su sitio web y no hay mucho espacio para otro contenido, reemplaza su logotipo habitual de tamaño completo con el Favicon.
De forma predeterminada, Shopify agrega el Shopify logo para su Favicon, así que necesitamos cambiar eso.
Un buen favicon suele ser una versión más pequeña de su logotipo, pero a veces varían un poco porque desea asegurarse de que sean visibles, ocupen todo el espacio asignado y agregue un poco de color al lado del nombre de su sitio web.
De forma predeterminada, todos los navegadores admiten Favicons con un tamaño de 32 × 32 píxeles. Esa es una imagen bastante pequeña, pero con la ayuda de algunos generadores en línea puedes crear la tuya Shopify Favicon para su sitio web. Además, las imágenes más grandes se reducen de todos modos, por lo que no es necesario que tenga exactamente 32 × 32.
Un favicon tiene bastante sentido para las tiendas en línea en Shopify ya que son fáciles de agregar y es importante fortalecer la identidad de su marca como vendedor en línea. Algunos también argumentan que ayuda con el SEO.
Siga leyendo para obtener más información sobre cómo agregar Favicon a su Shopify almacenar.
Cómo agregar un favicon a su Shopify Tienda – Guía de pasos rápidos
Como se mencionó, al ejecutar un sitio a través de Shopify agrega automáticamente un Shopify logotipo como el Favicon de su sitio. No hay nada de malo en eso, pero es mucho más profesional y orientado a la marca incluir tu propio logotipo. Estos son los pasos que debes seguir:
Paso 1: vaya a su Shopify tablero
Por tanto, ve a tu Shopify panel de control y haga clic en Tienda online en Canales de ventas.
Paso 2: navega a la configuración del tema
Navegue hasta sus Temas y haga clic en el botón Personalizar junto a su tema actual. Aunque la configuración cambia de un tema a otro, todos los Shopify Los temas tienen una sección para cambiar el Favicon.
En Shopify personalizador, desplácese hasta la parte inferior de la lista de la izquierda y haga clic en Configuración del tema.
Paso 3: selecciona el botón Favicon
En la nueva sección, busque y seleccione el botón Favicon.
Esto revela un botón para Seleccionar imagen o Explorar imágenes gratuitas. No puedo imaginar que tengan imágenes gratuitas que coincidan con su logotipo, por lo que es mejor hacer clic en Seleccionar imagen para cargar una imagen personalizada desde su computadora.
Paso 4: sube tu Favicon
Elija el archivo Favicon y cárguelo en Shopify.
Después de eso, verá una vista previa de su ícono de Favicon. Para que los cambios sean permanentes, seleccione el botón Guardar en Shopify.
Para ver tu Shopify favicon en acción, vaya a la interfaz de su sitio web y mire la pestaña del navegador actual. Debería ver el Favicon junto al título de su sitio.
Consejos para crear su favicon
Aunque parece fácil generar un pequeño ícono, es importante hacerlo bien, considerando que los clientes ven el Favicon cada vez que visitan su sitio. También es fácil hacer un Favicon que sea borroso o que no llene todo el espacio, anulando el propósito del Favicon ya que no es tan visible a simple vista.
Para resolver cualquier problema, aquí hay algunos consejos para crear su Shopify Favicón:
- Comience su diseño con un tamaño superior a 32 × 32 y reduzca el tamaño si es necesario. Es probable que tenga una imagen más borrosa si intenta estirar una imagen más pequeña en el espacio. Por ejemplo, tomar una imagen de 32 × 32 de Hatchful y tratar de estirarla para deshacerse de la parte escrita del logotipo puede causar problemas.
- Por lo general, no puede simplemente tomar su logotipo actual y esperar que funcione perfectamente como un Favicon.
- Favicon se ve muy bien cuando cubre cada píxel del espacio provisto. No tiene mucho espacio, por lo que debe aprovechar cada square píxel en el espacio de 32 × 32.
- Elimina todo el texto, ya que es difícil de leer en un Favicon. La excepción es si el elemento principal de su logotipo es una letra grande.
- Apunta a colores sólidos y más brillantes. Los logotipos simples y caricaturescos funcionan mejor.
- Mira los Favicons de tus marcas favoritas. ¿Qué han hecho para asegurarse de que su imagen en línea se transmita con un favicon?
- Considere llenar todo el espacio con un fondo de color sólido o hacer un fondo transparente con el elemento de primer plano estirado para que solo toque los bordes. Notarás que muchas marcas más grandes tienen fondos transparentes para sus Favicons.
- El archivo ICO format funciona bien para imágenes más pequeñas. Si no está familiarizado, use un PNG para fondos transparentes o un JPG para Favicons de alta resolución con fondos sólidos.
Cómo generar un favicon para tu Shopify Tienda
Tiene la opción de diseñar un Favicon en cualquier software de diseño de su elección. Si prefieres Photoshop, hazlo. Si prefiere un software gratuito como GIMP o Pixlr, todos funcionan siempre que se ciña a las dimensiones requeridas de 32 × 32.
También tienes la opción de hacer un Favicon con Shopify's Hatchful Logo y Free Favicon Generator. Ver nuestra guía completa en el uso Hatchful para construir un logo.
Una vez que el creador del logotipo hace su trabajo, le proporciona un archivo lleno de múltiples logotipos. formats, uno de los cuales es un Favicon.
Tenga en cuenta que muchos de los logotipos que crea con Hatchful (lee nuestro Revisión de Hatchful) utilizan espacios en blanco alrededor del logotipo, por lo que es posible que deba ajustarlo para que el gráfico cubra la mayor parte del espacio. En general, he descubierto que solo debe usar el favicon Hatchful proporcionado si ya se ve bien (ocupa la mayor parte del espacio y no tiene elementos pequeños como texto).
Si ese no es el caso, use un software de edición de terceros como Photoshop o Pixlr para eliminar algunos de los elementos innecesarios.
Importante:: Necesita usar una versión más grande de la imagen si planea estirarla sobre un lienzo para recortar texto y espacios en blanco. Para esto, utilicé Hatchful para generar logotipos, pero en realidad tomé uno de los logotipos grandes (no el archivo Favicon provisto) ya que no quiero que ocurra un desenfoque cuando lo estiro sobre el lienzo de 32 × 32.
Dentro de su software de edición, elija un nuevo lienzo con el Ancho y el Alto establecidos en 32.
Haga una capa para la nueva imagen y asegúrese de que la imagen sea más grande que el lienzo de 32 × 32, ya que puede estar estirándola. Luego cargue o coloque la imagen en el lienzo.
En la siguiente captura de pantalla, tengo el diseño de Favicon ampliado para asegurarme de que se ajusta al square adecuadamente. Está borroso, pero sé que se verá mucho mejor cuando reduzca la imagen.
Como puede ver, la versión alejada del Favicon en el diseñador de Pixlr se ve bien. Cubrí la mayor parte del espacio asignado, opté por un icono de color sólido y brillante y eliminé todos los signos de texto más pequeño.
El último paso es descargar el archivo. Puede optar por convertirlo en un PNG transparente en este punto. Pero para este tutorial me quedo con un JPG de alta resolución para que se vea lo más nítido posible. Y no me importa tener un fondo con un color sólido.
Vuelve a tu Shopify tablero. Haga clic en Tienda en línea> Temas> Personalizar.
Luego vaya a Configuración del tema> Favicon.
Sube ese nuevo Favicon y haz clic en el botón Guardar en el Shopify editor.
Nuevamente, la forma principal de probar y ver su Favicon es simplemente abriendo una pestaña con la URL del sitio web de su página de inicio. Como puede ver, el Favicon se muestra muy bien y en realidad es un poco mejor que mi Favicon anterior, ya que ese no llenó todo el espacio de 32 × 32 proporcionado.
En conclusión
A Shopify Favicon no toma más de unos minutos para diseñar y agregar a su sitio, sin embargo, proporciona un recordatorio maravilloso a sus visitantes en qué sitio web se encuentran. Además, puede servir como una forma para que las personas encuentren su sitio web en sus marcadores e historiales de navegador, considerando que lo más probable es que estén buscando en una larga lista de otros sitios al pasar por esas secciones.
Tenga en cuenta que no debe conformarse con una imagen borrosa o ilegible. Shopify Imagen de favicon. Si encuentra que el primer Favicon no se ve muy bien, o si desea recortar un texto o agregar un fondo transparente, regrese al principio y hágalo bien. Aunque no es una buena idea no tener ningún Favicon, un Favicon borroso o difícil de ver hace que su marca parezca poco profesional y algo tonta.
Si tiene alguna pregunta sobre cómo agregar Favicons a Shopifyo haciendo el tuyo Shopify Favicon, háganoslo saber en la sección de comentarios a continuación.
Comentarios Comentarios 0