Cómo agregar un favicon a comprar

Agregar un favicon a Shopify es una personalización del tema sencilla. Puedes cargar una imagen desde tu administrador de Shopify sin editar el código de tu tema en la mayoría de los temas de Shopify. En este tutorial, aprenderá cómo preparar un favicon, agregarlo a su tienda Shopify, reemplazarlo o eliminarlo, verificar que esté funcionando y solucionar casos en los que el favicon no aparece. También aprenderá qué hacer si su tema coloca la configuración del favicon en una ubicación diferente.

Antes de comenzar, tenga lista una imagen de favicon cuadrada. Shopify recomienda un tamaño de favicon de 32 × 32 píxeles, aunque una imagen de 16 × 16 píxeles también figura como tamaño de favicon ideal en la documentación de Shopify. Las imágenes de más de 32 × 32 píxeles se pueden reducir a 32 × 32 píxeles cuando se cargan.

¿Cómo se agrega un Favicon a Shopify?

Shopify proporciona una configuración de favicon a través del editor de temas para tiendas elegibles. La ubicación exacta de la configuración puede variar según la versión del tema. Las instrucciones actuales de Shopify lo colocan en Configuración del tema, donde puede aparecer como Favicon o en Logotipo.

1. Inicia sesión en Shopify: Inicia sesión en tu administrador de Shopify. Necesitas acceso a la tienda cuyo favicon deseas cambiar.
2. Abrir Tienda Online > Temas: Desde el administrador de Shopify, ve a Tienda en línea > Temas. Ubique el tema que desea modificar.
3. Abra el editor de temas: Haga clic Personalizar (o Editar tema) junto al tema que deseas personalizar. El punto importante es abrir el editor de temas del tema que desea cambiar.
4. Abra la configuración del tema: Dentro del editor de temas, haga clic en Configuración del tema (representado por un ícono de ajustes en el panel izquierdo).
5. Encuentra la configuración del favicon: Dependiendo de la versión de su tema, haga clic en Logotipo o favicon. Shopify señala específicamente que la ubicación puede diferir según la versión del tema. No asumas que cada tema de Shopify mostrará una configuración con el mismo nombre en el mismo lugar.
6. Selecciona tu imagen de favicon: En la sección de imagen de Favicon, haga clic en Seleccionar imagen. Luego puedes seleccionar una imagen que ya esté cargada en tu administrador de Shopify o hacer clic en Agregar imágenes y sube una imagen desde tu computadora. Selecciona el favicon que preparaste.
7. Haga clic en Listo: Después de seleccionar la imagen, haga clic en hecho. Shopify te devolverá a la configuración del favicon.
8. Agregue texto alternativo cuando esté disponible: Algunos temas te permiten agregar texto alternativo al favicon. Para hacer esto, haga clic Editar en la sección Imagen de Favicon e ingresa una breve descripción de la imagen. Shopify señala que algunos temas ofrecen esta opción. Un ejemplo descriptivo sería: Iniciales de la marca en blanco sobre fondo negro..
9. Guarde sus cambios: Haga clic Guardar en la parte superior derecha. Esto aplica el favicon al tema que estás editando.
10. Consulta la tienda en vivo: Abre tu tienda Shopify publicada en una ventana normal del navegador. Mire la pestaña del navegador y verifique si su nuevo favicon aparece junto al título de la página. No confíes únicamente en la vista previa dentro del editor de temas de Shopify. Shopify señala que los favicons no se muestran al ver un tema a través del Editor de temas porque el editor es parte del administrador de Shopify y no del escaparate en vivo.

¿Dónde está la configuración del Favicon en Shopify?

En las instrucciones actuales de Shopify, se accede a la configuración del favicon a través del editor de temas:

Administrador de Shopify → Tienda en línea → Temas → Editar tema/Personalizar → Configuración del tema

