Un favicon (abreviatura de "favorite icon" o "icono favorito") es el pequeño icono que aparece en la pestaña de tu navegador, junto al título de la página. Es uno de los elementos más reconocibles de cualquier sitio web, pero muchos desarrolladores lo pasan por alto.
¿Dónde aparecen los favicons?
Los favicons aparecen en más lugares de los que imaginas:
- Pestañas del navegador — El lugar más común. Cada pestaña abierta muestra el favicon del sitio.
- Barra de marcadores — Cuando los usuarios marcan tu sitio, el favicon les ayuda a encontrarlo más tarde.
- Resultados de búsqueda de Google — Desde 2019, Google muestra favicons junto a las URLs en los resultados de búsqueda móvil, y ahora también en escritorio.
- Historial — Tu historial del navegador utiliza favicons para una rápida identificación visual.
- Pantalla de inicio de PWA — Si tu sitio se instala como una Progressive Web App, el favicon se convierte en el icono de la aplicación.
Por qué los favicons son importantes
1. Reconocimiento de marca
Un favicon bien diseñado refuerza tu marca. Piensa en lo instantáneamente reconocibles que son la "G" de Google, el pájaro de Twitter o el botón de reproducción de YouTube, incluso a 16×16 píxeles.
2. Experiencia de usuario
Cuando los usuarios tienen más de 20 pestañas abiertas, los favicons son la única forma de distinguir entre sitios. Sin un favicon, tu pestaña se convierte en un icono en blanco genérico, fácil de cerrar, fácil de olvidar.
3. Impacto en el SEO
Google muestra favicons en los resultados de búsqueda. Un favicon ausente o de baja calidad puede hacer que tu listado parezca poco profesional, reduciendo tu tasa de clics (CTR). Los estudios demuestran que los sitios web con favicons pueden experimentar una mejora del CTR de hasta un 20%.
4. Confianza y credibilidad
Un favicon profesional indica que alguien se preocupa por los detalles. Es algo pequeño, pero contribuye a la percepción general de calidad.
Formatos de archivo de favicon
| Formato | Mejor para | Compatibilidad con navegadores |
|---|---|---|
| .ico | Soporte heredado, puede contener múltiples tamaños | Todos los navegadores |
| .png | Navegadores modernos, renderizado nítido | Todos los navegadores modernos |
| .svg | Escalable, compatible con modo oscuro | Chrome, Firefox, Edge (no Safari) |
| .gif | Favicons animados (raros) | Limitado |
Tamaños comunes de favicon
- 16×16 — Pestaña del navegador (tamaño clásico)
- 32×32 — Pestaña del navegador (alta DPI / Retina)
- 180×180 — Apple Touch Icon (pantalla de inicio de iOS)
- 192×192 — Android Chrome
- 512×512 — Pantalla de inicio de PWA
Cómo empezar
La forma más rápida de obtener un favicon de un sitio web existente es utilizar una herramienta dedicada. Mzu favicondl te permite introducir cualquier dominio y descargar instantáneamente su favicon en múltiples tamaños, sin necesidad de registrarte.
Si necesitas crear un favicon desde cero, puedes usar el convertidor de imagen a favicon en nuestra sección de Herramientas para generar todos los tamaños que necesitas a partir de una sola imagen.
Configuración mínima de favicon
Como mínimo, añade estas dos líneas a tu <head> de HTML:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Esto cubre el 99% de los casos de uso. Para una configuración más completa, consulta nuestra guía HTML detallada.