¿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 los favicons y sigue siendo el más compatible. Un solo archivo favicon.ico contiene varias imágenes en distintos tamaños (16x16, 32x32, 48x48, etc.), lo que permite a navegadores y sistemas operativos elegir 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
- Parte de una imagen cuadrada — de al menos 512x512 píxeles. Usa tu logotipo o una versión simplificada.
- Usa PNG con transparencia — un fondo transparente garantiza que tu favicon se vea limpio con cualquier tema del navegador (claro u oscuro).
- Súbelo al conversor de PNG a ICO — genera un único favicon.ico con seis tamaños: 256, 128, 64, 48, 32 y 16 píxeles.
- Pruébalo a tamaños pequeños — mira tu favicon a 16x16. Los diseños complejos pueden necesitar una simplificación para tamaños de visualización diminutos.
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, así que un favicon creado a partir de un JPG siempre tendrá un color de fondo sólido. Usa PNG siempre que puedas. Si tu logotipo solo existe en JPG, aprende a hacer transparente el fondo de un JPG antes de crear el favicon.
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.
ICO vs PNG vs SVG: qué formato de favicon usar
| Formato | Dónde funciona | Para qué usarlo |
|---|---|---|
| favicon.ico | En todos los navegadores, incluidos los antiguos; se encuentra en /favicon.ico sin necesidad de HTML | La alternativa de respaldo que todo sitio debería tener |
| PNG | En todos los navegadores modernos mediante <link rel="icon" type="image/png"> |
apple-touch-icon (180×180) e iconos del manifiesto de la aplicación web (192 y 512) |
| SVG | Chrome, Edge y Firefox; las versiones antiguas de Safari lo ignoran | Un icono nítido a cualquier tamaño, con colores para el modo oscuro mediante CSS |
Un conjunto mínimo habitual es favicon.ico, icon.svg, apple-touch-icon.png y los dos PNG del manifiesto. Prescinde del SVG si tu logotipo tiene detalles finos que se deshacen a 16 px; dibuja mejor un icono simplificado.