Cómo agregar un Shopify Favicon a tu Shopify Tienda

Aprenda los conceptos básicos de lo que es un Shopify Favicon y cómo poner uno en tu tienda online.

Si se suscribe a un servicio desde un enlace en esta página, Reeves and Sons Limited puede ganar una comisión. Vea nuestro Declaración de Ética.

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.

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

Esencialmente, 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.

Shopify Ejemplos de 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 de 32 × 32 píxeles. Esa es una imagen bastante pequeña, pero con la ayuda de algunos generadores en línea puedes hacer la tuya propia. Shopify Favicon para su sitio web. Además, las imágenes más grandes se reducen de todos modos, por lo que no necesariamente tiene que llegar a 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 su identidad de 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.

tienda en línea

En el Shopify personalizador, desplácese hasta la parte inferior de la lista de la izquierda y haga clic en Configuración del tema.

Ajustes de tema

Paso 3: selecciona el botón Favicon

En la nueva sección, busque y seleccione el botón Favicon.

icono de favoritos - Shopify 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.

seleccionar imagen

Paso 4: sube tu Favicon

Elija el archivo Favicon y cárguelo en Shopify.

Después de eso, verás una vista previa de tu icono de Favicon. Para que los cambios sean permanentes, seleccione el botón Guardar en Shopify.

guardar el botón

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.

ejemplo Shopify favicon

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 esté borroso o que no ocupe 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 más grande que 32 × 32 y redúzcalo 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 e intentar estirarla para eliminar 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 genial cuando cubres cada píxel del espacio provisto. No tienes mucho espacio, por lo que debes 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, ve con eso. Si prefiere un software gratuito como GIMP o Pixlr, todos funcionan siempre y cuando cumpla con las dimensiones requeridas de 32 × 32.

También tienes la opción de hacer un Favicon con ShopifyLogotipo de Hatchful y generador de Favicon gratuito. Ver nuestra guía completa en el uso Hatchful para construir un logo.

descargar 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.

Shopify Archivo favicon

Tenga en cuenta que muchos de los logotipos que crea con Hatchful (lee nuestro Revisión de Hatchful) utilice 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, descubrí que solo debe usar el favicon Hatchful provisto si ya se ve bien (llena 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:: debe usar una versión más grande de la imagen si planea estirarla sobre un lienzo para recortar el texto y los espacios en blanco. Para esto, utilicé Hatchful para generar logotipos, pero en realidad tomé uno de los logotipos grandes (no el archivo Favicon proporcionado) ya que no quiero que se 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.

32 32 por

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 lo aleje.

versión grande

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 ícono de color sólido y brillante y eliminé todos los signos de texto más pequeño.

versión más pequeña

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.

descargar - Shopify favicon

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.

vista previa de la imagen

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 no llenó todo el espacio de 32 × 32 proporcionado.

el producto final - Shopify favicon

En conclusión

A Shopify Favicon no toma más de unos minutos para diseñar y agregar a su sitio, sin embargo, brinda un maravilloso recordatorio 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 navegación, considerando que lo más probable es que estén buscando en una larga lista de otros sitios cuando revisan esas secciones.

Tenga en cuenta que no debe conformarse con una imagen borrosa o ilegible. Shopify Imagen de icono de favoritos. Si encuentra que el primer Favicon no se ve del todo bien, o si desea recortar algún texto o agregar un fondo transparente, vuelva 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 se vea 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.

Joe Warnimont

Joe Warnimont es un escritor con sede en Chicago que se enfoca en herramientas de comercio electrónico, WordPress y redes sociales. Cuando no está pescando o practicando yoga, colecciona sellos en los parques nacionales (aunque eso es principalmente para niños). Echa un vistazo a la cartera de Joe para contactarlo y ver trabajos anteriores.

Comentarios Comentarios 0

Deje un comentario

Su dirección de correo electrónico no será publicada. Las areas obligatorias están marcadas como requeridas *

Clasificación *

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.