Qué tamaño debe tener el logo de tu web: altura de la cabecera en píxeles CSS, archivos retina 2x, SVG o PNG, además de los tamaños de favicon, Apple touch icon, imagen para compartir y logo para Google.
No existe un tamaño de logo obligatorio. La mayoría de las cabeceras muestran el logo con unos 32 a 60 píxeles CSS de alto en escritorio y algo menos en móvil, y el ancho depende de la forma del logo. Usa un SVG si puedes; si no, exporta un PNG al doble del tamaño de visualización para que se vea nítido en pantallas de alta densidad.
Tamaños de logo e iconos de un vistazo (a octubre de 2026)
Las dudas sobre el tamaño del logo suelen surgir cuando, tras publicar el sitio, el logo se ve borroso o diminuto. La solución es pensar en dos números: el tamaño al que se muestra, medido en píxeles CSS, y el tamaño del archivo, que debe ser mayor. Sube tu propio logo abajo para ver ambos, en una cabecera de escritorio y otra de móvil, sin que nada salga de tu ordenador.
Ningún estándar lo fija. Como guía aproximada, la mayoría de las cabeceras muestran el logo con unos 32 a 60 píxeles CSS de alto en escritorio y unos 28 a 44 en móvil. Un logotipo de texto alargado puede ir más bajo que una marca cuadrada compacta. Usa la vista previa de arriba para valorar el tuyo.
SVG es un formato vectorial, así que se ve nítido a cualquier tamaño y suele pesar muy poco. Usa PNG cuando el logo tenga detalle fotográfico o tu plataforma no acepte SVG, y expórtalo al doble del tamaño de visualización.
Las pantallas de alta densidad usan más de un píxel de dispositivo por píxel CSS. Un logo mostrado a 40 px de alto se ve nítido en una pantalla 2x cuando el archivo mide al menos 80 px de alto. Con el atributo srcset de img puedes ofrecer un archivo 1x y otro 2x y dejar que el navegador elija.
Google indica que un favicon debe ser cuadrado y de al menos 8x8 px, y recomienda uno mayor de 48x48 px. Nuestra guía de tamaños de favicon recoge los archivos habituales y el HTML para enlazarlos.
Las directrices de fotos de Google para Business Profile indican JPG o PNG, de 10 KB a 5 MB, 720 x 720 px recomendado y 250 x 250 px como mínimo. La página de ayuda no da medidas específicas para el logo, así que un logo cuadrado de 720 x 720 px es una opción segura.
La altura viene del CSS; el ancho sigue la forma del logo. Los atributos width y height reservan el espacio mientras carga.
logo.png mide 44 px de alto y [email protected] mide 88 px. El navegador elige el archivo 2x en pantallas de alta densidad.
Un favicon, un Apple touch icon y una imagen para compartir, cada uno hecho a partir de la versión cuadrada de tu logo.
El archivo de tu logo
Se muestra un logo de ejemplo hasta que elijas un archivo.
Altura del logo en la cabecera: {v} px
Cabecera de escritorio
Menú
Informe
Tamaño del archivo: {w} x {h} px.
SVG se escala sin perder nitidez a cualquier altura.
Para un resultado nítido en pantallas 2x a esta altura, el archivo debe medir al menos {v} px de alto.
Tu archivo es lo bastante grande para esta altura en pantallas 2x.
Tu archivo es más pequeño, así que puede verse blando en pantallas de alta densidad.
CSS para esta altura
Tu archivo solo lo lee tu navegador y nunca se sube.
Logo de ejemplo
Tu logo
Empieza gratis · Sin tarjeta de crédito