Contenido 14 secciones
- ¿Qué son los ajustes de logo y favicon?
- ¿Por qué son tan importantes el logo y el favicon?
- ¿Cómo se sube el logo en Faprika?
- ¿Qué es el lazy logo y por qué se sube?
- ¿Qué es el favicon y cómo se sube en Faprika?
- ¿Qué hacer si el logo no cambia? La trampa de la caché
- ¿Cómo deben ser el logo y el favicon en el móvil?
- Coherencia de marca: ¿el logo es el mismo en todas partes?
- ¿Influyen el logo y el favicon en la velocidad?
- Errores más comunes en los ajustes de logo y favicon
- Lista de control de logo y favicon
- ¿Cuándo conviene revisar de nuevo el logo y el favicon?
- Gestión de logo y favicon con Faprika
- Preguntas frecuentes
El cliente llega a su sitio desde un anuncio, una búsqueda o la recomendación de un amigo y, en los primeros segundos, antes que a los productos, mira otra cosa: ¿es este un lugar de confianza? Entre los pequeños detalles que dan esa sensación, el logo es de los primeros. Un logo borroso, torcido o con un tamaño distinto en cada página hace que la tienda parezca descuidada, por buenos que sean los productos. El favicon, el pequeño icono de la pestaña, es lo único que le recuerda al visitante cuando navega entre pestañas; si falta, el navegador muestra un icono de página en blanco.
En esta guía tratamos los ajustes de logo y favicon en el comercio electrónico en dos niveles. El primero es lo que realmente se hace en el panel de Faprika: el logo, el lazy logo y el favicon se suben desde la pantalla Configuración > Ajustes > Ajustes generales; los tamaños recomendados, sus múltiplos y el aviso sobre la caché se explican como en las páginas de formación. El segundo son los principios más allá del panel: coherencia de marca, legibilidad en el móvil, diseño de un icono sencillo y velocidad. También hay dos pequeñas herramientas: una calculadora que compara las medidas de logo y favicon que piensa subir con la proporción recomendada, y una lista de control de ocho puntos. Para la velocidad y la calidad de las imágenes de producto existe aparte el artículo sobre optimización de imágenes de producto; aquí nos centramos solo en las imágenes de marca.
¿Qué son los ajustes de logo y favicon?
Los ajustes de logo y favicon determinan de qué archivo, con qué tamaño y en qué zonas se muestran las imágenes de marca de su tienda de comercio electrónico. El logo es la marca que aparece en la parte superior de la página, el lazy logo es el logo de reserva que se ve mientras se cargan las fotos de producto y el favicon es el pequeño icono de la pestaña del navegador.
En Faprika los tres se gestionan desde la misma pantalla: Configuración > Ajustes > Ajustes generales. Cada uno tiene su propio campo «Subir»; se elige la imagen y se pulsa Guardar. La tabla siguiente resume la diferencia entre las tres imágenes.
| Imagen | ¿Dónde aparece? | Tamaño recomendado | ¿Dónde se sube en Faprika? |
|---|---|---|---|
| Logo | Esquina superior izquierda de la página de inicio, las categorías y el detalle de producto | 135×35 y múltiplos | Ajustes generales, Subir en el campo Logo |
| Logo de carga diferida | Al abrir la página, en el fondo de los lienzos de producto hasta que se cargan las fotos | La formación no indica una medida aparte | Ajustes generales, Subir bajo Lazy Logo |
| Favicon | Parte izquierda de la pestaña del navegador | 16×16 y múltiplos (como 32, 64), extensión .ico | Ajustes generales, Subir junto a Favicon |
¿Por qué son tan importantes el logo y el favicon?
El logo y el favicon importan porque el cliente suele decidir si confía en una tienda antes de mirar los productos, y en esa decisión la coherencia visual es determinante. Si la misma marca se ve igual en todas partes, se percibe como profesional; si se ve distinta en cada sitio, genera dudas.
Podemos resumir el efecto en tres puntos.
- Confianza y reconocimiento. Cuando el cliente le ve en un anuncio, en el correo electrónico y en el sitio, debe ver la misma marca. La coherencia es la primera condición del reconocimiento.
- Facilidad para volver. Cuando un cliente abre varias pestañas para comparar productos, los títulos de las pestañas se acortan y solo queda el favicon. El icono correcto le facilita volver a su pestaña.
- Velocidad percibida. El lazy logo evita que el lienzo quede vacío mientras se cargan las fotos de producto. La página se ve llena y el cliente nota menos la espera. Para el tema general de la velocidad, consulte el artículo por qué importa la velocidad del sitio en el comercio electrónico.
Ninguno de estos efectos determina por sí solo la venta, pero todos apoyan o debilitan la decisión de un cliente que ha llegado a la página de producto. Además, su coste es bajo: se configura bien una vez y funciona durante años.
¿Cómo se sube el logo en Faprika?
En Faprika, el logo se sube desde la ruta Configuración > Ajustes > Ajustes generales del panel. En la pantalla que se abre, se elige la imagen con el campo Subir junto a la palabra Logo y se guarda. En el tema de Faprika, el logo se sitúa en la parte superior izquierda de la página de inicio, las categorías y el detalle de producto.
Tamaño de logo recomendado
El tamaño de logo recomendado es 135×35 y sus múltiplos. Si sube un múltiplo, puede ajustar la medida con los campos de ancho máximo y alto máximo del logo manteniendo la proporción. Es decir, puede subir un archivo grande preparado con la proporción 135×35 y limitar el espacio que ocupará en la página con esos dos campos.
La conclusión práctica es esta: preparar el logo con la proporción 135×35, uno o varios múltiplos más grande, hace que se vea nítido en pantalla y encaje bien en la zona superior izquierda. Un archivo que deforma la proporción puede verse apretado o aplastado aunque se cambien los campos de medida. La herramienta siguiente le permite comprobar la medida de su propio archivo respecto a esta proporción.
Qué tener en cuenta al preparar el logo
- Elija la proporción desde el principio. En lugar de recortar el archivo después, diséñelo en un área de trabajo con proporción 135×35.
- Deje margen, pero sin exagerar. El espacio vacío innecesario alrededor del logo lo hace parecer más pequeño de lo que es en la esquina superior izquierda.
- Piense en el fondo. El logo debe leerse sobre el color de fondo en el que vaya a estar. Un archivo con fondo transparente facilita adaptarse a distintos fondos.
- No haga el archivo más pesado de lo necesario. El logo se carga en cada página; mantener su tamaño pequeño favorece la velocidad.
Compruebe los datos del logo con la herramienta siguiente
La herramienta compara el ancho y el alto del logo con la proporción recomendada de 135×35 y muestra cuántas veces la supera y la altura esperada. También comprueba si el lado del favicon es múltiplo de 16. Las medidas que introduzca pertenecen a su archivo; la herramienta solo compara la proporción y no decide sobre la calidad ni el formato.
| Imagen | Medida recomendada | Múltiplos | Nota |
|---|---|---|---|
| Logo | 135×35 | Tamaños ampliados con la misma proporción | La medida se ajusta con los campos de ancho y alto máximos sin deformar la proporción |
| Favicon | 16×16 | Múltiplos de 16 como 32 y 64 | La extensión del archivo debe ser .ico |
¿Qué es el lazy logo y por qué se sube?
El lazy logo es el logo que aparece en el fondo de los lienzos de producto mientras se cargan las fotos de los productos al abrir su página. Cuando se carga la foto, la imagen del producto ocupa el lugar del logo; en ese intervalo, el lienzo muestra su marca en lugar de una caja vacía.
Su nombre no significa «lento» ni «perezoso»; «lazy» viene aquí de la lógica de cargar las imágenes a medida que se necesitan. En una página de categoría con una lista larga de productos, las fotos no llegan a la vez, sino que van apareciendo por orden. Lo que verá el cliente en pantalla en ese breve instante en que la foto no ha llegado lo determina el lazy logo: un hueco gris o su marca.
En Faprika, el lazy logo se elige también en la pantalla Configuración > Ajustes > Ajustes generales, con el botón Subir bajo el texto Lazy Logo, y se completa con Guardar. Dos principios sobre un buen lazy logo le serán útiles:
- Que sea sencillo. Ocupa el lugar de la foto de producto durante poco tiempo; una marca limpia se ve mejor que un dibujo detallado.
- Que sea coherente con el logo principal. Si los dos logos son muy distintos, el cliente siente que ve dos marcas diferentes en la página.
¿Qué es el favicon y cómo se sube en Faprika?
El favicon es el icono que se encuentra a la izquierda de la pestaña en su navegador. Cuando el visitante abre muchas pestañas, los títulos se acortan y la forma más fácil de distinguirlas es el icono; un favicon ausente hace que su sitio parezca una página en blanco cualquiera.
En Faprika, el favicon se elige en la pantalla Configuración > Ajustes > Ajustes generales con el botón Subir junto a Favicon y se pulsa Guardar; en poco tiempo se añade a su sitio. Lo que destaca la formación es la medida y el formato: la imagen debe subirse con dimensiones de 16×16 o múltiplos de 16 (como 32, 64) y con extensión .ico.
¿Cómo diseñar un buen favicon?
El favicon suele aparecer en un cuadro cuyo lado no pasa de unas decenas de píxeles. Por eso no hace falta una versión reducida de su logo, sino un icono sencillo derivado de él.
- Evite el texto. Un nombre de marca largo no se lee a este tamaño; basta con la inicial de la marca o la forma más distintiva del logo.
- Use uno o dos colores. A medida que aumentan los detalles, el icono se vuelve borroso.
- Mantenga el contraste alto. La pestaña del navegador puede ser clara u oscura; el icono debe distinguirse en ambos fondos.
- Conserve el color principal de su logo. Por coherencia, el favicon debe salir del mundo cromático del logo.
| Función | Buen favicon | Favicon deficiente |
|---|---|---|
| Contenido | Inicial o forma sencilla | Texto de logo largo reducido |
| Color | Uno o dos colores marcados | Dibujo multicolor y detallado |
| Indicador | 16×16 o múltiplo de 16 | Medida arbitraria |
| Formato | .ico | Archivo con otra extensión |
¿Qué hacer si el logo no cambia? La trampa de la caché
Si después de subir el logotipo o el favicon sigue apareciendo la versión anterior, casi siempre la carga no ha fallado: el navegador todavía conserva el archivo antiguo. En Faprika los logotipos se guardan en una cookie para que no se vuelvan a cargar en cada apertura de página; por eso verá el cambio de su logotipo cuando borre las cookies y la caché.
La advertencia expresa de la guía es esta: si al cambiar su logotipo actual no se actualiza, no lo suba una y otra vez. Volver a subirlo no resuelve el problema y solo hace perder tiempo. El orden correcto es el siguiente:
- Suba el logotipo, el logotipo lazy o el favicon y pulse Guardar.
- Borre las cookies y la caché de su navegador.
- Vuelva a abrir el sitio y compruebe el cambio.
- Si sigue viéndose la versión anterior, pruebe con otro navegador o en una ventana de incógnito.
El comportamiento de la caché tiene también un efecto secundario sobre sus clientes: cuando cambia el logotipo, algunos visitantes pueden seguir viendo el anterior durante un tiempo. Si está realizando una renovación de marca importante, tenga en cuenta este período de transición y no deje el cambio justo antes de un día clave de campaña. Para conocer el efecto de las cookies en la salud del sitio, el artículo çerezler e-ticaret sitenizin sağlığı için iyi mi kötü mü ofrece un marco general.
Le recomendamos leer¿Cómo borrar la caché y las cookies del navegador?¿Cómo debe verse el logotipo y el favicon en el móvil?
En el móvil, el logotipo debe verse sin recortes y con un tamaño legible en una pantalla estrecha; el favicon, en cambio, casi nunca aparece en los navegadores móviles, así que la mayor responsabilidad recae en el logotipo. Cuando la mayoría de los visitantes llega desde el teléfono, cómo se ve el logotipo en el móvil importa más que su aspecto en el escritorio.
- Ábralo en su propio teléfono. Compruebe que el logotipo no ocupa toda la pantalla, que no empuja los botones del menú y que queda bien colocado en la esquina superior izquierda.
- Cuidado con los logotipos horizontales y alargados. Un logotipo muy ancho se reduce en el móvil y su texto deja de leerse. Si es necesario, prepare una versión más compacta.
- Use los campos de ancho y alto máximos. Como en Faprika la medida puede limitarse con estos dos campos, puede corregir un logotipo que se desborda en el móvil sin volver a subirlo.
- No reduzca el área de toque. El logotipo suele ser un enlace a la página de inicio; si su entorno está saturado, aumentan los toques equivocados.
Para conocer los principios generales de la adaptación al móvil, puede consultar el artículo e-ticaret sitesinde mobil uyumun önemi . Como el favicon se ve poco en los teléfonos, su función principal es representar su marca en la pestaña del escritorio y en los marcadores del navegador.
Coherencia de marca: ¿el logotipo es igual en todas partes?
La coherencia de marca consiste en que el mismo logotipo, los mismos colores y el mismo símbolo aparezcan como una única identidad en el sitio, el correo electrónico, la factura y el paquete, la publicidad y las redes sociales. El logotipo que sube desde el panel es solo una parte de esa identidad.
En la práctica, estas comprobaciones resultan útiles:
- Evite el caos de versiones. Si las versiones antigua y nueva del logotipo circulan por carpetas distintas, alguien subirá sin falta la antigua. Mantenga una única carpeta de «logotipo vigente».
- Fije los colores. El logotipo, el logotipo lazy y el favicon deben salir del mismo universo de color.
- Revise también otras zonas del sitio. Si las páginas de marcas, las plantillas de correo y las facturas impresas usan el logotipo, actualícelas también. Para las páginas de marca resulta útil el artículo cómo crear una página de marca.
- Cuando cambie el logotipo, cambie todo a la vez. Renovar el logotipo y dejar el favicon antiguo hace que en la pestaña del navegador aparezca una marca distinta.
¿Afectan el logotipo y el favicon a la velocidad?
Sí, pueden afectarla: el logotipo es una imagen que se carga en todas las páginas, y un archivo más pesado de lo necesario ralentiza cada apertura de página. El favicon es un archivo pequeño, pero se solicita en cada página; basta con mantenerlo sencillo y ligero.
Los principios prácticos en cuanto a velocidad son estos:
- No suba el logotipo mucho más grande que el área en que se usa. Los múltiplos del tamaño recomendado bastan para una buena nitidez en pantalla; un archivo mucho mayor solo añade peso.
- Libere el archivo de detalles innecesarios. Las sombras densas y los degradados aumentan el tamaño del archivo.
- Aproveche la ventaja del logotipo guardado en cookie. Faprika guarda los logotipos en cookie y evita que se vuelvan a cargar en cada apertura de página; no cambie el logotipo constantemente para romper este comportamiento.
- Mantenga ligero el logotipo lazy. Como es lo primero que se ve al abrirse la página, cuanto más sencillo sea, más rápido parecerá.
Estos principios son una pequeña parte de la gestión general de la velocidad. El artículo sobre la optimización de imágenes de producto aborda elementos mayores, como las imágenes de producto y el peso de la página; el logotipo y el favicon son los elementos «pequeños pero presentes en todas las páginas».
Errores más frecuentes en la configuración del logotipo y el favicon
Los errores más frecuentes en la configuración del logotipo y el favicon son alterar la proporción, elegir mal el formato del favicon, no ver el cambio por la caché y volver a subirlo una y otra vez, y gestionar las tres imágenes de forma independiente. La mayoría no proviene del ajuste en sí, sino de no probar el resultado en distintos dispositivos.
Subir un archivo que altera la proporción
Un logotipo cuadrado o demasiado alto se reduce en el espacio reservado para la proporción 135×35 y se ve apretado. Prepare el archivo desde el principio con la proporción recomendada.
Subir el favicon en un formato distinto de .ico
La guía exige la extensión .ico. En lugar de pelearse con un archivo de otra extensión, prepare el icono desde el principio en el formato correcto.
Reducir el logotipo largo y ponerlo como favicon
Un logotipo con texto no se lee en un área de 16×16 o 32×32. Utilice una inicial o un símbolo sencillo.
Volver a subirlo constantemente porque «no cambió»
Casi siempre el problema no es la carga sino la caché. Primero borre las cookies y la caché.
No subir nunca el logotipo lazy
Un logotipo lazy sin subir significa que los lienzos de producto quedan vacíos hasta que llega la fotografía. Basta con subirlo una vez y olvidarse.
No probar en el móvil
Un logotipo que se ve bien en el escritorio puede desbordarse en el teléfono. Después de cada cambio, compruébelo desde el teléfono.
Gestionar las tres imágenes de forma independiente
Se renovó el logotipo y el favicon se quedó antiguo. Se rompe la unidad de marca y puede tardar meses en notarse.
Okumanızı öneririzE-Ticaret Sitesinde Mobil Uyumun ÖnemiLista de comprobación del logotipo y el favicon
La lista de comprobación del logotipo y el favicon reúne ocho puntos que las imágenes de marca deben cumplir antes de publicarse y tras cada cambio de marca. La imagen y la herramienta siguientes son presentaciones distintas de los mismos puntos; la tabla ofrece la misma información en formato de texto.
| Campo | Comprobación | ¿Hecho? |
|---|---|---|
| Proporción del logotipo | Preparado y subido según la proporción 135×35 | Sí / No |
| Vista móvil | El logotipo no se recorta en el teléfono y se lee | Sí / No |
| Logo de carga diferida | Subido y coherente con el logotipo principal | Sí / No |
| Formato del favicon | Extensión .ico, medida múltiplo de 16 | Sí / No |
| Pestaña | El favicon se ve en la pestaña del navegador | Sí / No |
| Caché | Probado tras borrar cookies y caché | Sí / No |
| Coherencia de marca | El logotipo es igual en el correo electrónico, la factura y otros canales | Sí / No |
| Revisión periódica | Las imágenes de marca se revisan a intervalos regulares | Sí / No |
¿Cuándo conviene revisar de nuevo el logotipo y el favicon?
Los ajustes del logotipo y el favicon deben revisarse cuando cambie su identidad de marca, cuando se renueve el tema o la combinación de colores, antes de una campaña o cuando reciba comentarios de clientes como «el logotipo se ve borroso». En lugar de considerarlo una carga puntual, trátelo como un ajuste que se actualiza junto con su marca.
Antes de una gran campaña o de un período de ventas intenso basta con una revisión rápida: abra el logotipo, el logotipo lazy y el favicon tanto en el escritorio como en el teléfono. Corregir un error antes de que empiece la campaña es mucho más cómodo que hacerlo mientras llega el tráfico. Las imágenes de marca también deben ser coherentes con la calidad general de las páginas de producto; para ello, considere conjuntamente los principios del artículo sobre la optimización de imágenes de producto.
Gestión del logotipo y el favicon con Faprika
En Faprika, el logotipo, el logotipo lazy y el favicon se reúnen en una sola pantalla: Configuración > Ajustes > Ajustes generales. Hay campos de subida independientes para las tres imágenes y ajustes de ancho y alto máximos para el logotipo; las medidas recomendadas y la advertencia sobre la caché se explican en detalle en las páginas de la guía. Como puede subir y comprobar usted mismo las imágenes de marca, no tiene que esperar la ayuda de un diseñador o de un desarrollador.
Para ver todo lo que puede hacer en una tienda creada con Faprika y qué posibilidades incluye cada plan, puede consultar nuestros planes o solicitar una demo.
Preguntas frecuentes
¿Cómo configurar el logotipo y el favicon en una tienda de comercio electrónico?
En Faprika, el logo, el lazy logo y el favicon se suben desde la ruta Configuración, Ajustes, Ajustes generales del panel. Cada uno tiene su propio campo Subir; se elige la imagen y se pulsa Guardar. Se recomienda 135×35 y múltiplos para el logo, y 16×16 y múltiplos con extensión .ico para el favicon.
¿Qué es Favicon?
El favicon es el pequeño icono que aparece a la izquierda de la pestaña del navegador. Facilita distinguir su sitio cuando hay muchas pestañas abiertas; debe ser sencillo, de alto contraste y acorde con su marca.
¿Qué tamaño debe tener el logo?
El tamaño de logo recomendado en Faprika es 135×35 y sus múltiplos. Si sube un múltiplo, puede ajustar la medida con los campos de ancho máximo y alto máximo del logo, manteniendo la proporción.
¿Qué es el lazy logo?
El lazy logo es el logo que aparece en el fondo de los lienzos de producto mientras se cargan las fotos al abrir la página. Evita que el lienzo quede vacío hasta que llegue la foto. Se sube desde el campo Lazy Logo de la pantalla Configuración, Ajustes, Ajustes generales.
He subido el logo pero se sigue viendo el antiguo, ¿qué hago?
Los logos se guardan en las cookies para que no se recarguen en cada apertura de página. Por eso, en lugar de subirlo una y otra vez, borre las cookies y la caché de su navegador; tras la primera carga verá su nuevo logo.
¿En qué formato y tamaño debe estar el favicon?
El favicon debe medir 16×16 o un múltiplo de 16 (como 32 o 64) y tener extensión .ico. Un icono sencillo que se lea en tamaño pequeño funciona mejor que un texto largo de logo.
