I'm not a responsive design expert. Or even close. But I did recently figure out how to replace a full logo with a smaller square icon on a web site so when it's viewed on a phone the header is more compact. Here's how I did it so I can find it again, and to help others, and so smarter people can come by and tell me better ways to do it.

The HTML

The CSS

#icon { display: none; }

#logo { display: block; }

/* Hide/rearrange for smaller screens */ @media screen and (max-width: 600px) { #icon { display: block; align-content:center; }

#logo {
    display: none;
}

}

Basically when the screen shrinks below 600px, the two images swap between display:block and display:none.  Seems to work fine everywhere I've tested it. Hope it helps some others.