Cómo agregar un favicon a tu tienda Shopify (Guía 2026)

Para agregar un favicon a tu tienda Shopify: ve a Online Store → Themes → Customize → Theme Settings → Favicon, sube una imagen PNG de 32x32 y haz clic en Save. Tu favicon aparecerá en las pestañas del navegador inmediatamente después de guardar.

A continuación encontrarás las especificaciones completas, instrucciones paso a paso y soluciones a problemas comunes.

Requisitos de favicon en Shopify

Antes de subir tu favicon, asegúrate de que cumpla con estas especificaciones:

Requisito	Especificación
Tamaño	32 x 32 píxeles (recomendado)
Formato	PNG o ICO
Fondo	Transparente (opcional pero recomendado)
Peso del archivo	Menos de 1 MB

Nota: Shopify redimensiona automáticamente las imágenes más grandes a 32x32 píxeles, lo que puede causar pérdida de calidad. Crea tu favicon en el tamaño correcto para obtener los mejores resultados.

Requisitos de plan en Shopify

No todos los planes de Shopify permiten personalizar el favicon:

Plan Starter: Sin soporte para favicon
Plan Basic y superiores: Soporte completo para favicon

Si estás en el plan Starter, necesitarás actualizar tu plan para agregar un favicon personalizado.

Paso 1: Accede al personalizador de temas

Inicia sesión en tu panel de administración de Shopify
Navega a Online Store → Themes
Encuentra tu tema actual y haz clic en Customize

Paso 2: Abre Theme Settings

En el editor de temas, busca el ícono de engranaje o Theme Settings en la barra lateral
Haz clic para expandir el panel de configuración
Desplázate hacia abajo hasta encontrar la sección Favicon o Logo (la ubicación varía según el tema)

Paso 3: Sube tu favicon

Haz clic en Select image en la sección de Favicon
Elige tu archivo de favicon desde tu computadora
Alternativamente, haz clic en Explore free images para usar la biblioteca integrada de Shopify
Haz clic en Done para confirmar tu selección

Paso 4: Agrega texto alternativo (mejor práctica SEO)

Después de subir tu favicon:

Pasa el cursor sobre la imagen subida
Haz clic en el ícono de lápiz para editar
Ingresa un texto alternativo descriptivo (por ejemplo, "Logo de tu marca")
Esto mejora la accesibilidad y puede beneficiar el SEO

Paso 5: Guarda y verifica

Haz clic en Save en la esquina superior derecha
Abre tu tienda en una nueva pestaña del navegador
Verifica que el favicon aparezca en la pestaña del navegador

Avanzado: agregar favicon mediante código del tema

Para mayor control, puedes agregar un favicon directamente en el código de tu tema:

Ve a Online Store → Themes → Actions → Edit code
Sube tu favicon a la carpeta Assets
Abre theme.liquid en la carpeta Layout
Agrega este código dentro de la sección <head>:

<link rel="icon" type="image/png" href="{{ 'favicon.png' | asset_url }}">

Reemplaza favicon.png con el nombre real de tu archivo.

Consejos de diseño de favicon para ecommerce

Tu favicon representa tu marca en 32x32 píxeles. Aquí te explicamos cómo hacer que funcione:

Lo que sí debes hacer

Usa una versión simplificada de tu logo
Elige colores de alto contraste
Mantén el diseño llamativo y simple
Usa el color principal de tu marca
Prueba la visibilidad en temas de navegador claro y oscuro

Lo que no debes hacer

Evita el texto (es ilegible en tamaños pequeños)
No uses detalles intrincados o patrones
No uses fotos o imágenes complejas
Evita combinaciones de colores con bajo contraste

Creación de tamaños de favicon para diferentes dispositivos

Aunque Shopify solo requiere 32x32, considera crear múltiples tamaños para una visualización óptima:

Tamaño	Uso
16x16	Pestañas del navegador (estándar)
32x32	Pestañas del navegador (retina)
180x180	Apple Touch Icon (pantalla de inicio en iOS)
192x192	Pantalla de inicio en Android
512x512	Pantallas de inicio de PWA

Usa una herramienta generadora de favicons para crear todos los tamaños a partir de una sola imagen de alta resolución.

Solución de problemas: el favicon no se muestra

Limpia la caché del navegador

Los navegadores almacenan los favicons en caché de manera agresiva. Prueba estas soluciones:

Recarga forzada: Presiona Cmd+Shift+R (Mac) o Ctrl+Shift+R (Windows)
Modo incógnito: Abre tu tienda en una ventana de navegación privada
Limpiar caché: Ve a la configuración del navegador y limpia las imágenes en caché

Verifica la configuración del tema

Confirma que el favicon se subió correctamente en Theme Settings
Algunos temas tienen configuraciones separadas de favicon para móvil
Intenta volver a subir la imagen

Verifica el formato del archivo

Asegúrate de que tu archivo sea formato PNG o ICO
Los archivos JPEG pueden no funcionar correctamente
Verifica que el archivo no esté corrupto

Espera la propagación

Después de guardar, los cambios pueden tardar unos minutos en aparecer. Si usas un CDN o una aplicación de caché, es posible que también necesites limpiar esa caché.

¿El favicon no aparece en los resultados de búsqueda de Google?

Si tu favicon aparece en las pestañas del navegador pero no en los resultados de búsqueda de Google:

Envía tu sitemap a Google Search Console
Solicita la indexación de tu página principal
Espera a que Google rastree tu sitio (puede tardar días o semanas)
Asegúrate de que tu sitio no esté bloqueando el acceso al favicon en robots.txt

Google tiene requisitos específicos para favicons en resultados de búsqueda:

Debe tener al menos 48x48 píxeles (Google escala automáticamente si es necesario)
Debe ser accesible para Googlebot
Debe representar tu marca, no ser un ícono genérico

Por qué tu tienda Shopify necesita un favicon

Un favicon no es solo decoración, cumple propósitos reales de negocio:

Reconocimiento de marca

Los clientes con múltiples pestañas abiertas pueden identificar tu tienda al instante. Esto es especialmente valioso para visitantes recurrentes.

Apariencia profesional

Las tiendas sin favicon muestran un ícono genérico del navegador, lo que las hace ver incompletas o poco profesionales.

Mejores marcadores

Cuando los clientes guardan tu tienda en favoritos, tu favicon aparece en la barra de marcadores, manteniendo tu marca visible.

Señal de confianza

Un favicon personalizado indica atención al detalle, aumentando sutilmente la confianza del cliente en tu tienda.

Usar Favicon.im para generar tu favicon de Shopify

¿Necesitas crear o redimensionar un favicon rápidamente? Usa nuestras herramientas gratuitas:

Visita el Generador de Favicons para convertir cualquier imagen a formato favicon
Sube tu logo o imagen de marca
Descarga el favicon con el tamaño correcto
Súbelo a Shopify siguiendo los pasos anteriores

Preguntas frecuentes

¿Cómo agrego un favicon a mi tienda Shopify?

Ve a Online Store → Themes → Customize → Theme Settings, encuentra la sección Favicon, sube una imagen PNG de 32x32 y haz clic en Save.

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

Shopify recomienda 32x32 píxeles. Las imágenes más grandes se redimensionarán automáticamente, lo que puede reducir la calidad.

¿Por qué no se muestra mi favicon en Shopify?

Causas comunes: caché del navegador (prueba con recarga forzada o modo incógnito), formato de archivo incorrecto (usa PNG o ICO), o problema con la configuración del tema (vuelve a subir la imagen).

¿Puedo agregar un favicon en el plan Starter de Shopify?

No, la personalización de favicon requiere el plan Basic o superior. Las tiendas con plan Starter muestran el ícono predeterminado de Shopify.

¿Cuánto tiempo tarda en aparecer mi favicon en Google?

Google actualiza los favicons según su propio calendario, generalmente de días a semanas. Envía tu sitemap a Google Search Console y solicita la indexación para acelerar el proceso.

Resumen

Agregar un favicon a Shopify toma menos de 2 minutos:

Abre Theme Settings en el personalizador
Encuentra la sección Favicon
Sube una imagen PNG de 32x32
Agrega texto alternativo para SEO
Guarda y verifica

Un pequeño ícono con un impacto significativo en la profesionalidad y el reconocimiento de marca de tu tienda.