¿Qué es un favicon y por qué es importante para tu sitio web?

Un favicon (abreviatura de «favorite icon», es decir, «icono favorito») es la pequeña imagen cuadrada que representa a un sitio web en las pestañas del navegador, los marcadores, los historiales, los resultados de búsqueda de Google, las pantallas de inicio del móvil y las aplicaciones web instaladas. Es importante porque da a tu sitio una cara reconocible a simple vista, facilita encontrarlo entre muchas pestañas abiertas, transmite que el sitio es profesional y fiable, y ahora se muestra junto al nombre de tu sitio en los resultados de Google. Sin él, los visitantes ven un globo genérico o el icono de una página en blanco, y tu servidor llena sus registros de errores 404. Puedes crear un conjunto completo de favicons gratis con el generador de favicons de MakeFav.

¿Qué es un favicon?

Un favicon es un pequeño gráfico de marca, normalmente una versión simplificada de un logotipo o una sola letra o símbolo, que los navegadores y otros programas obtienen de tu sitio web y muestran allí donde necesitan un identificador visual compacto. En un navegador de escritorio suele dibujarse a 16 por 16 píxeles CSS, aunque el archivo en sí debería ser más grande para que se vea nítido en pantallas de alta densidad.

Técnicamente, un favicon es simplemente un archivo de imagen al que se hace referencia desde tu HTML (o que se encuentra en una ubicación predeterminada) y que los agentes de usuario descargan por separado del contenido de la página. Hoy en día, un «favicon» rara vez es un único archivo. Un sitio moderno suele incluir varias versiones del mismo icono para que los navegadores, los buscadores, iOS y Android reciban un formato y un tamaño adecuados.

Breve historia del favicon

El favicon se remonta a marzo de 1999, cuando Microsoft lanzó Internet Explorer 5. El navegador permitía guardar páginas en una lista de «Favoritos» y, además, buscaba un pequeño archivo de icono llamado favicon.ico en la raíz del sitio para mostrarlo junto a cada entrada guardada. La idea era sencilla: si un sitio ofrecía /favicon.ico, el icono aparecía junto al marcador.

Otros navegadores adoptaron pronto la función, y la navegación por pestañas la hizo mucho más útil. A medida que las pestañas se convirtieron en la principal forma de navegar, el favicon pasó de ser un adorno de los marcadores a una ayuda de navegación esencial. Con los años, el planteamiento fue evolucionando:

• Principios de los 2000: el elemento <link rel="icon"> permitió que los sitios indicaran un icono en cualquier URL en lugar de solo en la raíz, y los navegadores distintos de IE empezaron a aceptar archivos PNG y GIF.
• Década de 2010: Apple introdujo el apple-touch-icon para las pantallas de inicio de iOS, y Android y Windows añadieron sus propias convenciones, como los iconos del manifiesto y las imágenes de mosaico.
• Hoy: los favicons SVG, los manifiestos de aplicaciones web, los iconos adaptados al modo oscuro y los requisitos de Google para los favicons en los resultados de búsqueda han convertido el favicon en una parte pequeña pero real de la configuración técnica de un sitio.

Dónde aparecen hoy los favicons

Tu favicon se muestra en muchos más lugares que la pestaña del navegador. Los principales son:

• Pestañas del navegador: el lugar más visible, donde el icono suele ser lo único que se ve cuando hay muchas pestañas abiertas.
• Marcadores y favoritos: el icono aparece junto al título de la página en las barras y los menús de marcadores.
• Historial y páginas más visitadas: los navegadores muestran los favicons en los historiales y en las páginas de nueva pestaña.
• Resultados de búsqueda de Google: tanto en móvil como en escritorio, Google muestra el favicon de un sitio junto al nombre y la URL.
• Pantallas de inicio: cuando un visitante añade tu sitio a la pantalla de inicio en iOS o Android, el icono táctil o el icono del manifiesto se convierte en el acceso directo similar al de una aplicación.
• PWA instaladas: una aplicación web progresiva usa los iconos de su manifiesto para el icono del lanzador, la pantalla de inicio y el selector de tareas.
• Mosaicos de Windows y sitios anclados: las versiones antiguas de Windows y Edge usaban imágenes de mosaico definidas para los sitios anclados; las modernas reutilizan sobre todo tus iconos estándar.
• Vistas previas de enlaces en algunas aplicaciones: ciertas herramientas de chat y productividad (Slack es un ejemplo muy conocido) muestran el favicon de un sitio junto a un enlace desplegado. La mayoría de las vistas previas se basan principalmente en imágenes Open Graph, pero el favicon suele aportar la pequeña marca de identidad.

Por qué es importante un favicon para tu sitio web

Reconocimiento de marca

