Submark vs Favicon: Choosing the Right Brand Symbol
Submark or favicon? Learn how these two compact brand symbols differ in geometry, detail, color and scalability, and how to choose or adapt one for browser tabs.
Contents
A submark and a favicon are often treated as interchangeable because both are small, simplified versions of a brand. They do different jobs. A submark is a secondary logo designed for compact brand placements. A favicon is a tiny site icon that browsers display in tabs, bookmarks, history lists and similar interface spots. The practical answer is that a submark is often the best starting point for a favicon, but it frequently needs further simplification before it works at browser-tab size.
The Short Answer
Use the submark directly as a favicon only if it stays recognizable when reduced to a few dozen pixels or fewer. If it relies on fine lines, small lettering, enclosed text or subtle color shifts, derive a dedicated favicon from it instead: keep the core shape, remove detail and adjust spacing for the pixel grid. The submark stays part of the identity system, and the favicon becomes a technical asset built from it.
What Each Term Means
Submark: a condensed brand symbol that sits alongside the primary logo and any secondary lockups. It might be a monogram, initials inside a shape, a badge, or an isolated icon from the main logo. Designers use submarks on social profile images, stickers, packaging seals, watermarks, embroidery and other places where the full logo would be too wide or too detailed. Submarks are usually viewed at sizes that still allow some detail, such as a circular badge with a short line of text around the edge.
Favicon: short for favorites icon, the small image a website declares so browsers and operating systems can represent it. It appears in browser tabs, bookmark bars, address-bar dropdowns, and, through related icon declarations, home-screen shortcuts on mobile devices. The smallest common display sizes are very small, so the favicon is a constrained interface asset more than an expressive brand mark.
Scope distinction: submark is a design and branding term with no technical specification. Favicon is a web implementation term tied to how browsers request and display icons. A submark can become a favicon, but a favicon does not have to be a submark. Some brands use a single letter, a cropped logo symbol or a plain shape instead.
How They Differ, Criterion by Criterion
| Criterion | Submark | Favicon |
| Primary role | Secondary brand identifier in compact placements | Site identifier inside browser and device interfaces |
| Typical viewing size | Small to medium; often printed or shown as a profile image | Very small at its smallest common sizes; also needs larger variants for touch icons |
| Geometry | Can include badges, frames, rings and combined elements | Works best as one bold, simple silhouette that fills the square canvas |
| Typography | May include initials, a short name or circular text | Lettering is usually limited to one or two bold characters; small text becomes illegible |
| Spacing | Internal spacing tuned for print and screen at moderate sizes | Gaps and strokes need enough room to survive pixel rounding; thin gaps can fill in |
| Color | Can use the full brand palette, gradients or multiple tones | Fewer colors with strong contrast; must remain visible on both light and dark tab backgrounds |
| Aspect ratio | Can be circular, square or slightly wide | Displayed in a square; non-square marks get letterboxed or shrunk |
| Scalability | Scales down until detail breaks | Must be checked at each target size; may need size-specific simplified versions |
| Asset format | Usually kept as a master vector file plus exports | Delivered as specific exports, commonly an ICO file, PNG sizes and optionally an SVG icon |
| Editability | Edited as part of the identity system | Regenerated from a master source whenever the brand mark changes |
The table describes general design and implementation principles, not measurements of any specific logo. No specific submark or favicon specimens were supplied for this guide, so no side-by-side visual judgment of a particular brand is made here.
The Tradeoffs Behind the Choice
Reusing the submark unchanged keeps the identity consistent and avoids maintaining another asset. The risk is legibility. A badge-style submark with a ring of text and a small central icon tends to collapse into an indistinct blob at tab size. The text disappears first, then the inner details merge.
Deriving a dedicated favicon gives up some detail for clarity. The usual approach is to isolate the most distinctive element of the submark, such as the central initial or icon, thicken strokes, widen counters (the enclosed spaces inside letters like o or a), and drop outer frames unless the frame itself is the recognizable shape. The result remains visibly related to the submark but is built for the pixel grid.
Creating a favicon unrelated to the submark is rarely necessary. It can make sense when the submark is purely typographic and too wide, or when the brand has a single strong color block or letter that reads better than any existing logo version.
Choosing by Situation
- Your submark is a single bold letter or simple icon on a solid shape: test it directly as the favicon; it may need only minor stroke or spacing adjustments.
- Your submark is a circular badge with text: extract the central element for the favicon and keep the full badge for social profiles, stickers and print.
- Your submark uses thin lines or a delicate script monogram: thicken or redraw the core letterform for the favicon, or use a filled shape behind it to improve contrast.
- Your brand uses gradients or multiple close tones: create a flat, high-contrast favicon variant and reserve the full-color submark for larger placements.
- You have no submark yet: consider designing one with favicon use in mind, starting from a shape that stays legible in a small square, so one symbol can serve both roles.
- You also need app or home-screen icons: these display larger than tab favicons, so a slightly more detailed version, close to the submark itself, can often be used there.
How to Test a Candidate Symbol
Visual judgments only hold up when candidates are compared under the same conditions. Export each option at the same small sizes, view them in real browser tabs rather than only in a design application, and check them on both light and dark interface themes. Comparing a vector preview zoomed on screen against a downscaled bitmap in a tab is not a fair comparison.
- Place each candidate in an actual browser tab next to other sites' icons and see which one you can identify at a glance.
- Check light mode and dark mode; a dark mark on a transparent background can vanish on a dark tab bar.
- Compare at the smallest size first, since that is where differences in detail and spacing show most.
- Look for filled-in gaps, merged strokes and blurry edges caused by downscaling, and adjust the source shape rather than relying on export sharpening.
- Confirm that the mark still relates visually to the submark and primary logo when viewed together.
No performance or recognition testing was supplied for this guide. Any claim that one version is more recognizable or more effective should be treated as untested until you run comparisons like the ones above, ideally with people unfamiliar with the brand.
Working With the Vector Source
Build the favicon from a master vector file of the submark or logo, not from a screenshot or a previously exported bitmap. Keep the favicon artwork as its own vector file too, so it can be re-exported at new sizes or updated after a redesign.
Do not assume a file is true vector artwork because of its name or extension. An SVG or EPS can contain an embedded raster image instead of editable paths. Open the file and inspect it for separate shapes and anchor points before treating it as an editable master.
Access to a logo file does not grant permission to reuse or modify it. If you are adapting a submark you did not create, or working with a third-party brand, confirm usage rights and any brand guidelines on minimum size, clear space and modification before producing a favicon from it.
Gaps in This Guide
This guide is based on general logo design and web implementation principles. It does not analyze a specific brand's submark or favicon, includes no measured specimens, and cites no user testing. To reach a firm decision for your own identity, compare your actual submark and favicon candidates under the same viewing conditions and check them against your brand guidelines.