Qué son ICO y favicon
Al abrir cualquier sitio web, el pequeño icono en la pestaña del navegador es el favicon. Suele ser un archivo .ico, aunque también se usa PNG. El favicon es la "cara" del sitio web; los usuarios lo usan para identificar rápidamente tu sitio entre las muchas pestañas.
Por qué se necesita el formato ICO
Aunque los navegadores modernos soportan PNG como favicon, el formato ICO sigue teniendo ventajas irreemplazables:
- Mejor compatibilidad: navegadores antiguos, accesos directos de escritorio de Windows solo reconocen ICO
- Empaquetado multi-tamaño: un archivo ICO puede contener 16x16, 32x32, 48x48 y otros tamaños, el sistema elige automáticamente
- Marcadores, iconos PWA: algunos escenarios aún requieren ICO
Herramienta de conversión de imágenes a ICO de DocsAll
Usa la herramienta de imagen a ICO para generar rápidamente:
- Prepara una imagen cuadrada de origen (se recomienda PNG de 256x256 o mayor)
- Abre la herramienta de conversión a ICO, sube la imagen
- La herramienta genera automáticamente un ICO multi-tamaño
- Descarga el archivo .ico
Método de configuración de favicon
Configuración básica
Coloca favicon.ico en el directorio raíz del sitio y el navegador lo reconocerá automáticamente. También puedes declararlo explícitamente con una etiqueta link en el head del HTML, con el atributo rel establecido en icon y href apuntando a favicon.ico.
Adaptación a múltiples dispositivos
Los sitios web modernos recomiendan configurar varios tamaños simultáneamente:
- favicon.ico: por defecto, en el directorio raíz
- apple-touch-icon.png (180x180): para iOS al añadir a pantalla de inicio
- icon.png (192x192, 512x512): para PWA
Recomendaciones de diseño de imagen de origen
- Usa PNG: soporta fondo transparente, ICO convertido desde PNG tiene mejores resultados
- Cuadrada: 16x16, 32x32 son tamaños de visualización; la imagen de origen más grande facilita el escalado
- Sencilla: en tamaños pequeños los patrones complejos se confunden, usa formas simples y colores de marca
- Fondo transparente: evita bloques con fondo blanco, se integra en la pestaña del navegador
Preguntas frecuentes
El favicon no se actualiza
La caché del navegador es muy persistente; si cambias el favicon y no se muestra, fuerza la actualización (Ctrl+F5) o añade un parámetro de versión a la ruta, como favicon.ico?v=2.
El icono se ve borroso
La imagen de origen es demasiado pequeña o no cuadrada y se ha estirado. Regénérala con un PNG cuadrado de 256x256 o mayor.
Un favicon claro hace que el sitio web parezca más profesional. Con la herramienta ICO lo resuelves en minutos; no dejes la pestaña vacía.