Logo Variations: 4 Types and How to Use Them (2026)

This post is for information only. You are responsible for reviewing and using this information appropriately. This content doesn’t contain and isn’t meant to provide legal, tax, or business advice. Requirements are updated frequently and you should make sure to do your own research and reach out to professional legal, tax, and business advisers, as needed. To sell products using the Shopify platform, you must comply with the laws of the jurisdiction of your business and your customers, the Shopify Terms of Service, the Shopify Acceptable Use Policy, and any other applicable policies.

Logo variations are different versions of your primary logo that are rearranged or simplified to fit a specific placement. Your logo has to work in a number of spaces with varying shapes and sizes: a wide website header, a square social media profile picture, a browser tab, and a shipping label.

For example, in Shopify, brand header logos have a maximum width of 300 pixels, favicons are scaled down to 32 by 32 pixels, and the square logo in your brand settings should be at least 512 by 512 pixels. A horizontal logo with a tagline that works for your header won’t be as visible in a 32-pixel square, so each space needs a specific logo variation built for it.

This guide covers the four core logo variations, how to design them so they still match your brand identity, and an example from a real-life brand.

What are logo variations?

Logo variations are rearranged versions of your brand’s logo made for different placements. Each variation keeps core design elements, like color, font, or symbol, so your brand identity stays consistent, even when the layout changes. You can use variations for different mediums (email signatures, product labels, and digital ads) or formats (vertical layouts, color versions, and transparent backgrounds).

Each layout can also come in several color versions, so the logo stays legible no matter where it needs to sit:

• Full-color. The logo in your complete brand palette, for white or light backgrounds when every color is visible.
• Single-color. The logo in black or a single brand color, for printing methods that use one ink color, like rubber stamps, embossing, embroidery, and single-color screen printing.
• Reversed. A white or light version for dark backgrounds and photos.
• Transparent background. A PNG file with no background fill, so the logo sits directly on your website header, a product photo, or a colored banner without a white box around it.

Take a look at Slack’s logo variations as an example. Their main logo uses four bright colors plus a black wordmark, but their brand guidelines also include variations that depend on the background color and whether they can use the full logo or only the brandmark.

The Web Content Accessibility Guidelines have a specific exemption for logos, saying that text that’s part of a logo or brand name has no minimum contrast requirement, but there are other accessibility requirements that apply. For example, a logo image needs a text alternative, and nearby text still needs a contrast ratio of at least 4.5:1, with buttons and icons at 3:1.

In Shopify, you can add alt text to your header logo by clicking Edit on the logo image in your theme editor’s Logo settings.

Color and style can also affect trademarking. According to the US Patent and Trademark Office, a mark registered in special form, like a stylized logo in specific colors, is protected “only for the particular depiction you provided.” A standard-character registration covers the wording itself “without limiting the registered trademark to a particular font, style, size, or color.” Keep this in mind when you go to trademark your logo.

Logo variations vs. logo types: What’s the difference?

Logo variations are different versions of one logo adapted for specific placements, while logo types are the categories logos fall into based on how they’re built.

The main logo types include:

• Wordmarks: A text-based logo that uses the name of the company as the main focal point, like the Disney or Amazon logos.
• Lettermarks: A logo that uses letters, often the initials of the actual company name, to create a memorable logo design, like the HBO or IBM logos.
• Pictorial marks: A simple graphic that represents a brand, like the Apple or Target logos.
• Combination marks: A logo that includes both text and imagery, like the Slack or Pepsi logos.

Logos are a part of your overall brand elements, but inversely, other brand elements also inform logo design. Aspects like color and typography shape your logo and variants to present a cohesive narrative about your company’s story, values, and offerings.

What are the four core types of logo variations?

The four core logo variations your brand will need are the primary logo, secondary logo, submark logo, and favicon logo. You can always create more variations when you need them for specific campaigns or products, but these four cover a store’s main placements, so it’s a good idea to create them at the outset.

Here’s how the four compare:

1. Primary logo

