Elegir las dimensiones correctas del favicon es esencial para lograr un icono nítido y profesional en todos los dispositivos. Esta completa guía de tamaños de favicon cubre todas las dimensiones que necesitas en 2026—desde el clásico icono de pestaña del navegador de 16×16 hasta el icono PWA maskable de 512×512—además de los formatos y las mejores prácticas que mantienen tu marca nítida en todas las plataformas.
Por qué importa el tamaño del favicon
Los favicons se muestran en muchos tamaños en navegadores, sistemas operativos y pantallas de inicio. Un único archivo de origen no puede satisfacer todos los contextos, porque cada plataforma solicita una dimensión específica. Si proporcionas solo un tamaño, los navegadores lo ampliarán o reducirán—a menudo produciendo resultados borrosos o recortados que debilitan tu marca.
Proporcionar las dimensiones correctas del favicon para cada plataforma garantiza que la imagen se renderice a su resolución nativa, lo que significa bordes nítidos, colores precisos y transparencia fiable. Esta guía enumera todos los tamaños que vale la pena generar y explica dónde se usa cada uno para que puedas publicar un paquete completo con confianza.
Referencia completa de tamaños de favicon
La siguiente tabla enumera los tamaños de favicon que los sitios web modernos deberían incluir en 2026, el formato que usa cada uno y la plataforma que lo consume. Úsala como tu única referencia al preparar un paquete.
| Tamaño | Formato | Se usa para |
|---|---|---|
| 16×16 | ICO / PNG | Pestaña clásica del navegador, compatibilidad heredada |
| 32×32 | ICO / PNG | Pestaña estándar del navegador en pantallas retina |
| 48×48 | ICO | Barra de tareas de Windows, algunas vistas de marcadores |
| 64×64 | PNG | Barra de direcciones del navegador en pantallas de alta densidad de píxeles |
| 96×96 | PNG | Marcadores y accesos directos de escritorio |
| 120×120 | PNG | Pantallas de inicio de Android más antiguas |
| 152×152 | PNG | Icono táctil de iPad (heredado) |
| 167×167 | PNG | Icono táctil de iPad Pro |
| 180×180 | PNG | apple-touch-icon de iPhone (actual) |
| 192×192 | PNG | Pantalla de inicio de Android Chrome, PWA |
| 512×512 | PNG | Pantalla de inicio de PWA, icono maskable |
Los tamaños esenciales que hay que generar
Aunque la lista completa anterior es exhaustiva, un conjunto simplificado cubre a la gran mayoría de los usuarios. Nuestro generador de favicons produce este paquete esencial a partir de una sola carga:
- 16×16 y 32×32—los tamaños fundamentales para las pestañas del navegador de escritorio en pantallas estándar y retina.
- 48×48—incluido dentro del archivo ICO para la visualización en la barra de tareas de Windows y los marcadores heredados.
- 180×180—el apple-touch-icon requerido por iOS para los accesos directos de la pantalla de inicio.
- 192×192 y 512×512—los tamaños de Android y PWA declarados en tu manifiesto web.
Junto con una versión SVG para navegadores modernos, este conjunto cubre prácticamente todos los dispositivos que un visitante podría usar en 2026. No necesitas rastrear manualmente cada tamaño heredado—el generador los empaqueta por ti.
Comparación de formatos de favicon
El tamaño es solo la mitad de la ecuación; el formato determina la compatibilidad y el peso del archivo. La siguiente comparación resume los tres formatos que deberías incluir juntos:
| Formato | Resolución | Tamaño del archivo | Ideal para |
|---|---|---|---|
| ICO | Fijo (contenedor multiuso) | Pequeño a mediano | Navegadores heredados, respaldo /favicon.ico |
| PNG | Fijo (un tamaño por archivo) | Pequeño | Navegadores modernos, apple-touch-icon, Android |
| SVG | Vector (independiente de la resolución) | Diminuto | Safari, Chrome, iconos compatibles con el modo oscuro |
SVG es especialmente valioso en 2026 porque se escala perfectamente a cualquier densidad de píxeles y puede incluir consultas de medios que se adaptan automáticamente al modo oscuro. Nuestro generador produce un SVG automáticamente cuando subes una fuente vectorial, lo que lo convierte en el formato más preparado para el futuro de tu paquete.
Requisitos de tamaño específicos por plataforma
Navegadores de escritorio
Los navegadores de escritorio como Chrome, Firefox, Safari y Edge solicitan favicons de 16×16 y 32×32 píxeles. En pantallas retina, se usa la variante de 32×32 para la pestaña. El formato ICO puede incluir ambos tamaños en un solo archivo, por lo que publicar /favicon.ico sigue siendo una buena práctica incluso hoy: sirve como respaldo automático.
Apple iOS y iPadOS
Los dispositivos Apple ignoran el enlace de favicon estándar al añadir un sitio a la pantalla de inicio. En su lugar, buscan un PNG de 180×180 declarado con rel=”apple-touch-icon”. Sin este archivo, iOS usará una captura de pantalla de la página o un icono genérico, lo que se ve poco profesional y rompe la coherencia de marca en la plataforma móvil más popular.
Android y aplicaciones web progresivas
Android Chrome y los instaladores de PWA leen los iconos de un manifiesto de aplicación web. Los dos tamaños requeridos son 192×192 y 512×512. La variante de 512×512 también se usa para la pantalla de inicio de la PWA. Para los iconos enmascarables —aquellos que se adaptan a diferentes formas de iconos de Android— debes marcar el PNG de 512×512 como “purpose”:”maskable” en el manifiesto.
Mejores prácticas para el tamaño del favicon
Sigue estas mejores prácticas para mantener tu favicon nítido en todos los tamaños y plataformas:
- Empieza en grande. Genera desde una fuente de 512×512 o mayor para que cada reducción se mantenga nítida.
- Incluye todos los tamaños. Proporciona 16, 32, 48, 180, 192 y 512 además de SVG para una cobertura completa.
- Mantén /favicon.ico en la raíz. Los navegadores usan esta URL por defecto cuando no hay una etiqueta link presente.
- Prueba a 16×16. Si tu diseño se mantiene a el tamaño más pequeño, se verá bien en todas partes.
- Usa vector cuando sea posible. SVG se adapta a cualquier resolución y admite el modo oscuro.
Cómo generar todos los tamaños a la vez
Producir todos estos tamaños manualmente sería tedioso. Nuestro gratuito generador de favicons se encarga del trabajo por ti en cuatro sencillos pasos:
- Sube una imagen cuadrada de origen de 512×512 o mayor.
- Revisa las vistas previas en vivo a 16×16, 32×32 y 180×180.
- Haz clic en crear para descargar un ZIP que contiene todos los tamaños y formatos anteriores.
- Copia las etiquetas de enlace HTML incluidas y el manifiesto en tu sitio.
Todo el proceso tarda menos de un minuto y produce un paquete que satisface todas las plataformas cubiertas en esta guía. Nunca tienes que recordar qué tamaño va dónde: el generador nombra cada archivo correctamente y proporciona las etiquetas de enlace correspondientes.
Preguntas frecuentes
¿Cuál es el tamaño estándar del favicon para un sitio web?
El tamaño estándar de favicon más común es 32×32 píxeles para la pestaña del navegador, con un respaldo de 16×16 dentro de un archivo ICO. Los sitios modernos también deberían incluir 180×180 para iOS y 192×192 más 512×512 para uso en Android y PWA.
¿Qué tamaño debe tener mi imagen de origen?
Usa una imagen cuadrada de origen de al menos 512×512 píxeles. Una fuente más grande permite que el generador reduzca limpiamente a cada tamaño requerido, manteniendo tu favicon nítido en pantallas retina y pantallas móviles de alta densidad.
¿Cuál es el tamaño del apple-touch-icon?
El tamaño actual del apple-touch-icon es 180×180 píxeles. iOS usa este PNG para los accesos directos de la pantalla de inicio e ignora el enlace de favicon estándar, por lo que debe declararse con rel=”apple-touch-icon” en tu HTML.
¿Qué tamaños requiere Android para los favicons?
Android Chrome y las aplicaciones web progresivas requieren iconos PNG de 192×192 y 512×512 declarados en un manifiesto de aplicación web. El icono de 512×512 debe marcarse como enmascarable para que Android pueda adaptarlo a diferentes formas de pantalla de inicio.
¿Debería usar SVG o PNG para mi favicon?
Usa ambos. SVG se escala perfectamente y admite el modo oscuro en navegadores modernos, mientras que PNG garantiza la compatibilidad con iOS, Android y navegadores más antiguos. Incluir los tres formatos —ICO, PNG y SVG— asegura que tu favicon se vea nítido en todas partes.
Cómo afectan los tamaños al rendimiento y la carga
Servir el tamaño de favicon correcto no es solo una cuestión visual: también afecta la rapidez con la que carga tu sitio. Cuando un navegador solicita un icono de pestaña de 32×32 y en su lugar sirves un PNG de 512×512, el visitante descarga muchos más bytes de los necesarios para un elemento tan pequeño en pantalla. A lo largo de muchas cargas de página de muchos visitantes, ese ancho de banda desperdiciado se acumula. Al incluir cada tamaño como un archivo separado y declararlos con el atributo sizes correcto en tus etiquetas de enlace, permites que el navegador elija automáticamente el archivo más pequeño adecuado. El resultado es un primer renderizado más rápido y un perfil de página más ligero, lo que importa tanto para la experiencia del usuario como para las Core Web Vitals en 2026. El generador se encarga de esta optimización por ti al nombrar y dimensionar cada archivo con precisión.
Genera todos los tamaños de favicon ahora
Ya no necesitas recordar qué tamaño quiere cada plataforma. Sube una imagen cuadrada a nuestro generador y descarga un paquete completo que cubre cada dimensión y formato descrito en esta guía, junto con HTML listo para pegar y un manifiesto. Es la forma más sencilla de satisfacer todos los navegadores y dispositivos en 2026. Ya sea que te importe la nitidez en una pestaña retina, un acceso directo limpio en la pantalla de inicio de iOS o una pantalla de inicio de PWA perfecta, una sola descarga lo cubre todo.
