Insert logo via Customizer

In order to upload and change your own logo via WordPress customizer, two basic template changes are required. The logo functionality must be added in the theme functions.php file. Then the logo can be retrieved via WordPress’ own function get_custom_logo( ).

Enable Logo Function

To activate the logo function in the WordPress theme, the following code must be added to the active functions.php file:

function themename_custom_logo_setup() {
    $defaults = array(
        'height'               => 100,
        'width'                => 400,
        'flex-height'          => true,
        'flex-width'           => true,
        'header-text'          => array( 'site-title', 'site-description' ),
        'unlink-homepage-logo' => true, 
    );
    add_theme_support( 'custom-logo', $defaults );
}
add_action( 'after_setup_theme', 'themename_custom_logo_setup' );

This code tells WordPress that this theme supports the logo function. In addition to the height and width of the logo to be displayed, the title and text are also defined if no logo has been uploaded.

The logo can be uploaded and selected under “Appearance” -> “Header”.

Insert custom logo in header file

To insert the logo on the website, add the following code to the header.php file:

if ( function_exists( 'the_custom_logo' ) ) {
    the_custom_logo();
}

This code checks whether the function the_custom_logo exists. If this is the case, the custom logo is insert and displayed as an HTML <img>-tag via the_custom_logo( ).

To gain more control over the embedded logo, for example to add own classes or ID, only the image URL can be output with the following code. The correct packaging of the URL must then be done by the user and could look like this:

$custom_logo_id = get_theme_mod( 'custom_logo' );
$logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
 
if ( has_custom_logo() ) {
    echo '<img src="' . esc_url( $logo[0] ) . '" alt="' . get_bloginfo( 'name' ) . '">';
} else {
    echo '<h1>' . get_bloginfo('name') . '</h1>';
}

If a custom logo has been uploaded to WordPress, the image is insert in an <img>-tag. If no logo is available, the blog name is output in an <h1>-tag instead.

Source: WordPress Codex