El formato ICO ha sido el estándar para favicons desde los primeros días de la web. Aunque los navegadores modernos soportan favicons PNG, el formato ICO sigue siendo esencial para una compatibilidad máxima. Aquí te mostramos cómo convertir PNG a ICO utilizando diferentes métodos.
Por qué ICO sigue siendo importante en 2026
- Soporte universal en navegadores — ICO funciona en todos los navegadores, incluyendo versiones muy antiguas de IE.
- Contenedor de múltiples tamaños — Un solo archivo ICO puede contener múltiples tamaños de imagen (16×16, 32×32, 48×48); el navegador elige el mejor.
- Integración con Windows — Los accesos directos del escritorio de Windows y los pines de la barra de tareas utilizan el formato ICO.
- Respaldo automático — Los navegadores buscan
/favicon.icoen la raíz de cada sitio web por defecto.
Método 1: Herramienta en línea (el más fácil)
La forma más sencilla es usar la herramienta Image to Favicon de Mzu favicondl:
- Ve a la página de Herramientas.
- Sube tu imagen PNG.
- La herramienta genera todos los tamaños de favicon (ICO, 16×16, 32×32, 180×180, 192×192, 512×512).
- Descarga el paquete completo como un archivo ZIP.
Extra: El ZIP también incluye el fragmento de código HTML y un archivo site.webmanifest — todo lo que necesitas para añadir favicons a tu sitio.
Método 2: Línea de comandos con ImageMagick
Para los desarrolladores que prefieren la terminal, ImageMagick es el estándar de oro:
# Install ImageMagick
# macOS: brew install imagemagick
# Ubuntu: sudo apt install imagemagick
# Windows: choco install imagemagick
# Convert PNG to ICO (single size)
magick convert input.png -resize 32x32 favicon.ico
# Create multi-size ICO (recommended)
magick convert input.png -define icon:auto-resize=16,32,48 favicon.icoEl enfoque de múltiples tamaños es el mejor: el navegador selecciona automáticamente el tamaño más apropiado.
Método 3: Usando FFmpeg
Si ya tienes FFmpeg instalado:
ffmpeg -i input.png -vf scale=32:32 favicon.icoMétodo 4: Script de Python
Usando la librería Pillow:
from PIL import Image
img = Image.open('input.png')
img.save('favicon.ico', format='ICO',
sizes=[(16, 16), (32, 32), (48, 48)])PNG vs ICO: Cuándo usar cada uno
| Característica | PNG | ICO |
|---|---|---|
| Soporte en navegadores modernos | Todos | Todos |
| Soporte en navegadores antiguos | IE 11+ | Todas las versiones de IE |
| Múltiples tamaños en un archivo | No | Sí |
| Transparencia | Sí | Sí |
| Tamaño de archivo | Más pequeño por tamaño | Más grande (múltiples tamaños) |
| Accesos directos de Windows | No | Sí |
| Detección automática por navegadores | Solo si se declara en HTML | /favicon.ico detectado automáticamente |
Mejor práctica: Usa ambos
El enfoque recomendado es proporcionar ambos formatos:
<!-- ICO as fallback -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- PNG for modern browsers (crisper rendering) -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">Los navegadores modernos preferirán el PNG. Los navegadores más antiguos y los accesos directos de Windows usarán el ICO. Así obtendrás lo mejor de ambos mundos.
Consejos para obtener los mejores resultados
- Empieza con una imagen cuadrada — Las imágenes no cuadradas se estirarán o recortarán.
- Usa al menos 512×512 como entrada — Reducir el tamaño produce mejores resultados que aumentarlo.
- Mantenlo simple — A 16px, los detalles finos desaparecen. Las formas audaces y el alto contraste funcionan mejor.
- Usa fondos transparentes — Los fondos sólidos se ven anticuados en las pestañas de los navegadores modernos.
- Prueba a tamaño real — Reduce tu icono a 16×16 píxeles y verifica la legibilidad.