Las personas reconocen los colores y las formas más rápido de lo que leen un texto. Un icono coherente que se repite en pestañas, marcadores y resultados de búsqueda genera familiaridad cada vez que alguien lo ve, lo que supone exposición de marca gratuita en cada visita.

Confianza y credibilidad

La ausencia de favicon hace que un sitio parezca inacabado. Un icono limpio y bien renderizado es una pequeña señal de que alguien cuida los detalles, lo que refuerza la percepción de que el sitio es legítimo. No es una medida de seguridad, y los sitios de phishing pueden copiar iconos, pero un icono genérico en blanco rara vez ayuda a que un negocio parezca consolidado.

Porcentaje de clics en los resultados de búsqueda

Como Google muestra el favicon junto a tu resultado, este pasa a formar parte del aspecto de tu listado frente a los competidores. Google no ha publicado ningún efecto de los favicons en el posicionamiento, y no deberías esperar un impulso en las clasificaciones. El beneficio está en el reconocimiento visual: los usuarios que conocen tu icono tienen más probabilidades de detectar y elegir tu resultado, sobre todo en móvil, donde los resultados son compactos.

Usabilidad con muchas pestañas abiertas

Cuando un navegador tiene veinte pestañas abiertas, los títulos se truncan hasta desaparecer y el favicon es lo único que queda. Un icono distintivo permite encontrar tu pestaña al instante y volver a ella en lugar de abrir un duplicado o olvidarla.

Impresión profesional

Un favicon bien diseñado muestra la misma atención al detalle que el resto de tu sitio. Tanto en páginas de producto como en documentación, blogs y aplicaciones web, es uno de los toques de acabado más baratos que puedes añadir.

Accesibilidad al localizar pestañas

Los iconos ayudan a los usuarios que exploran visualmente en lugar de leer, incluidas las personas con dislexia o diferencias cognitivas, y a cualquiera que cambie rápidamente entre tareas. Un icono de alto contraste y forma sencilla es más fácil de distinguir. Eso sí, recuerda que un favicon es un complemento: no sustituye a un título de página claro, en el que se apoyan los lectores de pantalla y las tecnologías de asistencia.

Qué ocurre si no tienes un favicon

Los navegadores solicitan automáticamente /favicon.ico a la raíz de tu dominio, incluso si tu HTML no menciona ninguno. Si el archivo no existe, ocurren varias cosas:

• Icono genérico: los visitantes ven un globo, un documento o un icono en blanco predeterminado en la pestaña y los marcadores, lo que resulta anónimo.
• Errores 404 en tus registros: cada navegador que pide el archivo genera una solicitud fallida. En sitios con mucho tráfico, esto añade ruido a los registros de acceso, a la monitorización de errores y a las analíticas, y puede ocultar problemas reales.
• Sin icono en los resultados de Google: sin un favicon válido y rastreable, Google muestra su marcador de posición predeterminado junto a tu resultado.
• Solicitudes desperdiciadas: los navegadores pueden reintentarlo, lo que añade una carga pequeña pero inútil a tu servidor.

Incluso un icono muy sencillo es mejor que ninguno, porque elimina los 404 y ofrece a los usuarios algo reconocible.

Formatos de favicon explicados

Ningún formato cubre todas las plataformas, por lo que la mayoría de los sitios usan un pequeño conjunto de archivos.

Las imágenes de mosaico antiguas de Windows (configuradas mediante browserconfig.xml) eran necesarias para Internet Explorer 11 y el antiguo Edge. Hoy rara vez hacen falta, salvo que tengas que dar soporte a esos entornos.

Directrices de Google sobre favicons en los resultados de búsqueda

Si quieres que tu icono aparezca en la Búsqueda de Google, sigue los requisitos publicados por Google:

• Tamaño: la imagen debe ser cuadrada (1:1) y un múltiplo de 48 píxeles, como 48x48, 96x96 o 144x144. Google la reduce después a 16x16 para mostrarla. El tamaño mínimo admitido es 8x8, pero se recomienda 48x48 o mayor.
• Formatos: sirve cualquier formato compatible con los navegadores, incluidos ICO, PNG y SVG.
• URL estable: no cambies la URL del favicon con frecuencia. Una dirección estable ayuda a Google a mantener tu icono actualizado.
• Rastreable: tanto el archivo del favicon como tu página de inicio deben ser accesibles para Googlebot. No los bloquees en robots.txt ni detrás de un inicio de sesión.
• Una declaración por sitio: el icono está asociado a la página de inicio del sitio, así que coloca la etiqueta <link> en el head de tu página de inicio.
• Representativo y apropiado: el icono debe reflejar tu marca, y Google puede sustituir por el predeterminado uno que sea ofensivo o engañoso.

Después de publicar o cambiar un favicon, Google puede tardar entre días y semanas en volver a rastrearlo y actualizarlo, así que no esperes un cambio instantáneo.

Cómo crear un favicon rápidamente con MakeFav

No necesitas software de diseño ni línea de comandos. El generador de MakeFav convierte una imagen de origen en los archivos descritos arriba.

1. Prepara tu diseño. Usa un logotipo o símbolo cuadrado de 512 x 512 px o mayor. Las formas sencillas funcionan mejor porque el icono se verá a 16 px.
2. Súbelo en la página de inicio de MakeFav, o abre el editor para ajustar la imagen, el fondo y el margen antes de exportar.
3. Previsualiza el resultado en tamaños pequeños y sobre fondos claros y oscuros para asegurarte de que sigue siendo legible.
4. Descarga el paquete. Contiene el ICO, los tamaños PNG, el Apple touch icon, los iconos del manifiesto y el fragmento HTML para pegar.
5. Sube los archivos a la raíz de tu sitio web para que sean accesibles en rutas como /favicon.ico.
6. Añade el HTML al <head> de cada página, o a tu diseño o plantilla compartidos.
7. Verifica con el verificador de favicons, y después borra la caché del navegador y recarga para ver el nuevo icono.

Ejemplo de fragmento HTML

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

El atributo sizes="48x48" en el enlace del ICO ayuda a que los navegadores prefieran el SVG cuando lo admiten, manteniendo el ICO como respaldo. El PNG de 96 px cumple la regla de Google del múltiplo de 48.

Ejemplo de manifiesto de aplicación web

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Si trabajas con flujos de compilación o quieres automatizar la creación de iconos, consulta los recursos para desarrolladores.

Consejos de diseño para un favicon que funcione

• Hazlo simple. Una forma, una letra o un monograma atrevido superan a un logotipo detallado que se convierte en una mancha a 16 px.
• Usa un contraste fuerte. Asegúrate de que el icono se vea tanto en temas de navegador claros como oscuros. Un fondo de color ayuda.
• Evita el texto. Una sola inicial está bien; las palabras son ilegibles a este tamaño.
• Deja un pequeño margen para los iconos maskable y de esquinas redondeadas, de modo que no se recorte nada importante.
• Mantén la coherencia con tu logotipo y los colores de tu marca para que el favicon refuerce el reconocimiento.
• Prueba en dispositivos reales y comprueba cómo se ve en una pestaña, un marcador y un resultado de Google.

Problemas habituales con los favicons

Si tu icono no aparece, las causas habituales son la caché, las rutas incorrectas y los archivos bloqueados. Los navegadores almacenan en caché los favicons de forma agresiva, por lo que a menudo basta con una recarga forzada o una nueva ventana privada para ver los cambios. Comprueba que la URL del archivo devuelva un estado 200 y el tipo de contenido correcto, y que la etiqueta <link> esté dentro del <head>. Para la búsqueda, asegúrate de que robots.txt no bloquee el icono ni la página de inicio. El verificador de MakeFav puede ayudarte a detectar estos problemas rápidamente.

Preguntas frecuentes

¿Qué significa favicon?

Favicon es la abreviatura de «favorite icon» (icono favorito). El nombre procede de Internet Explorer 5, que en 1999 usó por primera vez un pequeño archivo de icono para decorar las entradas de la lista de Favoritos del navegador. El término se mantuvo aunque ahora el icono aparece en muchos otros lugares.

¿Ayuda un favicon al SEO?

Un favicon no es un factor de posicionamiento directo. Sin embargo, aparece junto al nombre de tu sitio en los resultados de Google en móvil y escritorio, por lo que puede mejorar el reconocimiento de marca y el atractivo visual de tu resultado, lo que puede favorecer indirectamente los clics. Seguir las directrices de Google es lo que hace que el icono pueda mostrarse.

¿Qué tamaño debe tener un favicon?

Para la Búsqueda de Google, usa una imagen cuadrada cuyo tamaño sea múltiplo de 48 píxeles, como 48x48 o 96x96. Para una cobertura más amplia, ofrece también un archivo ICO, un Apple touch icon de 180x180 y los iconos de manifiesto de 192x192 y 512x512. Un SVG es un buen complemento por su escalabilidad.

¿Sigo necesitando favicon.ico si uso PNG o SVG?

Sigue siendo buena idea. Los navegadores y algunas herramientas solicitan /favicon.ico de forma predeterminada, y el software más antiguo depende de él. Mantener un archivo ICO en la raíz del sitio evita errores 404 y te da un respaldo seguro cuando no se admite SVG o PNG.

¿Por qué no se actualiza mi favicon?

Los navegadores y los buscadores guardan en caché los favicons durante mucho tiempo. Prueba con una recarga forzada, una ventana privada o borrando la caché. Asegúrate de que la ruta del archivo sea correcta y de que se esté sirviendo el archivo nuevo. En la Búsqueda de Google, un icono modificado puede tardar días o semanas en volver a rastrearse y actualizarse.