A partir de ahí, la configuración puede aparecer como favicon o bajo Logotipo, dependiendo de la versión del tema. Esta variación es importante porque un tutorial anterior puede indicarle que haga clic en Favicon inmediatamente, mientras que su tema puede colocar la misma opción dentro de Logo. Si no puede encontrar la configuración, consulte el panel de configuración del tema completo en lugar de buscar solo una etiqueta específica.

Shopify también requiere que los temas enviados a su Tienda de temas tengan una configuración de favicon, lo que significa que se espera que los temas diseñados para el ecosistema de Shopify brinden soporte para esta personalización.

¿Qué pasa si no puedes encontrar una configuración de Favicon?

Primero, confirma que estás editando el tema correcto. Luego revisa:

• Ir a Tienda en línea > Temas.
• Abra el tema que realmente desea publicar.
• Abierto Configuración del tema.
• comprobar ambos favicon y Logotipo.
• Mire el panel de configuración del tema completo. Algunos temas organizan sus configuraciones de manera diferente.

Si su tema realmente no expone una configuración de favicon, el código del tema puede proporcionar una alternativa. Los temas de Shopify pueden exponer configuraciones globales a través de settings_schema.json, y la documentación para desarrolladores de Shopify muestra que las configuraciones de favicon se pueden representar a través del objeto de configuración global del tema. La edición de código no debería ser la primera opción cuando el tema ya proporciona una configuración de favicon.

¿Qué tamaño debe tener un favicon de Shopify?

Shopify recomienda 32 × 32 píxeles para un favicon. Su documentación de ayuda también identifica 16 × 16 píxeles como un tamaño de favicon ideal y explica que las imágenes más grandes se pueden reducir a 32 × 32 píxeles cuando se cargan.

La prioridad práctica no es simplemente elegir un número. La imagen debe seguir siendo reconocible después de mostrarse en tamaño favicon. Por ejemplo, un ícono de 32 × 32 píxeles que contiene el nombre completo de una empresa puede técnicamente encajar, pero aún así ser imposible de leer. Un símbolo simple con un fuerte contraste puede funcionar mucho mejor.

¿Cómo se crea un Favicon para Shopify?

Tienes varias opciones dependiendo de los activos de marca que ya tengas.

Crea un favicon a partir de tu logo

Comience con la parte más reconocible de su logotipo. Un logotipo horizontal que contiene un símbolo y un nombre largo de la empresa normalmente debe simplificarse en lugar de reducirse proporcionalmente hasta que el texto se vuelva ilegible. Utilice el símbolo solo o combine una o dos iniciales reconocibles.

Crear un favicon a partir de las iniciales

Si su empresa no tiene un ícono distintivo, cree un favicon simple usando una o dos letras. Por ejemplo, NS Podría representar una marca llamada North Star. Utilice un tipo de letra claro, espacio suficiente y fuerte contraste.

Convertir un PNG existente en un favicon

Si ya tiene una imagen PNG cuadrada, puede convertirla en una obra de arte lista para favicon antes de cargarla. Una herramienta como PNGtoFavicon.com Puede convertir un PNG en un favicon, lo cual es útil cuando ya tiene una imagen de marca pero necesita una versión de favicon dedicada.

Después de la conversión, inspecciona el ícono resultante en un tamaño pequeño antes de subirlo a Shopify.

Cree un favicon específicamente para visualización en pantalla pequeña

No reduzca simplemente su logotipo de tamaño completo sin comprobar el resultado. Elimine elementos innecesarios, aumente el contraste cuando sea necesario y asegúrese de que la parte importante del ícono permanezca visible. El favicon tiene éxito cuando un visitante puede identificar su marca a partir del pequeño ícono sin necesidad de hacer zoom.

¿Cómo verificas si tu Shopify Favicon está funcionando?

Después de guardar el favicon, verifíquelo en la tienda en vivo.

