Tamaños de favicon explicados (16–256): qué incluir en favicon.ico
Sabe exactamente qué tamaños de icono pertenecen a tu favicon.ico y por qué cada uno importa
Convertir ahoraDónde aparecen realmente los favicons
La mayoría de la gente piensa en los favicons como los pequeños iconos en las pestañas del navegador, pero aparecen en muchos más lugares. Entender cada contexto te ayuda a elegir qué tamaños incluir para que tu icono siempre se vea nítido.
Las pestañas del navegador son la ubicación más visible. Cada pestaña abierta muestra tu favicon a aproximadamente 16 píxeles, lo que lo convierte en la forma principal en que los usuarios identifican tu sitio cuando hay muchas pestañas abiertas. Las barras de marcadores y menús también renderizan tu icono a 16 píxeles en la mayoría de los navegadores, por lo que una versión nítida a este tamaño es innegociable.
Las barras de direcciones y sugerencias de búsqueda en algunos navegadores muestran el favicon junto a la URL, típicamente a 16 o 32 píxeles dependiendo de la densidad de la pantalla. Los paneles de historial se comportan de manera similar, mostrando el favicon para ayudar a los usuarios a examinar sitios visitados anteriormente.
Más allá del navegador, los favicons aparecen en contextos del sistema operativo también. Cuando un usuario ancla tu sitio a la barra de tareas de Windows o crea un acceso directo de escritorio, el sistema operativo extrae del archivo ICO y puede renderizar el icono a 48, 64 o incluso 256 píxeles. En pantallas de alta resolución (clase Retina), un icono de 32 píxeles puede ser estirado para llenar un espacio que demanda más detalle, produciendo un resultado borroso a menos que exista una variante más grande dentro del ICO.
Las Aplicaciones Web Progresivas (PWA) usan sus propios iconos de manifiesto en lugar de favicon.ico, pero el favicon sigue siendo importante como respaldo para el chrome estándar del navegador y para usuarios que marcan el sitio sin instalar la PWA.
Para qué sirve cada tamaño de favicon
Cada dimensión en píxeles sirve para un propósito distinto. La tabla a continuación mapea cada tamaño estándar de favicon a su uso común e indica si deberías incluirlo.
| Tamaño (px) | Uso común | ¿Incluir? |
|---|---|---|
| 16 × 16 | Pestañas del navegador, barra de marcadores, barra de direcciones, historial | Sí — requerido |
| 32 × 32 | Pestañas de navegador de alta resolución, barra de tareas de Windows, Safari en macOS | Sí — requerido |
| 48 × 48 | Accesos directos de sitios anclados en Windows, Explorador de Windows | Sí — recomendado |
| 64 × 64 | Algunas superficies de interfaz de Windows, lectores RSS | Opcional |
| 128 × 128 | Vista de iconos grandes de Windows, Chrome Web Store | Opcional |
| 256 × 256 | Vista extra grande de Windows, accesos directos de escritorio de alta resolución | Recomendado para completitud |
16 y 32 píxeles son los absolutamente esenciales. Sin ellos, los navegadores recurren a un globo genérico o un icono en blanco, lo que perjudica el reconocimiento de marca. Estos dos tamaños cubren prácticamente todos los escenarios de pestañas de navegador de resolución estándar y alta.
48 píxeles entra en juego cuando los usuarios crean accesos directos de Windows a tu sitio. El sistema operativo renderiza accesos directos del escritorio a 48 píxeles en la vista de iconos predeterminada, por lo que incluir este tamaño evita que el SO escale incómodamente la variante de 32 píxeles.
64 y 128 píxeles aparecen en contextos de nicho. Algunas superficies de interfaz de Windows y aplicaciones de terceros solicitan un icono de 64 píxeles, mientras que 128 píxeles es usado por Chrome Web Store y ciertas vistas de iconos grandes. Incluirlos solo añade unos pocos kilobytes al archivo ICO, así que la compensación es mínima.
256 píxeles importa más en monitores de alta resolución. Cuando Windows renderiza una vista de iconos extra grande o un usuario ancla tu sitio a la barra de tareas en una pantalla 4K, el SO puede extraer la variante de 256 píxeles para el renderizado más nítido posible.
El conjunto seguro recomendado
Si quieres un solo favicon.ico que cubra la gama más amplia de contextos sin exceso innecesario, usa este conjunto seguro:
- 16 px — pestañas del navegador y marcadores
- 32 px — pestañas de alta resolución y barra de tareas de Windows
- 48 px — accesos directos del escritorio de Windows
- 256 px — vistas de alta resolución y extra grandes
Este conjunto de cuatro tamaños mantiene el archivo ICO compacto (típicamente menos de 30 KB) mientras asegura un renderizado nítido en cada contexto principal. Puedes añadir 64 y 128 píxeles si tu caso de uso lo requiere, pero la mayoría de los sitios web nunca notarán la diferencia.
Si estás construyendo un favicon puramente para la web y no esperas que los usuarios creen accesos directos de escritorio, puedes reducir el conjunto a solo 16 y 32 píxeles. Eso produce un archivo ICO bien por debajo de 10 KB. Sin embargo, el costo de incluir 48 y 256 es tan pequeño que recomendamos el conjunto seguro completo como predeterminado para casi cualquier proyecto.
Para una visión más amplia de cómo funciona el formato ICO y cuándo es la opción correcta sobre PNG, consulta nuestro explicador sobre qué es un archivo ICO.
Cómo generar los tamaños de favicon correctos
Crear un favicon.ico multitamaño toma solo unos pocos pasos con Any2ICO. La herramienta acepta imágenes de origen PNG, JPG, WebP, GIF, BMP, AVIF y SVG de hasta 10 MB, y produce un archivo ICO correctamente estructurado que contiene cada tamaño que selecciones.
- Comienza con una fuente de alta resolución. Sube tu logotipo o icono a 512 píxeles o más. Una fuente grande le da al conversor suficiente detalle para producir versiones reducidas limpias en cada tamaño objetivo. Las fuentes SVG funcionan especialmente bien porque escalan sin pérdida de detalle.
- Selecciona tus tamaños. Marca las casillas para 16, 32, 48 y 256 (el conjunto seguro), o añade 64 y 128 si los necesitas.
- Elige el comportamiento de escalado. Ajustar (Contain) encaja la imagen dentro de cada cuadrado preservando la relación de aspecto, rellenando cualquier espacio extra. Recortar (Cover) llena todo el cuadrado, cortando los bordes si es necesario. Para la mayoría de los logotipos, ajustar con un fondo transparente es la mejor opción.
- Descarga tu favicon.ico. Coloca el archivo resultante en la raíz de tu sitio web (
https://tusitio.com/favicon.ico). Los navegadores buscan esta ruta automáticamente, así que en muchos casos ni siquiera necesitas una etiqueta<link>.
Any2ICO realiza la conversión directamente en tu navegador usando la Canvas API. Los archivos importados desde tu dispositivo se transmiten a través del servidor para su procesamiento pero no se almacenan. Las imágenes pegadas desde el portapapeles se quedan completamente en tu máquina. Si estás convirtiendo varios iconos a la vez, el modo por lotes te permite descargar todo en un solo archivo ZIP.
Para una guía completa con capturas de pantalla y fragmentos de código HTML, consulta nuestra guía paso a paso sobre cómo crear un favicon.ico. Y si necesitas convertir específicamente un PNG, nuestra guía de PNG a ICO recorre ese flujo de trabajo en detalle.
Resumen
Elegir los tamaños de favicon correctos no tiene que ser complicado. La regla principal es simple: incluye siempre 16 y 32 píxeles, añade 48 y 256 para cobertura de Windows y alta resolución, y usa una imagen de origen de alta resolución para mantener cada tamaño nítido. Ese conjunto seguro de cuatro tamaños maneja la gran mayoría de los escenarios del mundo real.
Cuando estés listo para construir tu favicon, Any2ICO lo hace fácil. Sube tu imagen, elige tus tamaños y descarga un solo archivo ICO que funciona en todas partes. Es gratis, rápido y respeta tu privacidad.