WordPress Logo

Add a Custom Login Logo to WordPress

Below is all you need to customise the login page of WordPress. Add it to the bottom of your functions.php.

/**
 * Custom Login Logo for WordPress
 */

add_filter( 'login_headerurl', 'tsg_login_headerurl' );
add_filter( 'login_headertext', 'tsg_login_headertext' );
add_filter( 'site_icon_image_sizes', 'tsg_site_icon_image_sizes' );
add_action( 'login_enqueue_scripts', 'tsg_login_enqueue_scripts' );

function tsg_login_headerurl()
{
    return get_bloginfo( 'url' );
}

function tsg_login_headertext()
{
    return get_bloginfo( 'name', 'display' );
}

function tsg_site_icon_image_sizes( $sizes )
{
    $sizes[] = 140;
    
    return $sizes;
}

function tsg_login_enqueue_scripts()
{
    ?>
    <style type="text/css">
        body.login div#login h1 a {
            height: 140px;
            width: 320px;
            background-image: url(<?php echo get_site_icon_url( 140, get_bloginfo( 'template_url' ) . '/images/login-logo.png' ); ?>);
            background-size: contain;
        }
    </style>
    <?php
}

There are plugins available that perform this task for you, but I don’t think it’s necessary to add a plugin just for this.

Transparent PNG format images work best.

Update 2017

I have upgraded this script to use the Site Icon. You just need to upload your image using Appearance > Customise > Site Identity.

Update 2019

WordPress deprecated ‘login_headertitle’ in favour of ‘login_headertext’.