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 }}
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 %}

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


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.


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


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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