• Consulta la pestaña del navegador: Abra la tienda publicada y busque junto al título de la página en la pestaña de su navegador. Shopify identifica la pestaña del navegador como uno de los principales lugares donde aparece un favicon.
• Verifique el historial del navegador: Visite otra página, regrese a su tienda y verifique las entradas del historial del navegador. Shopify enumera el historial del navegador como otra ubicación donde puede aparecer un favicon.
• Consultar un marcador: Añade la tienda a favoritos y comprueba si el favicon aparece junto al marcador. Shopify identifica específicamente las tiendas marcadas como otra ubicación donde se puede mostrar el favicon.
• Pruebe una ventana privada o de incógnito: Si el antiguo favicon aún está visible en su navegador habitual, abra una ventana privada o de incógnito y visite la tienda en vivo. Esto ayuda a separar un problema de caché del navegador de un problema de configuración de Shopify.
• Pruebe otro navegador: Abra la tienda en otro navegador de escritorio. Si el nuevo ícono aparece en un navegador pero no en otro, el almacenamiento en caché del navegador o el comportamiento específico del navegador es una explicación más probable que una carga fallida de Shopify.
• Verifique el comportamiento móvil: No asuma que los navegadores de escritorio y móviles mostrarán el favicon de manera idéntica. Más importante aún, distinga el escaparate en vivo de las interfaces de administración de Shopify. Shopify afirma que los favicons no aparecen en la vista previa del Editor de temas.

¿Por qué no se muestra mi Shopify Favicon?

Varios problemas diferentes pueden producir el mismo síntoma.

¿Cómo se arregla un Favicon de Shopify que no se actualiza?

Realice estas comprobaciones en orden:

1. Abierto Tienda en línea > Temas.
2. Confirma que estás editando el tema correcto.
3. Abierto Configuración del tema.
4. Compruebe el favicon o Logotipo configuración.
5. Confirme que esté seleccionada la imagen correcta.
6. Haga clic Guardar.
7. Abra el escaparate publicado, no el Editor de temas.
8. Pruebe el sitio en una ventana de navegador privada o de incógnito.
9. Pruebe otro navegador.
10. Verifique el favicon nuevamente en la pestaña del navegador.

Esta secuencia ayuda a identificar si el problema proviene de la configuración de Shopify, el tema seleccionado o el almacenamiento en caché del navegador.

¿Cómo se cambia o reemplaza un favicon de Shopify?

Reemplazar un favicon utiliza la misma configuración de tema que la carga inicial.

• Inicia sesión en tu administrador de Shopify.
• Vaya a Tienda en línea > Temas.
• Encuentra el tema que deseas actualizar.
• Haga clic en Editar tema/Personalizar.
• Abra la configuración del tema.
• Haga clic en Logotipo o Favicon, según su tema.
• En la sección Imagen de Favicon, haga clic en Seleccionar imagen.
• Elija el favicon de reemplazo o cargue una nueva imagen.
• Haga clic en Listo.
• Haga clic en Guardar.
• Abra la tienda en vivo y verifique el nuevo ícono.

La documentación actual de Shopify confirma este flujo de trabajo y la variación del Logo/Favicon que depende del tema.

¿Cómo se elimina un favicon de Shopify?

El proceso de eliminación depende de los controles expuestos por su tema.

Abierto:

Tienda en línea → Temas → Editar tema/Personalizar → Configuración del tema

Luego abra el área de Favicon o Logotipo y busque el control asociado con la imagen de favicon actualmente seleccionada.

Si su tema ofrece una opción para eliminar o borrar, úsela y guarde el tema. No agregue código personalizado simplemente para eliminar un favicon cuando su tema ya proporciona una configuración para administrarlo.

¿Puedes agregar un Shopify Favicon con un código personalizado?

Sí, pero la mayoría de las tiendas deberían usar primero la configuración de tema incorporada.

