ICO y favicon: guía completa para crear el icono de tu web
El favicon (favorite icon) es ese pequeño icono que aparece en la pestaña del navegador, en los marcadores y en los resultados de búsqueda de móvil. Aunque mide apenas 16×16 píxeles, tiene un gran impacto en la percepción de tu marca.
¿Qué es el formato ICO?
ICO es un formato de imagen especial de Windows que puede contener múltiples tamaños en un único archivo. A diferencia de PNG o JPG, un .ico almacena varias resoluciones simultáneamente (16×16, 32×32, 48×48, 256×256) para que el sistema operativo muestre la más adecuada según el contexto.
| Tamaño | Uso |
|---|---|
| 16×16 | Pestaña del navegador |
| 32×32 | Barra de tareas Windows |
| 48×48 | Escritorio Windows |
| 64×64 | Acceso directo en alta DPI |
| 128×128 | macOS Dock |
| 256×256 | Vista en carpeta / alta resolución |
¿ICO, PNG o SVG para el favicon?
Los navegadores modernos (Chrome 4+, Firefox 41+, Safari 9+) aceptan PNG como favicon. Sin embargo, ICO sigue siendo el más compatible porque Internet Explorer solo entiende ICO, y algunos lectores RSS, agregadores y herramientas SEO siguen esperando favicon.ico en la raíz del dominio.
La recomendación actual es:
<!-- Favicon ICO clásico en la raíz (todos los navegadores) -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- PNG para navegadores modernos -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple Touch Icon (iOS) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- SVG (Chrome y Firefox modernos) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
Cómo convertir PNG a ICO
El flujo más común es diseñar en alta resolución (mínimo 512×512 PNG con fondo transparente) y luego convertir:
- Ve a KaijuConverter — PNG a ICO
- Sube tu PNG cuadrado (idealmente 512×512)
- El conversor genera un
.icomulti-resolución con capas 16, 32, 48 y 256 - Descarga y coloca el archivo en la raíz de tu servidor (
/favicon.ico)
Requisitos para un buen favicon
- Fondo transparente o un color sólido que contraste en modo oscuro
- Diseño simple: a 16×16 no se distinguen los detalles finos
- Proporciones cuadradas: siempre 1:1
- Evita texto a menos que sea una inicial grande y legible
Favicon en WordPress
WordPress 5.4+ gestiona el favicon (llamado "Site Icon") desde el Personalizador:
- Apariencia → Personalizar → Información del sitio
- Sube una imagen de al menos 512×512 px
- WordPress genera automáticamente todos los tamaños necesarios
También puedes colocar manualmente favicon.ico en la carpeta raíz de tu instalación; el CMS lo detecta sin configuración adicional.
Implementación en HTML estático
Si tu sitio no usa CMS, añade las etiquetas <link> en el <head> de cada página. La línea mínima indispensable:
<link rel="icon" href="/favicon.ico">
Para mayor cobertura usa la combinación completa del bloque de código de la sección anterior.
Cómo verificar que funciona
- Abre en incógnito y observa la pestaña — el caché del navegador puede mostrar el favicon antiguo
- Usa RealFaviconGenerator Checker para validar todos los tamaños
- Comprueba que
tudominio.com/favicon.icodevuelve 200 OK (no 404)
Errores comunes
| Error | Solución |
|---|---|
| Favicon no aparece | Limpia caché del navegador (Ctrl+Shift+R) |
| Se ve borroso | La imagen base es demasiado pequeña — usa 512×512 mínimo |
| Solo funciona en Chrome | Añade el .ico en la raíz además de los PNG |
| iOS no muestra el icono | Necesitas apple-touch-icon.png de 180×180 |
Con un favicon bien implementado mejoras la identidad visual de tu sitio, los usuarios lo reconocen en marcadores y el CTR en resultados de búsqueda móvil aumenta levemente gracias al icono visible.
Conversiones relacionadas
Conversiones frecuentes del catálogo: