How to Change the WordPress Login Logo: Plugin, Code, and CSS Methods

The WordPress login page displays the default WordPress logo by default — a generic branding element that has no place on a professional or client-facing site. Replacing it with your own logo takes under five minutes and requires no deep technical knowledge, yet the impact on brand consistency is immediate. This guide covers three production-ready methods: a GUI-based plugin approach, direct functions.php injection, and a standalone custom CSS plugin — each with the exact code, file paths, and edge cases you need to implement it correctly the first time.

Why the Default Login Logo Matters More Than You Think

Every time a team member, client, or administrator navigates to /wp-login.php, they see a WordPress logo. On a white-label agency build, a SaaS platform, or a multi-tenant WordPress installation, that default branding actively undermines the professional image you have built everywhere else on the site.

Beyond aesthetics, a custom login logo serves a subtle but real security function: it signals to your users that they are on a legitimate, controlled environment — not a phishing clone of the standard WordPress login screen. When you host WordPress on a VPS Hosting environment with root access, you have full control over every layer of this customization, from file permissions to theme deployment, without restrictions imposed by shared environments.

Comparison of the Three Customization Methods

The key architectural distinction: methods that rely on a parent theme's functions.php will be overwritten on every theme update. Always use a child theme for any direct file modification.

Method 1: Using a Plugin

This is the safest path for non-developers and the fastest path for anyone who needs a working result in under three minutes.

Step 1: Install and Activate LoginPress

1. Log in to your WordPress dashboard.
2. Navigate to Plugins > Add New.
3. Search for LoginPress or Custom Login Page Customizer.
4. Click Install Now, then Activate.

Both plugins are actively maintained, have large install bases, and expose their settings through the native WordPress Customizer — meaning no unfamiliar UI to learn.

Step 2: Upload and Configure Your Logo

1. Go to LoginPress > Customizer (or Appearance > Login Customizer depending on the plugin).
2. Locate the Logo section in the left-hand panel.
3. Click Select Image and upload your logo from the Media Library or your local machine.
4. Adjust width, height, and padding using the plugin's live preview controls.
5. Click Publish.

Edge case: If your logo appears blurry on high-DPI (Retina) displays, upload an image that is exactly 2x your intended display size and constrain it via CSS width rather than relying on the plugin's pixel dimensions. For example, if you want a 250px-wide logo, upload a 500px-wide PNG and set the display width to 250px.

Method 2: Manual Code in functions.php (Advanced)

This method gives you precise control over every CSS property — positioning, link behavior, hover states — without installing an additional plugin. It is the preferred approach for developers building custom themes or maintaining a lean plugin footprint.

Step 1: Create or Access a Child Theme

Never edit a parent theme's functions.php directly. If you have not already created a child theme, do so before proceeding. On a VPS with cPanel or any server with SSH access, you can create the child theme directory and required files manually.

From your WordPress dashboard, navigate to Appearance > Theme File Editor and select your child theme's functions.php.

Step 2: Add the Login Logo Hook

Add the following code block to your child theme's functions.php:

/**
 * 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' );

Critical detail: The original source code in many tutorials targets only #login h1 a. Since WordPress 5.x, the login page wrapper also carries the class .login, so targeting both selectors ensures compatibility across all WordPress versions and any future structural changes.

Step 3: Upload Your Logo File

Using an FTP client, your hosting file manager, or SSH, upload your logo to the child theme's images/ directory:

# 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/

The file path in the PHP function uses get_stylesheet_directory_uri(), which always resolves to the active theme's root URI — confirming why the child theme is mandatory here. If you use the parent theme's directory function get_template_directory_uri() by mistake, the path will break whenever you switch or update the parent.

Step 4: Customize the Logo Link and Tooltip

By default, the login logo links back to wordpress.org. You almost certainly want it to point to your own homepage. Add these two additional hooks in the same functions.php file:

// 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' );

This is a detail the majority of tutorials omit entirely. If your client clicks the logo on the login page and lands on wordpress.org, that is a professional failure. These two filters close that gap.

Step 5: Save and Verify

Click Update File in the Theme File Editor, or save via your text editor if working over SSH/SFTP. Navigate to yourdomain.com/wp-login.php in a private browser window to verify the result without cached assets interfering.

Method 3: Custom CSS Plugin (No functions.php Required)

If you are working on a client site where editing theme files is risky, or you are using a third-party theme you cannot safely extend with a child theme, a dedicated CSS plugin is the cleanest solution.

Step 1: Install Simple Custom CSS and JS

1. Go to Plugins > Add New.
2. Search for Simple Custom CSS and JS (or the lighter Simple Custom CSS).
3. Install and activate.

Step 2: Add the Login Page CSS

Navigate to Custom CSS and JS > Add Custom CSS and insert the following:

/* 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;
}

Replace the URL with the direct path to your uploaded logo. The most reliable source is the Media Library: open your logo in the Media Library, copy the File URL from the attachment details panel, and paste it directly into the CSS rule.

Pitfall to avoid: Do not use a relative URL here (e.g., /wp-content/uploads/logo.png). If WordPress is installed in a subdirectory, relative paths will break silently. Always use the absolute URL from the Media Library.

Set the Where option to Frontend or Login Page if the plugin supports page-specific targeting, to avoid loading unnecessary CSS on every public page.

Logo Image Specifications and Best Practices

File format: Use PNG with a transparent background. JPEG compression artifacts are visible against the login page's light gray background. SVG is supported in modern browsers but requires additional CSS (background-size: auto behaves differently for SVGs) and may cause rendering inconsistencies on older setups.

Dimensions: The WordPress login form container is 320px wide. A logo of 250 x 80px fits cleanly within that constraint. For Retina/HiDPI screens, export at 500 x 160px and constrain display size via CSS width: 250px; height: 80px.

File size: Keep the logo under 50KB. The login page is a high-frequency access point — every admin, editor, and contributor loads it. A bloated image file adds unnecessary latency, particularly on servers with limited I/O bandwidth.

Color contrast: The default login page background is #f0f0f1. Test your logo against this exact hex value before deploying. A white logo on a white background is invisible — a mistake that is embarrassingly common on rushed deployments.

Responsive behavior: Add max-width: 100% to the logo anchor to prevent overflow on mobile screens narrower than 320px. The WordPress login page is not fully responsive by default, but this single rule prevents horizontal scrolling on small viewports.

Hosting Environment Considerations

The method you choose is partly determined by your hosting environment. On a Dedicated Server, you have unrestricted SSH access and can deploy child themes, manage file permissions, and automate logo updates via deployment scripts. On Shared Web Hosting, you are typically limited to the file manager and the WordPress dashboard — making the plugin method or the Custom CSS plugin the only practical options.

For teams managing multiple WordPress installations, consider using WP-CLI to automate logo updates across sites:

# 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

If your WordPress site handles user registrations, client portals, or e-commerce logins, pairing a branded login page with a valid SSL Certificate is non-negotiable. The login page transmits credentials — HTTPS is the baseline, not an optional enhancement.

Decision Matrix: Which Method Should You Use

Use this checklist to select the right approach for your specific situation:

• You are a non-developer or building for a non-technical client — use Method 1 (LoginPress plugin). It is reversible, requires no code, and the plugin handles responsive behavior automatically.
• You are a developer maintaining a custom child theme — use Method 2 (functions.php). It adds zero plugin overhead and gives you full CSS control, including the logo link URL fix.
• You need to customize a third-party theme without a child theme — use Method 3 (Custom CSS plugin). It is isolated from theme updates and easy to remove.
• You are managing multiple sites — combine Method 2 with a site-specific child theme per client, deployed via Git or WP-CLI for consistency.
• Your logo appears blurry on Retina displays — regardless of method, upload a 2x resolution image and constrain its display size via CSS width and height properties.
• The logo link still points to wordpress.org after customization — add the login_headerurl and login_headertext filters from Method 2, even if you used a plugin for the image itself.

FAQ

Does changing the login logo affect WordPress security?

No, replacing the logo image has no impact on authentication security. However, a custom login logo can reduce the visual effectiveness of generic WordPress phishing pages targeting your users, since attackers typically clone the default WordPress login appearance. For actual security hardening, combine this with two-factor authentication, login attempt limiting, and HTTPS enforcement.

Will the custom login logo break after a WordPress core update?

Core updates do not touch theme files or plugin data. If you used Method 2 with a child theme, your changes are fully insulated from both core and parent theme updates. If you edited a parent theme's functions.php directly, a theme update will overwrite your code — which is why the child theme requirement is non-negotiable.

What is the correct hook for injecting CSS on the WordPress login page?

Use login_enqueue_scripts. This action fires specifically on the login page before styles are rendered, making it the correct and officially documented hook for this purpose. Using wp_enqueue_scripts will not work on the login page — it only fires on the front end.

Can I use an SVG file as the login logo?

Yes, but with caveats. WordPress blocks SVG uploads by default for security reasons (SVGs can contain executable JavaScript). You need to either use a plugin like Safe SVG to enable SVG uploads, or reference the SVG via a hardcoded absolute URL in your CSS. Additionally, set background-size: auto or explicit pixel dimensions, as SVG scaling behavior differs from raster images.

My logo is not appearing after following these steps — what should I check?

First, hard-reload the login page with Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac) to bypass browser cache. Second, verify the image URL is publicly accessible by pasting it directly into a browser tab. Third, open browser DevTools on the login page, inspect the #login h1 a element, and check whether your CSS rule is being applied or overridden by another stylesheet. Fourth, confirm the file was uploaded to the correct directory and that the file name in your code exactly matches the uploaded file name, including case sensitivity — Linux servers treat Logo.png and logo.png as different files.