Logo para sitio web: tamaños, formatos y ubicaciones que prever
Guía práctica para preparar un logo web: SVG, PNG, favicon, header, footer, móvil, pantallas Retina y variantes responsivas.
Un logo para sitio web no es solo un archivo colocado en la esquina superior izquierda de una página. Es un pequeño sistema de versiones, formatos y ubicaciones que debe seguir legible en un header, un menú móvil, un favicon, un footer, una página de pago, emails transaccionales y a veces un panel de cliente. Muchas marcas preparan un logo principal atractivo y descubren durante la integración que es demasiado ancho, demasiado fino, demasiado pesado o imposible de reconocer en pequeño.
La pregunta útil no es “¿cuál es el único tamaño correcto?”. Es “¿qué usos web debe cubrir este logo sin perder nitidez, velocidad ni coherencia?”. Los estándares actuales favorecen imágenes adaptativas, pantallas de alta densidad y diseños que cambian según el ancho disponible. Un logo serio debe seguir esa lógica responsive en vez de tratarse como una imagen fija.
Para esta guía revisamos fuentes técnicas actuales: documentación de MDN sobre imágenes responsivas y metadatos de página, indicaciones de Google Search sobre favicons y prácticas habituales de rendimiento para activos de marca. El objetivo es convertir esas restricciones en una checklist práctica para una pyme, freelance o equipo de marketing que prepara una nueva identidad.
1. Pensar en sistema, no en archivo único
Un sitio web muestra el logo en contextos muy distintos. En la home puede estar junto a una navegación completa. En móvil vive dentro de una barra estrecha. En la pestaña del navegador se vuelve un favicon diminuto. En un email debe resistir las restricciones del cliente de correo. En un panel de cliente puede convivir con iconos, badges y estados de interfaz. Un único export no responde limpiamente a cada situación.
Empieza definiendo una familia de versiones: logo horizontal principal, versión compacta, símbolo o monograma si la marca lo tiene, versión clara, versión oscura, favicon cuadrado y respaldos raster. Esto conecta con nuestra guía del logo responsive: cuando se multiplican los canales, la identidad necesita variantes controladas, no redimensiones improvisadas por desarrollo al final del proyecto.
Un buen sistema también define espacio de seguridad. El logo no debe tocar el borde del header ni chocar con elementos del menú. Incluso en pequeño necesita aire. Parece una regla estética, pero mejora el reconocimiento: un logo rodeado de demasiados enlaces, botones e iconos se convierte en una señal más dentro del ruido visual.
2. Header: reconocimiento inmediato
El header suele ser la ubicación más visible. En muchas interfaces, el logo actúa como ancla de marca y enlace hacia la home. Debe reconocerse en una fracción de segundo. Para un logo horizontal, el ancho importa: demasiado grande aplasta la navegación; demasiado pequeño vuelve frágil la tipografía. Muchos sitios se benefician de una versión de header ligeramente simplificada, especialmente cuando el nombre es largo.
La altura del header importa tanto como el ancho del archivo. Un logo alto puede forzar una barra pesada y reducir el espacio útil. Un wordmark muy plano puede resultar difícil de leer en móvil. La respuesta suele ser preparar dos composiciones: una completa para escritorio y otra compacta para anchos reducidos.
El contraste es decisivo. Si el header se vuelve transparente sobre una imagen hero, el logo necesita versión clara y versión oscura. No conviene depender de una sombra automática o de un filtro CSS aproximado para salvar la legibilidad. Un logo web fiable se diseña para los fondos reales del sitio, con combinaciones de color validadas antes de producción.
3. Móvil: versión corta y espacio limitado
En móvil, el logo comparte espacio con menú burger, a veces botón de llamada, selector de idioma o acceso de cuenta. El espacio escasea. Una identidad detallada, con baseline o símbolo complejo, pierde impacto rápido. Debe existir una versión corta: iniciales, símbolo, wordmark ajustado o variante sin lema.
Piensa también en el header fijo durante el scroll. Cuando la barra queda visible, el logo debe ser bastante discreto para no robar atención al contenido, pero suficientemente identificable para tranquilizar. Una altura excesiva reduce la lectura. Una presencia mínima vuelve anónima la marca. Las pruebas en teléfonos reales son indispensables porque una vista desktop reducida no reproduce siempre la densidad visual móvil.
El móvil revela debilidades de dibujo. Trazos muy finos, letras demasiado juntas o un pictograma con muchos detalles pueden desaparecer. Si el logo fue concebido solo para una maqueta grande, necesita simplificación. No es traicionar la identidad; es adaptarla a los usos reales.
4. Favicon e icono de acceso
El favicon es el embajador más pequeño del sitio. Aparece en pestañas del navegador, favoritos, algunos contextos de búsqueda y accesos guardados. Google recomienda un icono cuadrado y múltiplos de 48 píxeles para usos de búsqueda. MDN también muestra por qué pueden ser útiles distintos iconos para dispositivos Apple y accesos directos. En la práctica, un favicon debe pensarse aparte del logo principal.
Un wordmark completo rara vez funciona como favicon. A 16 o 32 píxeles, las letras dejan de leerse. Elige un signo simple, una inicial redibujada, una forma distintiva o un símbolo extremadamente simplificado. El error clásico consiste en reducir el logo completo dentro de un cuadrado: puede ser nítido técnicamente, pero carece de sentido visual.
Prueba el favicon sobre fondo claro, fondo oscuro y pestañas llenas. No necesita contar la historia completa de la marca; necesita crear un marcador estable. Si tu identidad no tiene ningún elemento que funcione en pequeño, es información útil para el brief: quizá falta una variante tipo icono.
5. SVG, PNG, WebP: qué entregar
Para web, SVG suele ser el formato prioritario para un logo vectorial. Permanece nítido en cada pantalla, puede pesar poco y se integra bien en una interfaz moderna. Pero el SVG debe estar limpio: sin capas inútiles, sin texto sin vectorizar, sin metadatos excesivos, sin efectos que se rendericen de forma imprevisible. Un vector mal exportado puede ser más pesado o frágil que un PNG.
Los PNG siguen siendo necesarios. Sirven para emails, plataformas externas, documentos compartidos y casos en los que SVG no se acepta. Prepara PNG transparentes en varios tamaños útiles, idealmente con versiones 2x para pantallas de alta densidad. WebP puede ser excelente para imágenes, pero no siempre es el mejor formato de entrega para un logo que debe circular fuera del sitio.
Lo importante es entregar un kit coherente, como explicamos en la guía del kit de entrega de logo. El cliente no debe recibir quince archivos con nombres aleatorios. Debe saber qué versión va en header, favicon, fondo oscuro, email y perfil social. Nombres de archivo, tamaños y reglas de uso forman parte de la calidad del diseño.
6. Retina, peso y rendimiento
Las pantallas de alta densidad hacen que los logos raster se vean borrosos cuando los exports son demasiado pequeños. Un PNG mostrado a 160 píxeles de ancho puede necesitar una fuente de 320 píxeles o más según el contexto. Las imágenes responsivas usan mecanismos como srcset y sizes, documentados por MDN, para ayudar al navegador a elegir la fuente correcta. Aunque un logo suele ser más simple que una foto, la lógica es similar: ofrecer nitidez sin desperdiciar ancho de banda.
El rendimiento importa. Un logo situado al inicio de una página carga pronto. Si pesa demasiado, perjudica la velocidad percibida. Un SVG limpio o un PNG optimizado marca diferencia. Evita exports gigantes de varios megas para un activo mostrado en pequeño. Evita también montajes complejos como imagen de fondo si un elemento img simple o un SVG inline basta.
El equilibrio correcto consiste en preparar pocos archivos, pero bien elegidos: vector principal, variantes raster optimizadas, favicon e iconos de acceso. La nitidez debe verse, pero el usuario no debe pagarla con carga innecesaria.
7. Footer, fondos oscuros y variantes
El footer suele ser más oscuro, más denso y menos prioritario que el header. El logo funciona allí como firma. Puede ser más pequeño, monocromo o invertido siempre que mantenga coherencia con la marca. Si el sitio usa un footer azul noche, gris oscuro o negro, prepara una versión clara validada en lugar de colocar el logo de color sin control.
Las páginas especiales también imponen variantes: pago, cuenta de cliente, landing publicitaria, página de error, documentación y emails de confirmación. Cada una puede tener restricciones de ancho y color. Una marca preparada ahorra tiempo porque nadie tiene que reinventar el logo en cada integración.
Las ubicaciones deben seguir constantes. Si el logo cambia de tamaño, margen o contraste en cada página, la marca parece inestable. La coherencia no impide la adaptación; define los límites dentro de los cuales la adaptación sigue reconocible.
8. Checklist de brief
Antes de pedir o aprobar un logo para sitio web, lista ubicaciones reales: header escritorio, header móvil, footer, favicon, acceso móvil, email, página de pago, cuenta cliente, perfiles sociales y documentos PDF. Para cada ubicación, anota fondo, tamaño aproximado y restricción principal. Este mapa simple evita muchas rondas de revisión.
Luego solicita formatos: SVG vectorial limpio, PNG transparente en varios tamaños, versión clara, versión oscura, favicon cuadrado y quizá versión solo símbolo. Define también usos prohibidos: no estirar, no recolorear sin regla, no usar con contraste insuficiente, no mantener lema por debajo de cierto tamaño.
Wilogo puede ayudarte a aclarar ese brief desde el principio. Cuanto más explícitas sean las restricciones web, más fácil será comparar rutas de logo. Una identidad lograda no solo se ve bien en una maqueta; funciona en los lugares reales donde la verá la gente.
¿Necesitas un logo listo para tu sitio web?
Describe tus canales, fondos, restricciones de header y necesidades de favicon. Wilogo convierte ese brief en rutas de logo pensadas para usos web reales.
9. Fuentes útiles
Fuentes revisadas: MDN sobre imágenes responsivas en HTML, MDN sobre metadatos y favicons, además de la documentación de Google Search sobre favicons en resultados de búsqueda.
FAQ
¿Qué tamaño debe tener un logo para sitio web?
No existe un tamaño único. Conviene preparar un SVG vectorial cuando sea posible, PNG 2x o 3x como respaldo, un favicon cuadrado y una versión simplificada para espacios pequeños. La identidad debe seguir legible desde un icono mínimo hasta un header grande.
¿El SVG es siempre el mejor formato?
Para un logo vectorial, SVG suele ser el formato web más útil porque permanece nítido y puede pesar poco. Aun así, conserva PNG para emails, herramientas externas y canales que no aceptan SVG.
¿Header y footer deben usar el mismo logo?
No necesariamente. El header exige reconocimiento inmediato, mientras que el footer puede usar una versión más discreta o invertida. Lo importante es mantener identidad, contraste y reglas claras.
¿Cómo probar un logo antes del lanzamiento?
Revísalo en móvil, escritorio, fondo claro, fondo oscuro, favicon, menú fijo, pantallas Retina y conexiones lentas. Si falla en un contexto clave, crea una variante específica.
