Si alguna vez has subido un PNG perfecto de 512x512 al Personalizador de WordPress, le has dado a publicar y has visto cómo la pestaña de tu navegador se niega a actualizarse, no estás solo. Ese icono genérico del globo terráqueo gris es la pesadilla de muchos lanzamientos de sitios web. Vemos este problema constantemente. Quieres que tu pestaña luzca tan profesional como el icono nítido de Stripe, pero en lugar de eso, WordPress parece ignorar tu archivo por completo.
Vamos directamente a la solución más rápida para el favicon de WordPress que no se muestra. En el 90% de los casos, tu tema realmente actualizó el icono, pero tu navegador o plugin de caché se aferra obstinadamente al antiguo.
Antes de tocar el código, abre tu sitio en una ventana de incógnito. Si el icono aparece ahí, tu navegador es el culpable. Si sigue roto, ve a tu plugin de caché (WP Rocket, LiteSpeed, etc.) y purga toda la caché. Los navegadores almacenan en caché los favicons de forma muy agresiva, y los plugins de WP toman instantáneas de la sección head de tu HTML.
Por qué WordPress pierde tu Favicon
Si purgar la caché no funcionó, necesitamos ver cómo maneja WordPress los iconos del sitio en 2026. La plataforma ha evolucionado, y los métodos antiguos a menudo fallan bajo configuraciones modernas.
Primero, considera la transición a la Edición Completa del Sitio (FSE). En los temas de bloques modernos, el antiguo Personalizador (Apariencia > Personalizar > Identidad del sitio) a veces entra en conflicto con el bloque de Logotipo del Sitio en el nuevo Editor. Si configuras el icono en el Personalizador pero tu tema de bloques anula la cabecera, el icono se pierde.
Segundo, tenemos fallos en el procesamiento de imágenes. Cuando subes una imagen, WordPress usa las bibliotecas PHP de tu servidor para generar versiones recortadas (como 32x32). Si tu servidor se queda sin memoria durante este proceso, WP falla silenciosamente. Guarda el archivo pero nunca inyecta las etiquetas link en tu HTML.
La solución definitiva para el Favicon de WordPress
Cuando la interfaz nativa de WordPress te falla, es hora de tomar el control manualmente. Depender de la herramienta de recorte integrada es arriesgado de todos modos.
1. Evita el Personalizador con Código
La solución más fiable es evitar la función de Icono del Sitio de WordPress por completo. Puedes inyectar las etiquetas HTML exactas directamente en la cabecera de tu tema.
Primero, genera un conjunto adecuado de iconos usando Mzu favicondl. Descarga los archivos resultantes y súbelos directamente a tu directorio wp-content/uploads de WordPress vía FTP o la Biblioteca de Medios.
A continuación, añade este fragmento al archivo functions.php de tu tema hijo o a un plugin de fragmentos de código:
add_action('wp_head', 'manual_favicon_injection');
function manual_favicon_injection() {
echo "<link rel='icon' type='image/svg+xml' href='/wp-content/uploads/favicon.svg'>\n";
echo "<link rel='icon' type='image/png' sizes='32x32' href='/wp-content/uploads/favicon-32x32.png'>\n";
echo "<link rel='apple-touch-icon' href='/wp-content/uploads/apple-touch-icon.png'>\n";
}Este código obliga a WordPress a emitir las rutas exactas de tus iconos. Evita cualquier conflicto de temas y garantiza que el navegador reciba las instrucciones correctas.
2. La cadena de consulta para romper la caché
Si aplicaste el código anterior y Chrome sigue mostrando el icono antiguo, estás luchando contra la base de datos SQLite interna de Chrome. Chrome rara vez comprueba si hay iconos nuevos a menos que cambie la URL.
Podemos forzar una actualización añadiendo una cadena de consulta de versión a la ruta del archivo.
add_action('wp_head', 'versioned_favicon_injection');
function versioned_favicon_injection() {
$ver = '1.2'; // Cambia este número para forzar la actualización
echo "<link rel='icon' href='/wp-content/uploads/favicon.svg?v=" . $ver . "'>\n";
}Cuando Chrome ve ?v=1.2, lo trata como un archivo completamente nuevo y lo descarga inmediatamente.
3. Arreglar la sincronización del bloque de Logotipo
Si estás usando un tema de bloques moderno (como Twenty Twenty-Four), revisa tu Editor del Sitio. Ve a Apariencia > Editor.
Haz clic en la plantilla de tu cabecera y selecciona el bloque de Logotipo del Sitio. En la barra lateral de configuración, busca el interruptor que dice 'Usar como icono del sitio'. Si está desactivado, WordPress podría ignorar tu imagen subida para la pestaña del navegador. Actívalo, guarda la plantilla y purga tu caché.
4. Comprueba los permisos de la carpeta Uploads
A veces el problema no es el código, sino la configuración de tu servidor. Si tu carpeta wp-content/uploads tiene permisos estrictos (como 700 en lugar de 755), tu navegador podría estar bloqueado para leer las imágenes.
- Abre las herramientas de desarrollador de tu navegador (F12).
- Ve a la pestaña Red (Network) y recarga.
- Si la URL de tu favicon devuelve un error 403 Forbidden, actualiza los permisos de la carpeta vía FTP.
Previniendo futuros desastres de iconos
Deja de depender de WordPress para redimensionar un enorme PNG de 512x512 en un icono nítido de 16x16. Los algoritmos de redimensionamiento PHP integrados priorizan la velocidad sobre la calidad, lo que a menudo resulta en pestañas borrosas.
En su lugar, prepara tus activos antes de subirlos. Usa una herramienta dedicada para crear un favicon ICO de múltiples tamaños y un SVG escalable.
Para profundizar en la mecánica general de los iconos del sitio, echa un vistazo a nuestra guía sobre cómo añadir un favicon en WordPress. Pero si te apegas al método de inyección manual anterior, rara vez tendrás que volver a solucionar un problema de icono faltante.