Logo borroso en Shopify o WordPress: corrige tamaño y archivo
Diagnostica un logo web borroso: dimensiones originales, miniaturas del tema, pantallas de alta densidad y exportaciones SVG o PNG adecuadas para cada tamaño.
Respuesta rápida
Compara los píxeles reales del logo con su tamaño visible. Un raster de 120 px ampliado a 240 píxeles CSS se verá suave. Usa un SVG limpio si plataforma y tema lo admiten de forma segura, o exporta un PNG suficientemente grande desde un maestro vectorial. Comprueba también si el tema sirve una miniatura menor.
Distingue el origen del problema
| Observación | Comprobar | Acción |
|---|---|---|
| Original borroso | Dimensiones de origen | Recuperar el original o vectorizar |
| Original nítido, cabecera suave | Archivo servido y anchura | Ajustar tamaños del tema |
| Ordenador correcto, móvil borroso | Densidad de pantalla | Más píxeles o SVG |
| Logo pequeño dentro de una caja | Márgenes vacíos | Ajustar el lienzo |
Los píxeles CSS no siempre corresponden a un único píxel de imagen. Un logo de 200 píxeles CSS en una pantalla 2× puede necesitar aproximadamente 400 píxeles de origen. Es un ejemplo práctico, no una razón para subir archivos enormes. Más píxeles aumentan el peso y no reparan una fuente que ya estaba borrosa.
Procedimiento de reparación
- Inspecciona la imagen que realmente carga la cabecera, no solo la biblioteca multimedia.
- Anota dimensiones naturales y anchura visible. Revisa por separado cabecera móvil y escritorio.
- Busca el archivo del diseñador. Si solo existe un raster plano, crea un maestro con Logo a vector.
- Exporta un formato aceptado por el tema. SVG a PNG sirve como alternativa raster; conserva transparencia si corresponde.
- Sustituye el recurso, limpia la caché pertinente y revisa la página publicada en una sesión nueva.
SVG sin desactivar la seguridad
Algunos sistemas restringen SVG porque puede contener contenido activo o externo. Utiliza el proceso de carga y limpieza que admite tu plataforma. No desactives protecciones generales solo para cargar un logo. Un PNG transparente del tamaño adecuado es una alternativa válida.
El optimizador SVG reduce marcado innecesario de un maestro limpio. No recupera detalles perdidos ni arregla letras deformadas. Comprueba visualmente el resultado después de cada transformación.
Lista para la web publicada
- Cabecera, menú móvil y pie usan el archivo correcto.
- Ninguna regla del tema deforma la proporción.
- Hay contraste sobre fondos claros y oscuros.
- La URL carga correctamente y las dimensiones evitan saltos de diseño.
- El texto pequeño sigue siendo legible a tamaño real.
Preguntas frecuentes
¿Cambiar el logo a 300 DPI mejora la web?
No por sí solo. El navegador coloca píxeles según el diseño. Importan más las dimensiones de origen y visualización que una etiqueta de resolución de impresión.
¿Siempre debo elegir SVG?
No. Funciona bien para logos limpios e iconos. PNG es práctico si el sitio rechaza SVG o el dibujo depende de detalle raster. Elige el formato seguro más sencillo que se mantenga nítido.