I am pretty new in magento. I have uploaded new store logo via backend. It looks fine on desktop/tablet version but look distorted on mobile version. Can we have separate store logo for mobile version, Or can we set different width/height for mobile version?

3 Answers 3


Magento uses a svg image by default. This should look fine on every device, even on devices with a high dppx. But your browser has to support svg images.

For as far as I know, Magento does not offer a solution to provide a different image or different dimensions for mobile from the backend. If the default solution doesn't suit you, you can add your own by modifying the logo.phtml file. This file should be added in your custom theme at /Magento_Theme/templates/html/header/logo.phtml.


If you've created a custom theme (which is recommended) find/create default.xml file under app/design/frontend///Magento_Theme/layout/ and add following code:

<referenceBlock name="logo">
            <argument name="logo_file" xsi:type="string">images/logo.png</argument>
            <argument name="logo_width" xsi:type="number">300</argument>
            <argument name="logo_height" xsi:type="number">200</argument>

Adjust file name and image size accordingly.


I had the same problem, and added the following code to the _theme.less file in my custom theme to make it work:

// Mobile Logo Fix
.logo img {
   width: auto;

Hope this helps!

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.