Cómo cambiar el logo de inicio de sesión de WordPress: métodos con plugin, código y CSS

La página de inicio de sesión de WordPress muestra el logotipo predeterminado de WordPress por defecto — un elemento de marca genérico que no tiene lugar en un sitio profesional o orientado al cliente. Reemplazarlo con su propio logotipo toma menos de cinco minutos y no requiere conocimientos técnicos profundos, sin embargo, el impacto en la coherencia de marca es inmediato. Esta guía cubre tres métodos listos para producción: un enfoque de plugin basado en GUI, inyección directa de functions.php, y un plugin CSS personalizado independiente — cada uno con el código exacto, rutas de archivos y casos extremos que necesita para implementarlo correctamente la primera vez.

Por Qué el Logotipo de Inicio de Sesión Predeterminado Importa Más de lo que Cree

Cada vez que un miembro del equipo, cliente o administrador navega a /wp-login.php, ve un logotipo de WordPress. En una construcción de agencia de marca blanca, una plataforma SaaS, o una instalación de WordPress multi-inquilino, esa marca predeterminada socava activamente la imagen profesional que ha construido en todo el resto del sitio.

Más allá de la estética, un logotipo de inicio de sesión personalizado cumple una función de seguridad sutil pero real: señala a sus usuarios que están en un entorno legítimo y controlado — no en un clon de phishing de la pantalla de inicio de sesión estándar de WordPress. Cuando aloja WordPress en un entorno de VPS Hosting con acceso root, tiene control total sobre cada capa de esta personalización, desde los permisos de archivos hasta la implementación de temas, sin restricciones impuestas por entornos compartidos.

Comparación de los Tres Métodos de Personalización

La distinción arquitectónica clave: los métodos que dependen del functions.php de un tema padre serán sobrescritos en cada actualización del tema. Siempre use un tema hijo para cualquier modificación directa de archivos.

Método 1: Usar un Plugin

Este es el camino más seguro para no desarrolladores y el más rápido para cualquiera que necesite un resultado funcional en menos de tres minutos.

Paso 1: Instalar y Activar LoginPress

1. Inicie sesión en su panel de WordPress.
2. Navegue a Plugins > Añadir Nuevo.
3. Busque LoginPress o Custom Login Page Customizer.
4. Haga clic en Instalar Ahora, luego en Activar.

Ambos plugins se mantienen activamente, tienen grandes bases de instalación y exponen su configuración a través del Personalizador nativo de WordPress — lo que significa que no hay una interfaz desconocida que aprender.

Paso 2: Subir y Configurar su Logotipo

1. Vaya a LoginPress > Personalizador (o Apariencia > Personalizador de Inicio de Sesión según el plugin).
2. Localice la sección Logotipo en el panel izquierdo.
3. Haga clic en Seleccionar Imagen y suba su logotipo desde la Biblioteca de Medios o su máquina local.
4. Ajuste el ancho, alto y relleno usando los controles de vista previa en vivo del plugin.
5. Haga clic en Publicar.

Caso extremo: Si su logotipo aparece borroso en pantallas de alta DPI (Retina), suba una imagen que sea exactamente 2x su tamaño de visualización previsto y restrínjala mediante CSS width en lugar de depender de las dimensiones en píxeles del plugin. Por ejemplo, si desea un logotipo de 250px de ancho, suba un PNG de 500px de ancho y establezca el ancho de visualización en 250px.

Método 2: Código Manual en functions.php (Avanzado)

Este método le da control preciso sobre cada propiedad CSS — posicionamiento, comportamiento de enlaces, estados hover — sin instalar un plugin adicional. Es el enfoque preferido para desarrolladores que construyen temas personalizados o mantienen una huella de plugins reducida.

Paso 1: Crear o Acceder a un Tema Hijo

Nunca edite el functions.php de un tema padre directamente. Si aún no ha creado un tema hijo, hágalo antes de continuar. En un VPS con cPanel o cualquier servidor con acceso SSH, puede crear el directorio del tema hijo y los archivos requeridos manualmente.

Desde su panel de WordPress, navegue a Apariencia > Editor de Archivos del Tema y seleccione el functions.php de su tema hijo.

Paso 2: Añadir el Hook del Logotipo de Inicio de Sesión

Añada el siguiente bloque de código al functions.php de su tema hijo:

/**
 * Replace the default WordPress login logo with a custom image.
 * Hook: login_enqueue_scripts fires before the login page renders.
 */
