# 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:
```html
```
## 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:
1. Ve a [KaijuConverter — PNG a ICO](/convert/png-to-ico)
2. Sube tu PNG cuadrado (idealmente 512×512)
3. El conversor genera un `.ico` multi-resolución con capas 16, 32, 48 y 256
4. 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:
1. Apariencia → Personalizar → Información del sitio
2. Sube una imagen de al menos **512×512 px**
3. 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 `` en el `` de cada página. La línea mínima indispensable:
```html
```
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](https://realfavicongenerator.net/favicon_checker) para validar todos los tamaños
- Comprueba que `tudominio.com/favicon.ico` devuelve 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.
Guía