Si observas la pestaña de esta página en el navegador, al lado del título, deberías ver el siguiente ícono:
Este es llamado favicon, o ícono de página. Es pequeño, pero trabaja mucho por tu marca y por la experiencia de quienes visitan tu sitio. Si no utilizas un favicon, los usuarios verán el ícono genérico del navegador, y eso hace que una tienda se vea sin terminar.
Veamos dónde aparecen los favicons, por qué importan en una tienda online, qué formatos y tamaños usar y cómo configurarlos en tu tienda online de Jumpseller.
Dónde aparece tu favicon
El favicon se muestra en más lugares de los que imaginas:
- Pestañas del navegador, junto al título de la página.
- Marcadores, historial y sugerencias de la barra de direcciones.
- Pantalla de inicio del teléfono, cuando un cliente guarda tu tienda como acceso directo en su teléfono o tablet.
- Resultados de búsqueda: Google muestra el favicon de un sitio junto a su nombre en los resultados, así que muchas veces es lo primero de tu marca que ve un nuevo cliente.
Por qué el favicon importa en una tienda online
-
Le da a tu marca una seña reconocible. El mismo ícono en todas las páginas refuerza tu identidad, igual que tu logo.
-
Los clientes te encuentran más rápido. Cuando alguien tiene muchas pestañas abiertas comparando productos de varias tiendas, puede ubicar la tuya de un vistazo.
-
Los marcadores son más fáciles de revisar. El favicon ayuda a los clientes que vuelven a encontrar tu sitio más rápido entre sus páginas guardadas o su historial.
-
Genera confianza. Un ícono ausente o genérico es un detalle menor, pero puede hacer que una tienda se vea menos profesional justo cuando alguien está decidiendo si comprar.
-
Destaca en los buscadores. Como tu favicon aparece junto a tu resultado en Google, un ícono claro y coherente hace que tu sitio se vea consolidado. Es una pieza pequeña de un buen SEO: no es un factor de posicionamiento por sí solo, pero ayuda a que la gente reconozca tu tienda entre los resultados.
Formatos y tamaños del favicon
Formatos
-
ICO: el formato clásico. Un solo archivo
.icopuede contener varios tamaños (por ejemplo 16×16, 32×32 y 48×48) y todos los navegadores lo aceptan. - PNG: muy compatible y fácil de exportar desde cualquier herramienta de diseño. Es la opción habitual para íconos más grandes, como el ícono táctil de Apple.
- SVG: un formato vectorial que se ve nítido en cualquier tamaño. La mayoría de los navegadores modernos aceptan favicons en SVG, pero no todos, así que conserva una versión PNG o ICO como respaldo.
Tamaños recomendados
| Dónde se usa | Tamaño | Formato |
|---|---|---|
| Pestañas del navegador | 16×16 y 32×32 px | ICO o PNG |
| Resultados de Google | Un cuadrado múltiplo de 48 px (48×48, 96×96, 144×144…) | Cualquier formato de favicon válido, incluido SVG |
| Pantalla de inicio de iPhone y iPad (ícono táctil de Apple) | 180×180 px | PNG |
| Pantalla de inicio de Android y accesos directos | 192×192 y 512×512 px | PNG |
La regla común: usa siempre una imagen cuadrada. Si vas a crear un solo archivo, parte de una versión cuadrada grande (512×512 funciona bien) y redúcela, en lugar de agrandar un ícono pequeño.
Cómo diseñar un buen favicon
- Simplifica tu logo. Un logo completo con texto se convierte en una mancha ilegible a 16 píxeles. Usa la inicial, un símbolo o la parte más reconocible de tu logo.
- Usa buen contraste. Elige colores que se diferencien entre sí y del fondo del navegador. Revisa cómo se ve con el tema claro y con el tema oscuro.
- Mantén la coherencia. Usa los mismos colores de tu logo y del tema de tu tienda, para que el favicon se sienta parte de tu marca.
- Pruébalo a tamaño real. Abre tu tienda en una pestaña junto a otras diez y comprueba si todavía la distingues. Si no, simplifica más.
- Dale un fondo sólido al ícono táctil de Apple. Las zonas transparentes pueden verse de forma inesperada en la pantalla de inicio.
Usando Favicons con una tienda Jumpseller
Los Favicons son realmente fáciles de crear, de hecho, ni siquiera se necesita un diseñador para hacerlos.
El ícono de la pestaña del navegador se muestra a 16x16 píxeles, pero es mejor subir una imagen cuadrada más grande para que tu favicon se vea nítido en pantallas de alta resolución y en los resultados de búsqueda.
Para crear/generar tu favicon, te recomendamos utilizar alguno de los siguientes recursos:
Ahora que tienes tu favicon, puedes subirlo desde Configuración > Marca en tu panel de administración, donde encontrarás la opción de favicon junto a tu logo y tu color principal. Nuestra guía de personalización de marca explica cada opción de esa página.
Algunos temas también incluyen un campo para el favicon en sus opciones. Para encontrarlo, ve a la sección de Theme Options debajo de Themes.
Una vez que estés ahí, simplemente haz clic en el botón de cargar favicon que está resaltado en la imagen a continuación (por favor, ten en cuenta que esta opción puede estar en una subsección o submenú distinto en diferentes temas).
Después de que lo hayas cargado, espera unos segundos y visita la página de tu tienda en una nueva pestaña de tu navegador para observar los resultados. Los navegadores guardan los favicons en caché durante mucho tiempo, así que si todavía ves el ícono anterior, prueba con una ventana privada o borra la caché. Google también necesita volver a rastrear tu sitio antes de mostrar el nuevo favicon en los resultados.
Si quieres más ideas para darle una imagen coherente a tu tienda, lee nuestra guía sobre branding y posicionamiento de tu empresa.
Si tienes algún problema al respecto, estaremos encantados de ayudarte, solo contáctanos.
