A wide logo that looks good on a desktop screen often becomes tiny or crowds the header on a smartphone. Magento only lets you upload one logo per store. This module adds a tablet logo and a mobile logo to the design configuration. The storefront then shows the logo that fits the screen width of the visitor.
Features
- Upload a “Tablet Logo Image” and a “Mobile Logo Image” (JPG, JPEG, GIF or PNG) in addition to the standard logo.
- Optional width and height for each of the two logos, written into the image tag to avoid layout shifts.
- The standard logo is shown from 1024 pixels screen width, the tablet logo from 769 to 1023 pixels and the mobile logo up to 768 pixels.
- All logos link to the home page and use the logo alt text of the store.
Configuration
Go to Content > Design > Configuration, edit the theme of the desired website or store view and open “Other Settings” > “Header”. Below the standard logo you find “Tablet Logo Image”, “Tablet Logo Attribute Width”, “Tablet Logo Attribute Height”, “Mobile Logo Image”, “Mobile Logo Attribute Width” and “Mobile Logo Attribute Height”. If no tablet or mobile logo is uploaded, the store keeps its standard logo.
Good to know
The switching between the logos is done with style rules for Magento’s standard (Luma-based) frontend. Themes with their own header may need adjustments.
Installation
Install the module with Composer in your Magento root directory:
composer require infrangible/m2-logoThen enable it and update the store as described in the installation guide. Composer installs the required modules listed on this page automatically.