Si alguna vez has instalado un tema premium pesado de WordPress, has subido el icono de tu sitio a través del Personalizador y aún así te has quedado mirando el logo genérico del autor del tema en la pestaña de Safari, no estás solo. Los desarrolladores de temas frecuentemente codifican su propia lógica de cabecera, anulando por completo la configuración central de WordPress. Es increíblemente frustrante.

Fíjate en GitHub. Su favicon cambia dinámicamente de negro a blanco dependiendo de la preferencia de modo oscuro de tu sistema operativo. Simplemente no puedes lograr ese nivel de detalle confiando en el cargador de imágenes básico de WordPress. Para obtener esa sensación nativa, similar a la de una aplicación, necesitamos sumergirnos en la personalización del favicon en temas de WordPress a nivel de código.

Recomiendo encarecidamente abandonar el Editor del Sitio integrado para los favicons si deseas características modernas como el soporte SVG. Codificar tu stack de iconos a través del functions.php de un tema hijo (child theme) es más rápido, más limpio y evita que las actualizaciones del tema borren tu marca.

Requisitos previos para cambios a nivel de tema

Antes de empezar a modificar archivos PHP, asegúrate de tener un tema hijo activo. Si editas el tema padre directamente, tus iconos personalizados desaparecerán la próxima vez que hagas clic en actualizar. También necesitarás acceso FTP o un plugin de administrador de archivos para subir tus archivos de imagen en bruto directamente al servidor.

Implementación paso a paso

1. Elimina la salida por defecto del tema

Primero, necesitamos evitar que WordPress y tu tema inyecten el PNG predeterminado de 512x512. Si omites esto, los navegadores descargarán múltiples iconos y a menudo elegirán el equivocado. Abre el functions.php de tu tema hijo y añade esta función para desenganchar (unhook) el código.

add_action('init', function() {
    remove_action('wp_head', 'wp_site_icon', 99);
});

Esta única línea elimina la lógica predeterminada del icono del sitio de WordPress. (Si prefieres el cargador estándar, consulta nuestra guía básica de favicon para WordPress, pero te perderás las funciones modernas de SVG).

2. Genera el stack de iconos moderno

No necesitas 15 tamaños de iconos diferentes en 2026. Solo necesitas tres archivos: un SVG para navegadores modernos, un PNG de 180x180 para dispositivos Apple y un ICO de 32x32 como respaldo. Pasa tu logo por Mzu favicondl para generar estos formatos exactos. Para soportar el modo oscuro, abre tu SVG descargado en un editor de texto y añade una media query CSS dentro de la etiqueta <style>. Sube estos tres archivos a una carpeta llamada /assets/ dentro de tu tema hijo.

3. Inyecta el código personalizado

Ahora, inyectamos nuestro HTML optimizado directamente en el hook wp_head. Esto garantiza que nuestros iconos se carguen exactamente como queremos, eludiendo cualquier código descuidado del tema.

add_action('wp_head', 'custom_theme_favicon_stack');
function custom_theme_favicon_stack() {
    $theme_dir = get_stylesheet_directory_uri();
    echo "<link rel='icon' href='" . $theme_dir . "/assets/favicon.svg' type='image/svg+xml'>\n";
    echo "<link rel='apple-touch-icon' href='" . $theme_dir . "/assets/apple-touch-icon.png'>\n";
    echo "<link rel='alternate icon' href='" . $theme_dir . "/assets/favicon.ico'>\n";
}

¿Notas cómo usamos get_stylesheet_directory_uri()? Esto asegura que la ruta siempre apunte a tu tema hijo, incluso si migras tu sitio a un nuevo dominio.

4. Manejo de temas de bloques (FSE)

Si estás utilizando un tema moderno de Edición Completa del Sitio (FSE) como Twenty Twenty-Four, las reglas cambian ligeramente. Los temas de bloques a menudo definen la cabecera en parts/header.html. Aunque el hook wp_head sigue funcionando, algunos temas de bloques imponen agresivamente el bloque de Logo del Sitio. Si tu código es ignorado, es posible que debas abrir el Editor del Sitio, eliminar el bloque del Logo del Sitio por completo y confiar puramente en nuestra inyección PHP.

Errores comunes a evitar

Reflexiones finales

Tomar el control de la personalización del favicon de tu tema de WordPress separa las construcciones profesionales de las configuraciones de aficionados. Confiar en la configuración predeterminada del tema a menudo resulta en un HTML inflado y en la falta de soporte para el modo oscuro. Al inyectar un stack limpio de tres archivos a través de tu tema hijo, garantizas que tu sitio se vea nativo en todos los dispositivos.