Updated 15th February 2022
Unpacking the definition
Easily scalable variations
A responsive logo takes the elements of the main logo and adapts them for different sizes. As much as anything its to ensure the text is always legible. Take the example below, when the main Heineken logo is reduced to the size of a favicon, none of the text is readable.
A responsive logo however ensures that at each point the logo has been designed for that particular size. Arguably, the designer chooses which information is most important ensuring both readability and brand tone has been communicated.
The demands of a digital environment
Scalable logos come into their own on the web. A website has seconds to communicate its main message – 15 seconds in fact – so arguably you want to use that time to communicate what your business does, rather than what your logo looks like. Depending on your industry, you’ll find that more and more of your website’s users will be accessing it on a phone. A logo that takes up less space can then only be a good thing, leaving more space for the main message!
The mark/ symbol within a responsive logo
A mark needs to have the same brand feel as the logo as a whole. If the logo already has a mark of its own (think Airbnb, Nike, Chanel) then working out what the logo looks like scaled down will be fairly easy. If you have a type based logo, then retaining the brand feel whilst reducing the logo size maybe a tricker ask.
Creating a responsive logo isn’t about creating a number of different logos. It is more around the simplification of the main logo, and ensuring your logo works in the contexts it needs to.
How do you make your logo responsive?
Dependent on your time and budget, there are a number of ways to make your logo responsive. Often the best decision is to ensure your logo can be used in a number of different ways. You could try:
- Removing the words / lettering (think Twitter)
- Removing the icon / imagery (think Pizza Express)
- Creating a stackable version (think Premier League)
- Striping out the detail (think Jaguar)
- Merging parts of the logo together (think LA Rams)
We have written a blog post which goes into more detail: How do I make my logo responsive? We hope you find it useful.