¿Qué es un favicon?
Un favicon (favorite icon) es el pequeño icono que aparece en las pestañas del navegador, marcadores, entradas del historial y accesos directos del escritorio. Es uno de los primeros elementos visuales que los visitantes notan de tu sitio web. Un favicon ausente transmite la sensación de un sitio poco profesional o inacabado.
Los favicons han evolucionado de simples iconos de 16x16 píxeles a un conjunto complejo de tamaños necesarios para distintos dispositivos y contextos. Los sitios modernos necesitan varios formatos de favicon para cubrir todos los casos de uso.
El formato ICO para favicons
ICO es el formato original de favicon y sigue siendo el más universalmente compatible. Un solo archivo favicon.ico contiene varias imágenes en distintos tamaños (16x16, 32x32, 48x48, etc.), lo que permite a los navegadores y sistemas operativos seleccionar automáticamente el tamaño más adecuado.
Cuando un navegador solicita /favicon.ico, recibe un único archivo que contiene todos los tamaños necesarios. No se requiere marcado HTML adicional — los navegadores buscan automáticamente favicon.ico en el directorio raíz.
Requisitos modernos de favicon (2026)
| Archivo | Tamaño | Propósito |
|---|---|---|
| favicon.ico | 16x16 + 32x32 | Navegadores antiguos, accesos directos de Windows |
| apple-touch-icon.png | 180x180 | Marcador en pantalla de inicio de iOS |
| icon-192.png | 192x192 | Chrome Android, manifest PWA |
| icon-512.png | 512x512 | Pantalla de inicio PWA, diálogo de instalación |
| favicon.svg | Escalable | Navegadores modernos, escalado infinito, modo oscuro |
Cómo crear un favicon desde PNG
- Empieza con una imagen cuadrada — de al menos 512x512 píxeles. Usa tu logo o una versión simplificada.
- Usa PNG con transparencia — un fondo transparente garantiza que tu favicon se vea limpio en cualquier tema del navegador (claro u oscuro).
- Súbelo a nuestro convertidor — selecciona ICO como formato de salida. El convertidor genera automáticamente un ICO multi-resolución.
- Prueba en tamaños pequeños — visualiza tu favicon a 16x16. Los diseños complejos pueden necessitar simplificarse para tamaños de visualización muy pequeños.
Transparencia en los favicons
Origen PNG = favicon transparente. Si tu imagen de origen tiene fondo transparente, el ICO lo conservará. Esto es importante para favicons que deben verse bien tanto en temas de navegador claros como oscuros.
Origen JPG = fondo sólido. JPG no admite transparencia, por lo que un favicon generado desde un JPG siempre tendrá un color de fondo sólido. Usa PNG siempre que sea posible.
Buenas prácticas
- Mantenlo simple: los favicons se muestran a 16x16 píxeles. Los logos complejos se vuelven ilegibles. Usa una marca simplificada o una sola letra.
- Prueba al tamaño real: visualiza tu favicon en una pestaña del navegador antes de publicarlo. Lo que se ve genial a 512x512 puede ser irreconocible a 16x16.
- Asegura el contraste: prueba tanto en temas claros como oscuros del navegador. Tu favicon debe ser visible sobre cualquier fondo.
- Usa fuente vectorial: si tienes una versión SVG de tu logo, producirá resultados más nítidos en todos los tamaños.
Implementación HTML
Añade estas líneas al <head> de tu HTML para soporte completo de favicon:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Inicio rápido: como mínimo, coloca un favicon.ico (con tamaños 16x16 y 32x32) en el directorio raíz de tu sitio web. Los navegadores lo encuentran automáticamente sin ningún marcado HTML.