Cómo se usa
- Pega la cadena Base64 o el data URI de un icono o de la imagen que quieres convertir en uno.
- Revisa la vista previa y las dimensiones. Una imagen de origen cuadrada da el icono más limpio.
- ICO viene preseleccionado. Elige un tamaño (16, 32, 48, 64, 128 o 256 píxeles) o la opción Varios tamaños.
- Descarga el archivo .ico. Si la entrada ya es un ICO y quieres conservar sin cambios todas las imágenes que contiene, elige Original.
Archivos ICO en Base64
Un archivo ICO es un pequeño contenedor: un encabezado, un directorio de entradas y una imagen por entrada, cada una almacenada como datos BMP o PNG. El encabezado empieza con los bytes 00 00 01 00, así que el Base64 de un icono comienza por AAABAA. Verás iconos en Base64 en data URI de favicons como <link rel="icon" href="data:image/x-icon;base64,...">, en páginas HTML de un solo archivo y en API que devuelven iconos de sitios web.
El tipo MIME registrado es image/vnd.microsoft.icon, pero image/x-icon es mucho más común y funciona en todas partes.
Qué tamaño de icono elegir
| Tamaño | Uso habitual |
|---|---|
| 16 × 16 | Pestaña del navegador y marcadores en pantallas estándar |
| 32 × 32 | Pestaña del navegador en pantallas de alta densidad |
| 48 × 48 | Iconos del escritorio y del Explorador de Windows |
| 64, 128 | Vistas previas más grandes y listas de aplicaciones |
| 256 × 256 | Vistas de iconos grandes y muy grandes en Windows |
La opción Varios tamaños reúne 16, 32, 48 y 256 en un solo archivo, para que cada sistema elija el que mejor le encaje. Las imágenes internas están comprimidas en PNG, lo que conserva la transparencia y es compatible con Windows Vista y versiones posteriores y con todos los navegadores modernos.
Usar el icono como favicon
Los navegadores solicitan automáticamente /favicon.ico en la raíz del sitio, así que guardar el archivo ahí funciona incluso sin ningún marcado. Un data URI en Base64 en el href ahorra esa petición, pero entonces el icono se vuelve a descargar con cada página en lugar de almacenarse en caché por separado. Los navegadores modernos también aceptan iconos PNG y SVG, y una configuración habitual combina ambos:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">Parte de una imagen cuadrada con formas sencillas y mucho contraste; los detalles finos desaparecen a 16 píxeles. Para obtener una versión PNG para otros usos, prueba Base64 a PNG.
Preguntas frecuentes
¿Qué tamaño debe tener favicon.ico?
Un icono con imágenes de 16, 32 y 48 píxeles cubre los navegadores y Windows. La opción Varios tamaños de esta herramienta añade además 256 para las vistas de iconos grandes.
¿Puedo convertir un PNG o SVG en Base64 a ICO?
Sí. Pégalo, deja ICO como formato de descarga y elige un tamaño. Se puede convertir cualquier imagen que tu navegador pueda mostrar.
¿Por qué la vista previa muestra solo un tamaño de mi icono?
Un archivo ICO puede contener varias imágenes, pero la vista previa solo muestra una de ellas. Descárgalo como Original para conservar todas las imágenes del archivo.
¿El ICO conserva la transparencia?
Sí. Los iconos se almacenan como datos PNG con un canal alfa completo, así que las esquinas redondeadas y los bordes suaves siguen siendo transparentes.
¿Cómo meto un icono en un data URI?
href de tu etiqueta <link rel="icon">.