Inspiration for Making Company Logos Responsive

The answer to that question, as is usually the case when it comes to responsive design problems, is a bit of creativity and media queries.

Responsive Logos is a site showing a proof-of-concept of how designers can make logos responsive. The site can give you inspiration and ideas for creating responsive logos.

Front page of Responsive Logos website

Head over to the site and resize your browser window to see the logos of household brands like Coca-Cola, Nike and Walt Disney responsively change depending on the current size of your browser. Notice how, for example, the Coke logo is responsive without impacting the company’s brand recognizability.

Coca-cola responsive logo design

The logo file type used in the proof-of-concept is SVG, a web image format that’s ideal for vector graphics. CSS media queries are used at four breakpoints in order to help determine which size of the logo should be presented to the user.

  • Sky Blue

    Wow did not know this was possible? I have a floating header so when you scroll down it will make the header smaller… but am not using CSS3 so would this make a difference?

  • Simon Kweku

    Thanks, Jacob. I unanimously agree with you and I can confidently predict that so many corporate identities will start calling logo designers for a re-brand or re-creation of their already existing logos.
    Evidently, after experimenting with the eight (8) logos presented at http://responsivelogos.co.uk/ I found the following logos more responsive than the others: CHANNEL, NIKE, GUINNESS, BANG & OLUFSEN, VICTORINOX SWISS ARMY, (and LEVI’S); on the other hand, the others like: COCA-COLA, and WALT DISNEY couldn’t stand the test of “responsive logo” when I resized my browser window.
    What I observed is that, part of these three (2) logos were not visible or rather were trimmed off: they appeared as COCA, and WALT.

    More grace, and ideas to Design Instruct team.

  • Glenn Ferrell

    Jacob, the logos shown here (and other responsive logos I’ve seen) seen to have no more than 2 colors — which seems make it easier to solve the design problem if you have a non-white header background. Have you seen any effective responsive logos (on non-white headers) which have more than 2 colors?

  • I can’t say that I know of an example that matches your description Glenn. Sorry. When it comes to responsive design, what really changes is the shape and size, which in theory could be decoupled easily with the background and foreground colors.

    Maybe I’m not understanding the design problem completely. I can see it being a bit more difficult with textured or patterned backgrounds. Do you have an example I can look at?