How do I set the theme logo?

Question

How can I set the logo in my custom theme in Drupal 8?

I can see that Drupal looks for the logo.svg file. I have a PNG logo.png file that I used in Drupal 7 and I would like to re-use it. I cannot set the logo as a theme setting as in Drupal 7.

Is there a way through UI or custom code in the theme to set the logo?

Answer 1

After Drupal 8.6.x

In your THEME.info.yml add a line like logo: logo.png. You need to clear cache for Drupal to detect this change.

Before Drupal 8.6.x

Default logo file has now become logo.svg in Drupal 8. However, to use logo.png or something else, you need to add custom settings definition in your theme. To do this, add the following lines to config/install/THEME.settings.yml file in your theme folder (replace THEME with your theme's machine name).

logo:
  path: 'themes/THEME/logo.png'
  use_default: false

After doing this, you must reinstall your theme if already installed. The file asks Drupal to install the given settings when the theme is installed. Hence, when you install the theme, the logo path parameter gets saved to the database and the default logo is disabled by the use_default parameter.

Answer 2

For regular themes, you can just go to the appearance page, go to the settings tab and deselect Use the logo supplied by the theme. The upload form that appears allows to upload another image instead.

If you are actually building the theme and want to supply a default image, please refer to one of the other answers.

Answer 3

As of Drupal 8.6 your contrib or custom theme (say it's called mythemename) can easily define the default logo in its mythemename.info.yml file:

logo: images/acme-logo-stacked.png

See https://www.drupal.org/docs/8/theming-drupal-8/defining-a-theme-with-an-infoyml-file#logo

Note that to be used the logo use_default setting must be true.

Answer 4

In the MYTHEME.theme file of your theme, add the following code.

/**
 * Implements hook_preprocess_HOOK() for block templates.
 */

function MYTHEME_preprocess_block(&$variables) {
  switch ($variables['base_plugin_id']) {
    case 'system_branding_block':
      $variables['site_logo'] = '';
      if ($variables['content']['site_logo']['#access'] && $variables['content']['site_logo']['#uri']) {
        $variables['site_logo'] = str_replace('.svg', '.png', $variables['content']['site_logo']['#uri']);
      }
      break;

  }
}

Put the logo file in the MYTHEME directory. Replace MYTHEME with the machine name of your theme.

Answer 5

In Drupal 8, the default logo needs to be a SVG file. You can still use a PNG file with a custom logo, or if the theme has extra custom settings to give support to non-SVG default logos.

This is what reported in The default logo type for themes is SVG, a change record for Drupal 8.0.0-beta5.

As reported in the comment, you could also use the following in the theme settings file.

logo:
  path: 'themes/THEME_NAME/logo.png'
  use_default: false

This would automatically use a custom logo without setting it from the UI.

Answer 6

In /your-drupal-folder/themes/THEME.theme file add this:

function THEME_preprocess_page(&$variables) {
  global $base_url, $base_path;
  $variables['logo'] = $base_url . $base_path . drupal_get_path('theme','THEME') . '/logo.svg';

  ##Uncomment this if you want to use png instead of svg image
  #$variables['logo'] = str_replace('.svg', '.png', $variables['logo']);
}

Answer 7

In Drupal 8.6 this can be set in your .info.yml file as follows:

logo: 'images/MY_THEME_LOGO.png'

the theme path is automatically added to the src path

Answer 8

I don't think you need to change the code. In some cases, Global settings might be stopping you to take the respective theme logo. Hence, make sure LOGO IMAGE of Global Settings and your theme logo should be same in Drupal 8(Some cases).

Answer 9

A simple option is to place the logo in a custom block.

/admin/structure/block/block-content

this is flexible and particularely useful if u want that logo to show up sowehat different in other sections of the site