Change WordPress Login Logo with Security in Mind

Customizing the WordPress login page is a simple way to improve branding and give a more professional feel to your website. In this example, I replaced the default WordPress logo with the site’s favicon while keeping performance and security in mind.

To optimize performance, I used WordPress transients to cache the favicon URL. This avoids repeated function calls and reduces server load. For security, the URL is sanitized using esc_url() to prevent potential XSS vulnerabilities.

I also updated the login logo link so that it redirects users to the homepage instead of WordPress.org, ensuring a consistent brand experience. Since this code only runs on the login page, it has no impact on frontend performance.

Below is the implementation:

function optimized_secure_login_logo() {
    // Speed optimization: Cache the favicon URL
    $favicon_url = get_transient('custom_login_favicon_url');

    if (false === $favicon_url) {
        $favicon_url = get_site_icon_url();
        set_transient('custom_login_favicon_url', $favicon_url, DAY_IN_SECONDS);
    }

    if ($favicon_url) {
        // Security: Sanitize the URL to prevent XSS attacks
        $clean_url = esc_url($favicon_url);
        
        echo '<style type="text/css">
            body.login h1 a {
                background-image: url(' . $clean_url . ') !important;
                height: 50px !important;
                width: 100% !important;
                background-size: contain !important;
                background-position: center bottom !important;
                background-repeat: no-repeat !important;
                padding-bottom: 10px !important;
            }
        </style>';
    }
}
add_action('login_enqueue_scripts', 'optimized_secure_login_logo');

// Improve branding: Change login logo URL and title
add_filter('login_headerurl', function() { return home_url(); });
add_filter('login_headertext', function() { return get_bloginfo('name'); });