Qué es un favicon y cómo añadirlo en WordPress

Por Felipe

Publicado en:

Un favicon es el pequeño icono que identifica tu web en las pestañas del navegador, en los marcadores y en el historial. En WordPress puedes añadirlo desde Apariencia → Personalizar → Identidad del sitio → Icono del sitio, subiendo una imagen cuadrada. Es un detalle mínimo que refuerza tu marca y mejora la experiencia de quien te visita.

Qué es un favicon y dónde aparece

El favicon (del inglés favorite icon, también llamado web icon o icono de favoritos) es una imagen que se asocia a un sitio web y que el navegador utiliza para representarlo en la barra de direcciones, en las pestañas abiertas, en los marcadores y en el historial, siempre junto al nombre y la dirección de la página. Funciona como una versión diminuta de tu logotipo: ayuda a quien navega a localizar tu web de un vistazo entre las muchas pestañas que suele tener abiertas en su ordenador o en el móvil.

Cuando una web de WordPress no tiene favicon, el navegador muestra el icono genérico de WordPress o un marcador en blanco, lo que proyecta una imagen poco cuidada y resta profesionalidad. Además del navegador de escritorio, el favicon se reutiliza en otros contextos: el icono que aparece al guardar un acceso directo en la pantalla de inicio de un móvil, las miniaturas de algunos lectores de feeds y ciertos resultados enriquecidos de los buscadores.

Tamaño y formato recomendados para el favicon

Qué tamaño debe tener un favicon

Un favicon es siempre cuadrado: su altura y su anchura coinciden. Los tamaños más habituales son 16×16, 32×32, 48×48 y 64×64 píxeles, con una profundidad de color que puede ser de 8, 24 o 32 bits. Cada plataforma y cada navegador escoge la resolución que mejor se adapta a su interfaz, por lo que conviene partir de una imagen grande y nítida. De hecho, WordPress recomienda subir un icono de al menos 512×512 píxeles: a partir de ese original, el sistema genera automáticamente las versiones pequeñas que necesitan el navegador, las pestañas y los accesos directos móviles (por ejemplo, los 180×180 píxeles que utiliza iOS o los 192×192 y 512×512 que emplean Android y las aplicaciones web progresivas).

Qué extensión y formato utilizar

El favicon nació muy ligado al formato de icono clásico .ico, y durante años fue prácticamente la única opción. Hoy los navegadores y plataformas modernas aceptan también .png, .jpg, .gif e incluso .svg. Para la mayoría de proyectos lo más práctico es un PNG cuadrado con fondo transparente, porque mantiene buena calidad a tamaño reducido y se integra bien tanto en pestañas claras como oscuras. Reserva el formato .ico únicamente si necesitas compatibilidad con navegadores muy antiguos.

Por qué deberías añadir un favicon a tu sitio web

Aunque ocupe apenas unos píxeles, el favicon cumple funciones importantes para la imagen y la usabilidad de tu web o tu tienda online.

Asocia el logotipo con tu web

El favicon suele ser una versión reducida del logotipo de la empresa adaptada a ese formato minúsculo. Usarlo aporta coherencia a tu imagen corporativa y hace que tu sitio se distinga del resto con un solo golpe de vista.

Facilita la identificación entre pestañas

Hoy es normal navegar con muchas pestañas abiertas a la vez. El favicon permite que la persona reconozca y vuelva a tu página rápidamente, sin necesidad de leer el título, lo que mejora la experiencia de usuario y, de paso, la probabilidad de que regrese.

Mejora la imagen de marca

Un favicon bien diseñado transmite cuidado y profesionalidad, y diferencia tu proyecto de la competencia. Es un detalle pequeño, pero contribuye a perfilar la identidad visual de tu marca y a alinear cada elemento de la web con ella.

Cómo añadir un favicon en WordPress paso a paso

WordPress integra esta función en el personalizador, así que no necesitas tocar código para configurarla. Sigue estos pasos:

  1. En el panel de administración, entra en Apariencia y, dentro de ese menú, en Personalizar.
  2. Entre las opciones disponibles, selecciona Identidad del sitio. Desde aquí puedes editar el título de la página, la descripción y el icono.
  3. Pulsa en Icono del sitio y sube la imagen cuadrada que quieras usar como favicon (idealmente de 512×512 píxeles).
  4. Guarda los cambios. Abre tu web en el navegador y comprueba que el icono aparece correctamente en la pestaña.

Para sustituir el favicon más adelante, repite el mismo recorrido y, en el último paso, elige la opción Cambiar en lugar de subir uno nuevo desde cero.

Si tu plantilla no incluye esta opción o prefieres un control más fino, tienes dos alternativas. La primera es usar un plugin especializado, como Favicon by RealFaviconGenerator, que crea todas las variantes (escritorio, iOS, Android, Windows) a partir de una sola imagen. La segunda es el método manual: generar un archivo favicon.ico y subirlo a la raíz de tu dominio con el administrador de archivos de tu plan de hosting, añadiendo después la etiqueta correspondiente en la cabecera del tema. Contar con un alojamiento sobre discos NVMe y tecnología LiteSpeed, como el de HostingPlus, ayuda además a que ese icono —y el resto de tu web— se cargue con rapidez en cada visita.

Buenas prácticas y errores frecuentes

Para que el favicon luzca bien en cualquier dispositivo, ten en cuenta algunas recomendaciones: parte siempre de un diseño sencillo y reconocible a tamaño reducido (los detalles finos se pierden por debajo de 32 píxeles); usa fondo transparente para que se adapte a interfaces claras y oscuras; y mantén el icono alineado con tu logotipo. Si tras subirlo no ves el cambio, casi siempre es cuestión de caché: vacía la del navegador y, si tu servidor utiliza un sistema de caché como LiteSpeed, púrgala también y espera unos minutos. Conviene, por último, comprobar el resultado en varios navegadores y en el móvil antes de darlo por terminado.

Preguntas frecuentes

¿Por qué no se ve mi favicon después de subirlo?

Lo más habitual es que el navegador esté mostrando una versión guardada en caché. Vacía la caché del navegador, purga la de tu servidor o plugin de optimización y vuelve a cargar la página. El icono debería aparecer en uno o dos minutos.

¿Qué tamaño mínimo pide WordPress para el icono del sitio?

WordPress recomienda una imagen cuadrada de al menos 512×512 píxeles. Con ese original genera de forma automática los tamaños menores (16×16, 32×32, etc.) que requieren las pestañas, los marcadores y los accesos directos móviles.

¿Puedo poner un favicon sin instalar ningún plugin?

Sí. La vía más rápida es Apariencia → Personalizar → Identidad del sitio → Icono del sitio. Si lo prefieres, también puedes subir manualmente un archivo favicon.ico a la raíz de tu dominio desde el administrador de archivos de tu hosting.

¿Tu web necesita un hosting que vuele?

Hosting en España con soporte real en español, migración gratis, SSL incluido y 30 días de garantía. Sin líos y sin costes ocultos.

Ver planes de hosting →