Your primary logo is the complete version of your logo, with every element in place. It’ll be the one most recognized by your customer base as you’ll use it most often in any placement with room for every detail. Other variations will be derived from this main logo.

In Shopify, add your primary logo as the default logo in your brand assets. Go to Settings > General, then click Manage in the Brand assets section. The default logo must be a PNG or JPEG at least 512 pixels wide, with no margins or extra space around it.

Use it for: Your desktop website header, homepage, email headers, storefront signage, packaging, and billboards.

2. Secondary logo

When the primary logo doesn’t fit a format, a secondary logo offers a simplified or rearranged version of it. Secondary logos keep your full business name but strip out additional details, like a tagline, location, or symbol, depending on where it needs to fit.

A secondary logo can be a new lockup of the same parts. A logo lockup is the fixed arrangement of a logo’s symbol, name, and any tagline. You might have a horizontal lockup with the symbol beside the name as well as a stacked version with the symbol above the name. The latter option fits narrower and taller spaces so your brand name doesn’t get overly compressed.

Header width is one place where a secondary logo might fit better. Shopify themes cap header logos at 300 pixels wide, and you can set the exact size with the Desktop logo width slider in the theme editor.

Use it for: Your mobile website header, email signatures, social media cover images, business cards, product labels, hang tags, and logo placements on shirts.

3. Submark logo

Submark logos are smaller graphics or icons that keep only core design elements, like color and shape, and remove extra details, including your full business name. A submark logo may also be the stylized initials of your brand name, called a lettermark.

The submark is the natural choice for the square logo in Shopify’s brand settings, which channels and apps use for social media and profile pictures. Shopify recommends a square logo of at least 512 by 512 pixels, saved as a PNG or JPEG.

Clothing brand Hiut Denim provides an example of this. They use their main wordmark as their online store’s website header:

And in the footer, they use their brand symbol as a submark:

Use it for: Social media profile pictures, the square logo in your brand settings, stickers, packaging seals, tissue paper, and the corners of printed documents.

4. Favicon logo

A favicon is a tiny icon that appears in browser tabs, bookmark bars, favorites bars, browser history results, and next to your site in search engine results pages (SERPs). Your favicon may be text-based or pictorial, like the shopping bag icon in Shopify’s favicon.

In Shopify, you add a favicon to your website in the theme editor. Go to Online Store > Themes, click Edit theme, open Theme settings, then select Logo or Favicon (depending on your theme) and upload an image. Shopify recommends a favicon of 16 by 16 or 32 by 32 pixels.

Use it for: Browser tabs, bookmarks, browser history, and search results. Favicons are digital only, so use your submark for smaller physical spaces.

How to design logo variations

Once you’ve designed a primary logo, you can develop the logo variations your brand needs.

If you don’t have a logo yet, Shopify’s free Logo Maker can create a starting design. The download includes both horizontal and vertical versions, each as a PNG with a background and a PNG with a transparent background. The Logo Maker only works to create your initial concept, as you can’t upload existing designs to create variations of your current logo.

The steps below cover how to design each variation.

1. Analyze your primary logo

All logo variations start from your primary logo design. Evaluate your primary logo’s essential elements, including graphics, color scheme, tagline, and brand name. Then decide which aspects must remain consistent throughout variations, like your typeface and brand colors, so your audience recognizes your brand.

If you have brand guidelines with a range of preapproved color shades, you may emphasize secondary or accent colors in new logos so variants are versatile while remaining consistent.

Record each decision in your brand guidelines, including which variation goes in which placement, the minimum size for each, and the clear space around it.

Look at how Zapier has documented their clear space within their brand guidelines to get an idea of how to document this for your own brand:

2. Create your secondary logo

The secondary logo fits in most spaces your primary logo can’t. Simplify and rearrange your primary logo to develop your secondary logo. For example, you could remove a tagline, drop a symbol, or turn a horizontal lockup into a stacked one. If your primary logo is a combination mark, you might choose to use the wordmark on its own as your secondary logo.