La arquitectura del tema de Shopify admite configuraciones globales a través de settings_schema.json. Un tema puede definir una configuración de imagen de favicon y acceder a su valor a través del objeto de configuración de Liquid. La documentación para desarrolladores de Shopify incluye un ejemplo que representa un favicon PNG desde settings.favicon.

Por lo tanto, para un tema personalizado, el código puede ser parte de la implementación. Sin embargo, para una tienda Shopify normal, no es necesario editar Liquid solo para agregar un favicon cuando el tema ya proporciona la configuración.

¿Cuándo debería utilizar la configuración del tema en lugar del código?

Utilice la configuración de tema incorporada cuando esté disponible. Es más fácil de administrar, es menos probable que se introduzcan errores en el tema y se puede cambiar más adelante sin modificar los archivos de Liquid.

¿Qué debería comprobar antes de editar el código del tema?

Si debe editar el código, primero identifique el tema publicado, la implementación del favicon del tema, el archivo de diseño relevante, si ya existe una configuración global del favicon y si otro desarrollador actualiza o mantiene el tema. No pegue el código de favicon en un archivo de tema aleatorio sin comprender cómo el tema maneja la configuración global.

Errores comunes que se deben evitar en Shopify Favicon

• Usando su logotipo completo: Un logotipo largo puede volverse ilegible cuando se reduce a las dimensiones de un favicon.
• Usando texto pequeño: Una o dos iniciales pueden funcionar. Un eslogan completo normalmente no lo es.
• Usando una imagen complicada: Una simple marca es más fácil de reconocer que una ilustración detallada.
• Usando una imagen no cuadrada: Comience con ilustraciones cuadradas para que el favicon no dependa de un recorte o escala agresivo.
• Usando una fuente de baja calidad: Una imagen de origen borrosa producirá un favicon deficiente incluso después de cambiar el tamaño.
• Olvidar guardar: Seleccionar una imagen no es suficiente. Guarde los cambios del tema.
• Comprobando solo el Editor de temas: Es posible que el favicon no aparezca en la vista previa del Editor de temas de Shopify. En su lugar, pruebe el escaparate publicado.
• Comprobando solo un navegador: Un favicon obsoleto en un navegador no significa automáticamente que la configuración de Shopify sea incorrecta.
• Probando un tema inédito: Puede personalizar un tema que no esté activo actualmente, pero eso no cambia el favicon que los visitantes ven en su escaparate publicado.
• Editar código innecesariamente: Si el tema ya tiene una configuración de favicon, úsela en lugar de cambiar Liquid.

Preguntas frecuentes sobre el favicon de Shopify

Cómo crear un Favicon antes de subirlo a Shopify

Si aún no tienes un favicon, utiliza este sencillo flujo de trabajo:

1. Comience con su logotipo, símbolo de marca o iniciales.
2. Crea una versión cuadrada del diseño.
3. Elimina detalles que desaparecerán en tamaños pequeños.
4. Utilice un fuerte contraste entre el icono y el fondo.
5. Prepare la imagen con el tamaño de 32 × 32 píxeles recomendado por Shopify o utilice una fuente limpia más grande que Shopify pueda reducir.
6. Convierta un PNG existente con una herramienta de favicon cuando sea necesario.
7. Cargue la imagen terminada a través de la configuración del Tema.
8. Guarda el tema.
9. Pruebe el favicon en la tienda en vivo.

Conclusión

Agregar un favicon a Shopify es principalmente una tarea del editor de temas. Abra Tienda en línea > Temas, edite el tema relevante, abra Configuración de tema, busque Favicon o Logotipo, seleccione su imagen y guarde el tema. Utilice un icono cuadrado simple que siga siendo reconocible en un tamaño muy pequeño. Cuando el nuevo favicon no aparece inmediatamente, revisa la tienda publicada en una ventana privada o en otro navegador antes de cambiar la configuración de Shopify nuevamente. El almacenamiento en caché del navegador puede hacer que un favicon actualizado correctamente aparezca sin cambios.