• support@answerspoint.com

How to display a different logo on mobile and desktop?


I want to change the logo on my header on a mobile. This is the code from the current header that shows up on both the desktop and the mobile (on desktop it is the link back to the home screen). Is there any easy way of changing it on just the mobile version?



If you want to show different logo on different divice(like mobile and desktop) You can use a media query and selectively show/hide elements. Your html would have both logos in the markup, and your CSS would define which logo is shown depending on screen size.

Example is given below:

  /* hide mobile version by default */
  .logo .mobile {
    display: none;
  /* when screen is less than 600px wide
     show mobile version and hide desktop */
  @media (max-width: 600px) {
    .logo .mobile {
      display: block;
    .logo .desktop {
      display: none;
<div class="logo_div">
  <img src="/images/logo_desktop.png" class="desktop" />
  <img src="/images/logo_mobile.png" class="mobile />


  • answered 5 years ago
  • Community  wiki


 Chrome and navigate to the Google homepage. Click on the Custom Logo icon at the top of the browser. From the drop-down menu, enter the custom text and choose an image

  • answered 1 year ago
  • Abha Sharma

Your Answer

    Facebook Share        
  • asked 5 years ago
  • viewed 3784 times
  • active 5 years ago

Best Rated Questions