function custom_login_logo() { ?>
    <style type="text/css">
        #login h1 a,
        .login h1 a {
            background-image: url('<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/custom-logo.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: 250px;
            height: 80px;
            display: block;
            margin: 0 auto 20px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_logo' );

Detalle crítico: El código fuente original en muchos tutoriales apunta solo a #login h1 a. Desde WordPress 5.x, el contenedor de la página de inicio de sesión también lleva la clase .login, por lo que apuntar a ambos selectores garantiza la compatibilidad con todas las versiones de WordPress y cualquier cambio estructural futuro.

Paso 3: Subir su Archivo de Logotipo

Usando un cliente FTP, el administrador de archivos de su hosting, o SSH, suba su logotipo al directorio images/ del tema hijo:

# Example using scp from your local machine to the server
scp /local/path/custom-logo.png user@your-server-ip:/var/www/html/wp-content/themes/your-child-theme/images/

La ruta del archivo en la función PHP usa get_stylesheet_directory_uri(), que siempre resuelve al URI raíz del tema activo — confirmando por qué el tema hijo es obligatorio aquí. Si usa la función de directorio del tema padre get_template_directory_uri() por error, la ruta se romperá cada vez que cambie o actualice el padre.

Paso 4: Personalizar el Enlace y el Tooltip del Logotipo

Por defecto, el logotipo de inicio de sesión enlaza de vuelta a wordpress.org. Casi con certeza querrá que apunte a su propia página de inicio. Añada estos dos hooks adicionales en el mismo archivo functions.php:

// Change the login logo link URL
function custom_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

// Change the login logo link title attribute
function custom_login_logo_url_title() {
    return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'custom_login_logo_url_title' );

Este es un detalle que la mayoría de los tutoriales omiten por completo. Si su cliente hace clic en el logotipo en la página de inicio de sesión y llega a wordpress.org, eso es un fallo profesional. Estos dos filtros cierran esa brecha.

Paso 5: Guardar y Verificar

Haga clic en Actualizar Archivo en el Editor de Archivos del Tema, o guarde mediante su editor de texto si trabaja por SSH/SFTP. Navegue a yourdomain.com/wp-login.php en una ventana de navegación privada para verificar el resultado sin que los activos en caché interfieran.

Método 3: Plugin CSS Personalizado (Sin functions.php Requerido)

Si está trabajando en un sitio de cliente donde editar archivos del tema es arriesgado, o está usando un tema de terceros que no puede extender de forma segura con un tema hijo, un plugin CSS dedicado es la solución más limpia.

Paso 1: Instalar Simple Custom CSS and JS

1. Vaya a Plugins > Añadir Nuevo.
2. Busque Simple Custom CSS and JS (o el más ligero Simple Custom CSS).
3. Instale y active.

Paso 2: Añadir el CSS de la Página de Inicio de Sesión

Navegue a Custom CSS and JS > Añadir CSS Personalizado e inserte lo siguiente:

/* Target the login logo anchor on the WordPress login page */
#login h1 a,
.login h1 a {
    background-image: url('https://yourdomain.com/wp-content/uploads/your-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    width: 250px;
    height: 80px;
    display: block;
    margin: 0 auto 20px;
}

Reemplace la URL con la ruta directa a su logotipo subido. La fuente más confiable es la Biblioteca de Medios: abra su logotipo en la Biblioteca de Medios, copie la URL del Archivo del panel de detalles del adjunto y péguela directamente en la regla CSS.

Error a evitar: No use una URL relativa aquí (p. ej., /wp-content/uploads/logo.png). Si WordPress está instalado en un subdirectorio, las rutas relativas fallarán silenciosamente. Siempre use la URL absoluta de la Biblioteca de Medios.

Establezca la opción Dónde en Frontend o Página de Inicio de Sesión si el plugin admite orientación específica por página, para evitar cargar CSS innecesario en cada página pública.

Especificaciones de Imagen del Logotipo y Mejores Prácticas

Formato de archivo: Use PNG con fondo transparente. Los artefactos de compresión JPEG son visibles contra el fondo gris claro de la página de inicio de sesión. SVG es compatible con navegadores modernos pero requiere CSS adicional (background-size: auto se comporta de manera diferente para SVGs) y puede causar inconsistencias de renderizado en configuraciones más antiguas.

Dimensiones: El contenedor del formulario de inicio de sesión de WordPress tiene 320px de ancho. Un logotipo de 250 x 80px encaja limpiamente dentro de esa restricción. Para pantallas Retina/HiDPI, exporte a 500 x 160px y restrinja el tamaño de visualización mediante CSS width: 250px; height: 80px.

Tamaño de archivo: Mantenga el logotipo por debajo de 50KB. La página de inicio de sesión es un punto de acceso de alta frecuencia — cada administrador, editor y colaborador la carga. Un archivo de imagen voluminoso añade latencia innecesaria, particularmente en servidores con ancho de banda de I/O limitado.

Contraste de color: El fondo predeterminado de la página de inicio de sesión es #f0f0f1. Pruebe su logotipo contra este valor hexadecimal exacto antes de implementarlo. Un logotipo blanco sobre un fondo blanco es invisible — un error vergonzosamente común en implementaciones apresuradas.

Comportamiento responsivo: Añada max-width: 100% al ancla del logotipo para evitar desbordamiento en pantallas móviles más estrechas que 320px. La página de inicio de sesión de WordPress no es completamente responsiva por defecto, pero esta única regla evita el desplazamiento horizontal en viewports pequeños.

Consideraciones del Entorno de Hosting

El método que elija está determinado en parte por su entorno de hosting. En un Servidor Dedicado, tiene acceso SSH sin restricciones y puede implementar temas hijo, gestionar permisos de archivos y automatizar actualizaciones de logotipos mediante scripts de implementación. En Hosting Web Compartido, generalmente está limitado al administrador de archivos y al panel de WordPress — haciendo que el método de plugin o el plugin CSS personalizado sean las únicas opciones prácticas.

Para equipos que gestionan múltiples instalaciones de WordPress, considere usar WP-CLI para automatizar actualizaciones de logotipos en todos los sitios:

# Activate a child theme via WP-CLI
wp theme activate your-child-theme --path=/var/www/html

# Verify the active theme
wp theme status --path=/var/www/html

Si su sitio de WordPress gestiona registros de usuarios, portales de clientes o inicios de sesión de comercio electrónico, combinar una página de inicio de sesión con marca propia con un Certificado SSL válido es innegociable. La página de inicio de sesión transmite credenciales — HTTPS es la línea base, no una mejora opcional.

Matriz de Decisión: Qué Método Debe Usar

Use esta lista de verificación para seleccionar el enfoque correcto para su situación específica:

• Es un no desarrollador o está construyendo para un cliente no técnico — use el Método 1 (plugin LoginPress). Es reversible, no requiere código y el plugin gestiona el comportamiento responsivo automáticamente.
• Es un desarrollador que mantiene un tema hijo personalizado — use el Método 2 (functions.php). Añade cero sobrecarga de plugins y le da control CSS completo, incluida la corrección de la URL del enlace del logotipo.
• Necesita personalizar un tema de terceros sin un tema hijo — use el Método 3 (plugin CSS personalizado). Está aislado de las actualizaciones del tema y es fácil de eliminar.
• Está gestionando múltiples sitios — combine el Método 2 con un tema hijo específico por cliente, implementado mediante Git o WP-CLI para mayor consistencia.
• Su logotipo aparece borroso en pantallas Retina — independientemente del método, suba una imagen de resolución 2x y restrinja su tamaño de visualización mediante las propiedades CSS width y height.
• El enlace del logotipo sigue apuntando a wordpress.org después de la personalización — añada los filtros login_headerurl y login_headertext del Método 2, incluso si usó un plugin para la imagen en sí.

Preguntas Frecuentes

¿Cambiar el logotipo de inicio de sesión afecta la seguridad de WordPress?

No, reemplazar la imagen del logotipo no tiene impacto en la seguridad de autenticación. Sin embargo, un logotipo de inicio de sesión personalizado puede reducir la efectividad visual de las páginas de phishing genéricas de WordPress dirigidas a sus usuarios, ya que los atacantes típicamente clonan la apariencia predeterminada del inicio de sesión de WordPress. Para un endurecimiento real de la seguridad, combine esto con autenticación de dos factores, limitación de intentos de inicio de sesión y aplicación de HTTPS.

¿El logotipo de inicio de sesión personalizado se romperá después de una actualización del núcleo de WordPress?

Las actualizaciones del núcleo no tocan los archivos del tema ni los datos del plugin. Si usó el Método 2 con un tema hijo, sus cambios están completamente aislados de las actualizaciones del núcleo y del tema padre. Si editó el functions.php de un tema padre directamente, una actualización del tema sobrescribirá su código — por eso el requisito del tema hijo es innegociable.

¿Cuál es el hook correcto para inyectar CSS en la página de inicio de sesión de WordPress?

Use login_enqueue_scripts. Esta acción se activa específicamente en la página de inicio de sesión antes de que se rendericen los estilos, lo que la convierte en el hook correcto y oficialmente documentado para este propósito. Usar wp_enqueue_scripts no funcionará en la página de inicio de sesión — solo se activa en el frontend.

¿Puedo usar un archivo SVG como logotipo de inicio de sesión?

Sí, pero con advertencias. WordPress bloquea las subidas de SVG por defecto por razones de seguridad (los SVGs pueden contener JavaScript ejecutable). Necesita usar un plugin como Safe SVG para habilitar las subidas de SVG, o referenciar el SVG mediante una URL absoluta codificada en su CSS. Además, establezca background-size: auto o dimensiones explícitas en píxeles, ya que el comportamiento de escalado de SVG difiere de las imágenes rasterizadas.

Mi logotipo no aparece después de seguir estos pasos — ¿qué debo verificar?

Primero, recargue forzosamente la página de inicio de sesión con Ctrl+Shift+R (Windows/Linux) o Cmd+Shift+R (Mac) para omitir la caché del navegador. Segundo, verifique que la URL de la imagen sea públicamente accesible pegándola directamente en una pestaña del navegador. Tercero, abra las DevTools del navegador en la página de inicio de sesión, inspeccione el elemento #login h1 a y compruebe si su regla CSS se está aplicando o siendo anulada por otra hoja de estilos. Cuarto, confirme que el archivo fue subido al directorio correcto y que el nombre del archivo en su código coincide exactamente con el nombre del archivo subido, incluida la sensibilidad a mayúsculas y minúsculas — los servidores Linux tratan Logo.png y logo.png como archivos diferentes.