Responsive logo variations: what to ask for

Responsive logo variations are a set of versions of one mark for different places: a wide one for the website, a stacked one for square formats, the symbol alone for profile pictures and a simplified icon for the favicon. One logo isn't enough, because the same logo has to work on a billboard and in a 16 pixel square in a browser tab. This article covers which logo variations to ask your designer for, at what sizes and in which formats, and how to test whether your logo survives online.

Key takeaways

• The basic set is four variations: horizontal, stacked (vertical), symbol only and favicon.
• Google's documentation recommends a favicon larger than 48 × 48 pixels, even though it displays it tiny in search results.
• For an installable website, Chrome wants 192 × 192 and 512 × 512 pixel icons, and an iPhone uses 180 × 180.
• LinkedIn wants a company logo of at least 268 × 268 pixels and recommends 400 × 400, a square.
• The fastest test: shrink your logo to 16 pixels. If all that's left is a smudge, you need a simplified symbol.

Why isn't one logo enough?

Because most places a logo appears today are square or round and small, while most logos are wide. Put a horizontal logo in a round profile picture and it shrinks to fit the width, leaving the lettering a few pixels tall. Nobody can read it.

We see it with clients all the time. The company has a lovely logo on the sign outside the building, but on Instagram it's an unreadable strip of text in a circle, the favicon is a white square, and the email signature has a blurry image. That's not the logo's fault. It's because someone delivered one file and everyone else "adapted" it on their own.

Global brands solve this with a responsive logo: the same mark has several levels of detail, and smaller spaces get a simpler version. It isn't a new idea. Old brands always had a version for the rubber stamp and a version for the truck. There are just ten times more places a logo has to work today. Smashing Magazine has a good walkthrough on how to prepare a responsive logo for design systems.

Which responsive logo variations do you need?

Most companies get by with four variations. You only need more for genuinely specific uses such as embroidery or engraving. Agree on the set of variations in the brief, otherwise the designer will quote it as extra work. What is normally included is in our guide to logo design cost for small business.

• Horizontal version: symbol next to the name. Website header, email signature, invoices, wide banners.
• Stacked (vertical) version: symbol above the name. Square formats, packaging, video titles, portrait posters.
• Symbol or monogram only: social media profile picture, app icon, video watermark.
• Favicon: the simplest form of the symbol, often a single letter or shape, legible at 16 to 32 pixels.

You need each one in full color, black and white (reversed). The white version is the one most often missing, which is how a logo ends up sitting in a white rectangle on a dark video background. If your name is set in custom lettering, it's worth reading what a logotype is and why it behaves differently from a symbol when it shrinks.

What sizes and file formats should you ask your designer for?

Ask for vector files (SVG and PDF) of every variation plus ready-made PNGs at specific web sizes. The vector is the master you can make anything from. The PNGs are finished files for people who can't work with vectors.

For web and devices, these figures are confirmed by official sources:

• Favicon for Google: a 1:1 square, at least 8 × 8 pixels according to Google Search documentation, and ideally larger than 48 × 48. In practice, deliver a 32 × 32 ICO and an SVG.
• iPhone icon (apple-touch-icon): 180 × 180 pixels, used when someone saves your site to their home screen.
• Android and installable web icons: at least 192 × 192 and 512 × 512 pixels according to Google's web.dev.
• LinkedIn company page: at least 268 × 268, recommended 400 × 400 pixels according to LinkedIn Help.

One technical note that will save you some frustration: most browsers support SVG favicons according to Can I use, but Safari only supports them from version 26. So always keep a PNG or ICO fallback. A nice extra is an SVG favicon that switches itself to a light version when someone uses dark mode.

How do you test whether a logo works at 16 pixels?

Make a 16 × 16 pixel square from your logo, enlarge it on screen without smoothing and look at it from two meters away. If you recognize the shape, you're fine. If all you see is a colored blob, the symbol needs simplifying for that size.

We run this test on every logo we design as part of our creative work, plus three more:

• Circle test: place the symbol in a circle the way Instagram or LinkedIn crops it. Nothing important should be cut off, and there should be breathing room around it.
• Black and white test: print the logo on an ordinary black and white printer. If it relies only on color, it falls apart in one color.
• Dark background test: put the white version on a photo or a dark frame from a video. Thin lines and small text disappear first.

When don't you need the full set of variations?

If your logo is already compact, say a short name or a simple symbol in a square, one version plus a favicon is often enough. Don't create variations just because big brands have them. Every extra variation is another file someone will misuse, and five versions without rules are worse than two with clear instructions.

To be honest, for some logos variations won't help. If the symbol is a delicate illustration or a long piece of text, it simply can't be shrunk, and a simplified version won't resemble the original. Then the honest answer is that the logo needs a bigger intervention, not another export.

Where should logo variations live so people use them correctly?

In one shared folder with clear names, plus a short guide saying which version goes where. A file called "logo_final_2_new.png" in an email from three years ago is the most common reason a company's logo shows up online in five different forms.

A simple structure is enough: a folder per variation, each with SVG, PDF and PNG in color, black and white. Add one page of rules that belongs in your brand manual. If you don't have one yet, our article on why you need a brand manual covers what belongs in it and what's unnecessary.

Frequently asked questions about responsive logo variations

What size should a logo be on a website?

Ideally, use an SVG in the website header so it stays sharp at any size. If you have to use PNG, export it at least at twice the size it's displayed so it stays crisp on retina screens.

What's the difference between a symbol and a favicon?

The symbol is the full mark without the name. The favicon is an even simpler form of it for 16 to 32 pixels. With simple symbols they can be identical, but detailed ones need a separately redrawn favicon.

Can I make a favicon from my logo myself?

Technically yes, by shrinking the symbol. But if it isn't legible once shrunk, no automatic tool will fix it. Simplifying the shape is design work, not an export setting.

How many logo variations does a small business need?

Usually four: horizontal, stacked, symbol and favicon, each in color, black and white. More only for specific uses such as embroidery or engraving.

If your logo disappears in the favicon or on social media and you're not sure whether a new export will do or the symbol needs redrawing, get in touch. We can usually tell from a single screenshot.