Define a custom logo
If we check out our new Juno theme, we’ll see that the Magento logo is loading. Let’s replace this with our custom logo.
Change logo in admin
We can actually do this in the admin. If we go to Content > Design > Themes, then click Edit in this first row, we’ll get sent to where we can configure this theme in the Admin. If we scroll down to Header and click this section, we’ll see that there’s an area to upload our logo.
When we upload a logo file here, the logo is uploaded to somewhere on the filesystem, and the resulting configuration is saved to the database.
You probably don’t want to do this though. If you ever want to redistribute your theme, customizations & changes done through the admin won’t persist when you package up your theme for distribution. It’s also hard to track changes made through the admin, because there is no real audit trail on these actions.
Because of this, the admin area to upload logos is typically reserved for the end-users of your custom theme. So once they install your distributed module, they can easily upload their logo in the admin to override your theme settings.
Change logo programmatically
The other way to change the logo of a custom theme is programmatically. This not only allows you to track changes to the theme over time, but also allow any assets, such as image files, to be redistributed to others if you were to ever package up your theme for sale or distribution. This is the method we will use for updating our theme logo.
I designed a logo for the Juno theme, and exported it as a PNG. If you need a copy of this logo file, I attached it to this lesson below this video. Feel free to save it and use this to test.
Our first step is to copy the logo to a new directory at web/images. We’ll also name it logo.png.
Magento still won’t know about our logo though. There is a specific “logo” block which controls the rendering of this logo image, and it looks at a specific argument value to determine which image to load.
We can override this setting by creating a new layout XML file. The module where this logo block is defined is the Magento_Theme logo. This module controls a lot of the various functionality and core aspects of themes. We’ll go over how we determined the Magento_Theme controls this logo file in a minute, but for now, let’s create a new Magento_Theme directory in our theme.
Next we will create a new layout directory within this Magento_Theme directory. Magento will look for this directory named layout when loading layout XML files.
And finally, we want our logo to be used on all Magento pages. Magento has very specific naming conventions for everything, and there is a special file we can create named default.xml which will load this layout XML for every single page in Magento. We’ll cover this in greater detail later on in this course, but this it’s helpful to understand this right away to know what’s going on as we are building this out.
Let’s copy & paste the code below this lesson into this file. Don’t worry too much about what is going on, because we’ll cover all of it later, and you can even come back to this lesson in the future and you’ll then immediately realize what’s going on here. But let’s get this quick win to get this logo updated.
<?xml version="1.0"?>
<page xmlns:xsi="<http://www.w3.org/2001/XMLSchema-instance>" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo.svg</argument>
</arguments>
</referenceBlock>
</body>
</page>
To quickly summarize what’s going on here, we are referencing this logo block, hooking into this logo_file argument, and setting it’s value to images/logo.svg. By redefining the layout XML in our own custom theme, we are telling Magento to use our custom theme directory as the root directory for this logo image.
And when we refresh our page, the XML we defined will be merged in with all of the other layout files, and we’ll see our new logo. If we inspect the logo, we’ll notice that the width is 170px, and it is 49px high, even thought the height attribute isn’t set on this image.
There are two issues here: first is that we may want the logo to appear bigger or smaller than 170px, and the second is that not defining both width and height attributes on an image can attribute to jank, or content layout shift, also known as CLS. This can cause the page layout to jump around on the initial page load, and can negatively effect your Core Web Vitals scores.
Luckily, this is an easy fix. This block also looks for logo_width and logo_height arguments. So we can simply create these nodes to override the default values.
Let’s make the logo a bit smaller and set it to 150px by 61px.
<?xml version="1.0"?>
<page xmlns:xsi="<http://www.w3.org/2001/XMLSchema-instance>" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo.svg</argument>
<argument name="logo_width" xsi:type="string">150</argument>
<argument name="logo_height" xsi:type="string">61</argument>
</arguments>
</referenceBlock>
</body>
</page>
And when we refresh the page, we’ll see these changes take effect. And also if we check out the source, we’ll now see both width and height attributes set on this logo image, which will prefer any jank from occuring.
Now you know how to programmatically define a custom logo for your custom Magento 2 theme without having to manually edit theme settings from the admin.