how can i show site logo, name and slogan Separately in custom area in my site theme, I now use this code to display theme, buts this code don't allow me to edit each of them Separately.

{{ page.header }}

7 Answers 7

function mytheme_preprocess_page(&$variables) {
  $site_config = \Drupal::config('system.site');
  $variables['site_name'] = $site_config->get('name');
  $variables['site_slogan'] = $site_config->get('slogan');

  // logo needs to be placed within specified folder
  $variables['logopath'] = file_url_transform_relative(file_create_url(theme_get_setting('logo.url')));


Then in page.html.twig you can use variables site_name and site_slogan as follows:

{{ site_name }}
{{ site_slogan }}

and for the logo:

<img src="{{ logopath }}" />

note: logo image file will need to be available in your current theme's root folder (or subfolder of your choice).


If you use {{ page.header }} to get the site logo and name, then you have a branding block in the region header.

To change how this block is rendered, you can copy the twig into your theme template folder and change the markup:


{% extends "block.html.twig" %}
 * @file
 * Theme override for a branding block.
 * Each branding element variable (logo, name, slogan) is only available if
 * enabled in the block configuration.
 * Available variables:
 * - site_logo: Logo for site as defined in Appearance or theme settings.
 * - site_name: Name for site as defined in Site information settings.
 * - site_slogan: Slogan for site as defined in Site information settings.
{% block content %}
  {% if site_logo %}
    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
      <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
  {% endif %}
  {% if site_name %}
    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
  {% endif %}
  {{ site_slogan }}
{% endblock %}

If the logo is provided by the custom theme, I will simply use in my twig:

<img src="{{ directory ~ '/logo.svg' }}" width="220px" />

directory will lead to the current theme path instead of hooking.


theme_get_setting('logo.url') was the best option for me as \Drupal::theme()->getActiveTheme()->getLogo() doesn't return the right file name. I've got the default file name logo.svg instead.

I'm using a subtheme of Bootstrap barrio 5.1.4.

Figuring out in getActiveTheme() method : in my case $theme->info['logo'] returns NULL


You can also get the active theme's logo path by using the theme manager service.


Add as separate blocks configured to only display the required item for which there is a checkbox to do so.


It works on Drupal 9.

$host = \Drupal::request()->getSchemeAndHttpHost();
// Get a setting from theme.
$logo_url = \Drupal::theme()->getActiveTheme()->getLogo();
$logo = $host .'/'. $logo_url;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.