Test the secondary logo in the placements you want to use it for. Preview it in your mobile header, at business card size, on a product label, or on a hang tag. If the name is hard to read at any of those sizes, adjust the design until it fits.

3. Design your submark logo

Use submark logos for a consistent presence in spaces where branding isn’t the focus. For example, if you have a downloadable white paper on your site, the first page may center a large primary logo, and each following page may include a small submark in the corner.

Remove your full business name and complex details, like locations, taglines, and gradients. Focus on a single symbol or your brand’s initials in your branded typeface, and use your primary brand colors to make sure your submark is identifiable at a glance.

Export your submark as a transparent PNG so it sits cleanly on photos, colored backgrounds, and packaging mock-ups:

• Draw the submark on a square canvas, at least 512 by 512 pixels to meet Shopify’s square logo minimum.
• Hide or delete the background fill so only the submark is visible.
• Export as PNG with the transparent background option turned on.
• Open the file on a dark background to check for leftover white edges.

Save transparent files as PNG, not JPEG, since the JPEG format doesn’t support transparency. Keep a vector version (SVG, EPS, or AI) as your master file so you can export new sizes without losing quality.

4. Create your favicon logo

A favicon has to work at small sizes, since it’s a tiny square version of your company logo. For search, Google’s favicon guidelines require a square image (or 1:1 aspect ratio) of at least 8 by 8 pixels, and they recommend a favicon larger than 48 by 48 pixels. Shopify recommends a square image of 16 by 16 or 32 by 32 pixels.

Build your favicon from a single element of your primary logo, like your symbol or the first letter of your brand name. Design it on a square canvas, then preview it at its required small size to confirm it’s still legible. Upload it to your theme editor under Theme settings > Logo or Favicon.

5. Adapt to holidays and diverse audiences

Create more logo variations for other countries by researching your new target audience's culture. Different cultures can associate specific colors, fonts, and images with different meanings; for example, red marks good luck in China but mourning in some African countries.

If you include a tagline with your logo, consider translating it into that country’s predominantly spoken language, but ensure words and phrases don’t carry unintended meanings. Even phrases in the same language can change meaning across countries; for example, “pants” refers to underwear in England.

While your brand assets in Shopify can’t be localized by market or language, you can use the Translate & Adapt app to customize your store logo and show different versions for different markets.

If you want to acknowledge a holiday, you might choose to make minor adjustments to your logo, like adding shades of pink and red on Valentine’s Day or a Santa Hat for Christmas.

A 2022 study found that shoppers who saw brand logos with a more pronounced holiday atmosphere had a higher preference for nostalgic products. This effect appeared only for traditional holidays, rather than non-traditional ones, so you don’t need to adapt your logo for every holiday on the calendar.

Here are a few instances when you might want to skip a seasonal variation:

• Square logo in brand settings. Your brand assets sync to every connected sales channel, theme, and app, so your seasonal square logo would appear everywhere at once. Don’t touch this version of the logo unless you want your seasonal variation to change across the board.
• Bulk-printed packaging. Unless you’re certain you’ll go through all of it, don’t print packaging specific to the season, otherwise it can’t stay in circulation once the holiday has passed.
• Trademark filings. A stylized registration covers only the depiction you filed, so you’ll want to ensure you’re only trademarking your standard logo, and not a seasonal one.
• Non-traditional holidays. The study found the holiday logo effect on nostalgic preference didn’t occur for non-traditional holidays.

Logo variations examples: Pilgrim

Pilgrim is an Indian beauty brand that sells skincare, hair care, makeup, and fragrance. The brand uses one symbol, a figure of a traveler holding a walking staff, across three logo variations on its website.

Pilgrim’s primary logo includes the brand’s logotype and a graphic image. Shoppers see this logo on the website’s header:

Desktop users also see the favicon logo in the website tab at the top of the browser. This is also what appears in search engine results. This logo displays the graphic on a light orange background:

Pilgrim also uses a submark logo, where the symbol sits above the wordmark, for their social media profile images. This design helps the logo fit better into a circle or square: