¿Quieres añadir o cambiar rápidamente el favicon de tu WordPress (también llamado icono del sitio)? En la mayoría de los sitios que funcionan con WordPress 6.5 o posterior, puedes hacerlo en Ajustes → General → Icono del sitio en menos de 2 minutos.
En esta guía te mostramos los pasos exactos para las distintas configuraciones de WordPress (Ajustes, Editor del sitio y Personalizador), cómo comprobar que funciona y cómo solucionar los problemas más habituales por los que no se muestra el favicon.
Respuesta rápida: añade un favicon en WordPress
- En el panel de administración de tu WordPress, ve a Ajustes → General.
- Busca Icono del sitio y haz clic en Elegir un icono del sitio.
- Sube una imagen cuadrada (512 × 512 como mínimo), recórtala si se te solicita y, después, haz clic en Establecer como icono del sitio.
- Haz clic en Guardar cambios.
- Abre tu sitio en una ventana privada/de incógnito y haz una recarga forzada (Mayús+Recargar) para confirmarlo.
Nota: Si no ves «Icono del sitio» en Ajustes → General, ve a los métodos del Editor del sitio/Personalizador que se indican a continuación.
¿Qué es un favicon y por qué es importante?
Un favicon, abreviatura de «favorite icon» (icono favorito), es un pequeño icono que representa tu sitio web. Normalmente tiene 16×16 o 32×32 píxeles y se muestra en:
- Pestañas del navegador
- Marcadores
- Barras de direcciones (en algunos navegadores)
- Fragmentos de resultados de los motores de búsqueda
Ventajas de usar un favicon:
- Mayor reconocimiento de marca.
- Una experiencia de usuario mejorada, ya que tu sitio se identifica fácilmente.
- Una imagen más profesional y fiable.
Tres formas de añadir o cambiar un favicon en WordPress
Tanto si utilizas un tema clásico con el Personalizador como un tema de bloques moderno con el Editor del sitio, añadir o cambiar el favicon de WordPress es rápido cuando sabes dónde buscar.
| Método | Ideal para | Dificultad | Requiere herramientas adicionales | Notas |
| Ajustes integrados del icono del sitio | La mayoría de los sitios de WordPress (temas clásicos y de bloques) | Fácil | No | Enfoque predeterminado recomendado. |
| Carga manual mediante FTP | Desarrolladores que gestionan varias plataformas | Media | Cliente FTP | Control total sobre los archivos y el marcado. |
| Carga mediante el Administrador de archivos de cPanel | Alojamiento basado en cPanel sin FTP configurado | Media | Acceso a cPanel | Es útil si gestionas los archivos directamente en el servidor. |
1. Usar los ajustes integrados de WordPress
WordPress facilita cambiar el favicon de tu sitio mediante unos ajustes sencillos.
Pasos para utilizar los ajustes de WordPress:
- En el panel de administración de tu WordPress, ve a Ajustes → General.
- Haz clic en el botón que dice Elegir un icono del sitio.
- Elige un icono de tu biblioteca de medios o sube un archivo nuevo. WordPress recomienda que tu favicon sea cuadrado y tenga al menos 512 por 512 píxeles.
- Haz clic en Establecer como icono del sitio.
- Selecciona Guardar cambios.
Ventajas:
- No se necesitan plugins adicionales.
- Está integrado en WordPress para facilitar el acceso.
Limitaciones:
- Opciones de personalización limitadas para usuarios avanzados.
2. Cargar manualmente el favicon mediante FTP
Si te manejas bien con FTP, cargar un favicon manualmente te ofrece un control total sobre su implementación.
Pasos para cargar un favicon mediante FTP:
- Crea un archivo de favicon:
- Utiliza herramientas de diseño gráfico como Photoshop, GIMP o generadores en línea (como favicon-generator.org) para crear un favicon. Guárdalo como favicon.ico o en formatos compatibles, como .png o .svg.
- Accede a tu sitio mediante un cliente FTP (por ejemplo, FileZilla).
- Ve al directorio raíz de tu sitio, que normalmente se llama /public-html o /root.
- Carga el archivo del favicon.
- Añade el siguiente código al archivo /header.php de la carpeta de tu tema hijo:
<link rel="icon" href="path-to-your-favicon/favicon.ico" type="image/x-icon">- Guarda los cambios y actualiza tu sitio.
Ventajas:
- Control total sobre la ubicación del archivo.
- No dependes de herramientas adicionales.
Limitaciones:
- Requiere conocimientos técnicos de FTP y de las estructuras de archivos de WordPress.
3. Añadir un favicon mediante cPanel
Si tu proveedor de hosting utiliza cPanel, puedes cargar y gestionar tu favicon directamente mediante el administrador de archivos.
Pasos para añadir un favicon mediante cPanel:
- Inicia sesión en tu cuenta de hosting y accede a cPanel.
- Abre el Administrador de archivos y ve al directorio raíz de tu sitio web (normalmente public_html).
- Carga el archivo del favicon (favicon.ico) en el directorio raíz.
- Actualiza la sección <head> del archivo header.php del tema de WordPress con la siguiente línea:
<link rel="icon" href="favicon.ico" type="image/x-icon">- Guarda los cambios y actualiza el navegador para ver el nuevo favicon.
Ventajas:
- Omite la configuración de WordPress para ofrecer un control directo.
- Es útil para sitios web ajenos al ecosistema de WordPress.
Limitaciones:
- Requiere acceso a tu cuenta de hosting.
Cómo comprobar que tu favicon está activo (navegador y Google)
Comprobaciones en el navegador
- Abre tu sitio en una ventana de incógnito/privada, tanto en el ordenador como en el móvil.
- Haz una recarga forzada (Windows: Ctrl+F5; Mac: Cmd+Mayús+R).
- En las herramientas para desarrolladores de Chrome → Red, filtra por «favicon» y confirma que devuelve 200 (no 404).
Comprobaciones en la Búsqueda de Google (importante)
Google solo puede mostrar un favicon en los resultados de búsqueda si puede rastrear el icono y tu página de inicio. Los cambios pueden tardar de varios días a varias semanas en reflejarse después de volver a rastrear la página. Si necesitas actualizarlo antes, solicita la indexación de la página de inicio en Search Console.
Problemas habituales al cambiar favicons y consejos para solucionarlos
Cambiar tu favicon en WordPress puede provocar a veces problemas que impidan que se muestre correctamente. Aquí tienes una lista de problemas habituales y soluciones paso a paso para resolverlos:
1. El favicon no aparece después de subirlo
Pasos para solucionarlo:
- Borra la caché del navegador:
- Ve a la configuración del navegador y borra las imágenes y los archivos almacenados en caché. Aquí tienes instrucciones para Google Chrome, Safari y Firefox.
- Como alternativa, comprueba tu sitio en modo incógnito o en una ventana de navegación privada para evitar la caché.
- Comprueba el proceso de subida del favicon:
- Asegúrate de haber subido el favicon a la ubicación correcta según las instrucciones de cada método anterior.
- Fuerza una actualización:
- Usa el atajo de teclado Ctrl + F5 (Windows) o Command + Shift + R (Mac) para actualizar el navegador.
2. El favicon aparece borroso
Pasos para solucionarlo:
- Usa una imagen de alta resolución:
- Asegúrate de que tu favicon tenga un tamaño mínimo de 512×512 píxeles.
- Si es necesario, crea un favicon nuevo con un editor gráfico o un generador de favicons online.
- Asegúrate de que no esté demasiado comprimido:
- Aunque la compresión de imágenes es una excelente forma de mejorar la velocidad del sitio, si comprimes demasiado un gráfico puede acabar viéndose borroso. Si el favicon se ve borroso, prueba a no comprimirlo.
- Comprueba el formato:
- Usa los formatos .png o .ico para que se renderice con nitidez y claridad en todos los navegadores.
3. Los cambios no se reflejan en todos los dispositivos
Pasos para solucionarlo:
- Borra la caché del plugin de WordPress:
- Si utilizas un plugin de caché como WP Super Cache, ve a la configuración del plugin y borra la caché.
- Borra la caché de CDN o del hosting:
- Si tienes activada la caché en tu cuenta de hosting o utilizas una CDN que incluye caché, inicia sesión y borra la caché.
- Borra la caché del navegador:
- También puede que tengas que borrar la caché del navegador (consulta los enlaces a las instrucciones anteriores) para asegurarte de que ves los cambios más recientes.
- Prueba en varios dispositivos:
- Comprueba tu sitio en distintos dispositivos (ordenadores, móviles y tabletas) y en varios navegadores para confirmar que tu favicon se ha actualizado.
4. El favicon no se muestra en todos los navegadores
Pasos para solucionarlo:
- Comprueba el formato del archivo del favicon:
- Asegúrate de utilizar un formato compatible universalmente, como .ico o .png.
- Evita utilizar .svg a menos que tengas la certeza de que es compatible con los navegadores de destino.
- Inspecciona el código de la cabecera:
- Si has añadido el favicon manualmente, abre el archivo header.php de tu tema y confirma que el siguiente código está presente:
<link rel="icon" href="path-to-your-favicon/favicon.ico" type="image/x-icon">- Sustituye path-to-your-favicon por la URL real de tu archivo favicon.
- Prueba en navegadores antiguos:
- Usa un comprobador de compatibilidad online o prueba directamente en versiones antiguas de los navegadores para confirmar que funciona.
Buenas prácticas para diseñar e implementar favicons
- Simplifícalo: Evita los diseños demasiado complejos, ya que los favicons se muestran en tamaños pequeños
- Usa fondos transparentes:.png con transparencia suelen funcionar bien
- Mantén la proporción de aspecto correcta: Usa dimensiones cuadradas, como 512×512 o 1024×1024 píxeles
- Prueba tu favicon: Usa herramientas como Favicon Checker para asegurarte de que se muestra correctamente
Preguntas frecuentes
¿Dónde se encuentra el archivo favicon en WordPress?
En WordPress, el archivo favicon suele encontrarse en una de estas ubicaciones:
- En el personalizador de WordPress: Si has añadido el favicon a través del personalizador de WordPress, se almacena en la biblioteca multimedia. WordPress genera automáticamente varios tamaños y los coloca en la cabecera del sitio para que los navegadores lo reconozcan.
- El directorio raíz: Si has subido tu favicon mediante FTP o cPanel, normalmente se encuentra en el directorio raíz (/public_html).
¿Qué formatos de archivo son mejores para un favicon?
Estos son los formatos de archivo más utilizados para los favicons:
- ICO: El formato tradicional y con mayor compatibilidad universal. Puede contener varios tamaños de imagen en un solo archivo.
- PNG: Ofrece una mejor calidad y admite transparencias. Es compatible con la mayoría de los navegadores modernos.
- SVG: Ideal para escalar y mantener la independencia de la resolución. Sin embargo, es posible que algunos navegadores antiguos no lo admitan.
- GIF o JPEG: Menos habituales, pero pueden funcionar si tienen el tamaño adecuado.
Buena práctica: Usa .ico para obtener la máxima compatibilidad o .png para una visualización de mayor calidad.
¿Qué tamaño debe tener mi favicon?
El tamaño recomendado del favicon depende de dónde se vaya a mostrar. Estas son las dimensiones más habituales:
- Favicon estándar del navegador: 16 × 16 píxeles
- Navegadores de alta resolución y pantallas Retina: 32 × 32, 48 × 48 o incluso 512 × 512 píxeles
- Iconos de aplicaciones (PWA y móviles): Tamaños como 180 × 180 píxeles para los iconos táctiles de Apple, o más grandes (1024 × 1024) para las plataformas Android
Para garantizar la compatibilidad entre dispositivos, sube una imagen de 512 × 512 píxeles al usar el personalizador de WordPress. WordPress se encargará de cambiar el tamaño para distintos ajustes.
¿Afecta mi favicon al SEO en WordPress?
Tu favicon no es un factor de posicionamiento directo, pero puede mejorar el aspecto de tu sitio en los resultados de búsqueda, lo que con el tiempo puede ayudar a aumentar la tasa de clics y la confianza de los usuarios.
¿Se admiten favicons SVG en WordPress?
WordPress no permite subir archivos SVG de forma predeterminada por motivos de seguridad, pero puedes habilitarlos mediante código personalizado o plugins de confianza; aun así, pruébalos con cuidado, porque no todos los navegadores tratan los favicons SVG de la misma manera.
Jetpack 