configure different logo depending on breakpoint

Question

I need to set different logos for my store: a logo for desktop and a different one for mobile using 768 as breakpoint, I do not have to use an existing extension.
please help

Answer 1

You can do it by adding an extra logo from your theme directory and hide the main logo after break point using css.

update logo.phtml app/design/frontend/your vendor/your theme/Magento_Theme/templates/html/header/logo.phtml

<a
class="logo"
href="<?= $block->escapeUrl($block->getUrl('')) ?>"
title="<?= $block->escapeHtmlAttr($storeName) ?>"
aria-label="store logo">
<img src="<?= $block->escapeUrl($block->getLogoSrc()) ?>" class="main_logo"
     title="<?= $block->escapeHtmlAttr($block->getLogoAlt()) ?>"
     alt="<?= $block->escapeHtmlAttr($block->getLogoAlt()) ?>"
        <?= $logoWidth ? 'width="' . $block->escapeHtmlAttr($logoWidth) . '"' : '' ?>
        <?= $logoHeight ? 'height="' . $block->escapeHtmlAttr($logoHeight) . '"' : '' ?>
/> <!--add class "main_logo" to hide it in responsive view (break point)-->
        
        
 <img src="<?= $this->getViewFileUrl('images/responsive_logo.png') ?>" class="responsive_logo"
     title="<?= $block->escapeHtmlAttr($block->getLogoAlt()) ?>"
     alt="<?= $block->escapeHtmlAttr($block->getLogoAlt()) ?>"
       
/>    <!--//to get required logo from theme directory app/design/frontend/your vendor/your theme/web/images    -->
        

add add following lines in css

.logo .responsive_logo{display: none;}
@media(max-width:768px){
.logo .main_logo{display: none;}
.logo .responsive_logo{display: block;}
}