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

8 Answers 8

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;

Example for Drupal 10 get URL logo

for file .theme add next lines

function theme_preprocess(&$variables) {
 // Get the admin logo path from the theme settings.
 $path_logo_admin = theme_get_setting('logo.url');
 // Pass the path of the admin logo to the template.
 $variables['logo_path'] = $path_logo_admin;

for twig file

<img class="text-white mr-3 logo" src="{{ logo_path }}" alt="Description" >

Your Answer

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

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