Favicon vs Submark: Key Differences and How to Choose

A submark and a favicon are not competing options. A submark is a design asset: a secondary, condensed version of a logo that belongs to the brand identity system. A favicon is an implementation: the small icon a website displays in browser tabs, bookmarks and similar interface spots. The two often overlap because a submark is frequently the best starting point for a favicon. Still, not every submark survives being shrunk to favicon size, and a favicon can come from other sources, such as a single initial or the symbol from the primary logo.

What a submark is

A submark is a simplified or rearranged form of the primary logo, built for spaces where the full logo is too wide, too detailed or too crowded. Common forms include monograms, initials, a stand-alone symbol, or a badge that combines a symbol with short text. It is used across many contexts, including social media avatars, packaging details, stamps, stickers, merchandise and watermarks. Because it is part of the identity, a submark is designed and delivered like the other logo versions, ideally as a master vector file with color variations.

What a favicon is

A favicon is a site icon that browsers and operating systems display at very small sizes, commonly 16×16 and 32×32 pixels in browser tabs. Larger versions are used for things like home-screen shortcuts. A favicon is defined by where it appears and how it is technically supplied to the site, not by its design style. It is usually delivered as exported files such as ICO, PNG or SVG rather than as an editable design master.

Side-by-side comparison

Aspect | Submark | Favicon

What it is | A secondary logo version within the brand identity | A small site icon used by browsers and devices

Primary purpose | Represent the brand where the full logo does not fit | Identify a website in tabs, bookmarks and shortcuts

Typical display size | Varies widely, from small print details to large merchandise | Very small, often a few dozen pixels or less

Typical deliverable | Vector master plus exported color variants | Exported icon files in specific formats and sizes

Level of detail | Can hold moderate detail and short text | Must read clearly with minimal detail

Relationship | Often the source artwork | Often derived from the submark or logo symbol

Choosing a symbol for the favicon

The practical question is usually whether the existing submark can serve as the favicon or whether a simpler variant is needed. Test candidate symbols against these criteria:

• A strong, recognizable silhouette when reduced to a tiny square
• Few elements, with no fine lines, thin strokes or small gaps that blur together
• No taglines, small lettering or text running around a circular border
• Proportions that fit a square format without excessive empty space
• Legibility in a single color as well as in full color
• Adequate contrast on both light and dark browser tab backgrounds

A compact monogram or a bold stand-alone symbol often works directly. Badge-style submarks with surrounding text, wide letter combinations and detailed illustrations usually need a reduced favicon variant. Typical changes are dropping the text, thickening strokes or keeping only the central symbol. That variant should stay visually tied to the submark so the brand remains consistent.

Vector source files versus exported favicon files

Keep the submark and any favicon variant as editable vector artwork, and treat favicon files as exports generated from that source. A file extension alone does not confirm editable vector paths. An SVG, EPS or PDF can contain an embedded raster image instead of paths, and some delivered files are only raster previews of the artwork. Opening the file in a vector editor and checking that the shapes appear as selectable paths, for example in an outline view, confirms what you actually have. This matters for favicons because a vector source can be redrawn or simplified cleanly for small sizes, while an embedded raster image can only be resized, which usually degrades quality.

Scaling vector artwork down does not guarantee a crisp result at tiny pixel sizes. Smaller favicon exports often benefit from manual adjustments that align edges to the pixel grid and simplify shapes, and each size should be checked visually after export.

Limits of this overview

This comparison relies on general design and file-handling principles. No subject-specific evidence was available, such as measurements, platform documentation excerpts or examples from a particular brand. Exact required favicon sizes, format support and how operating systems display site icons change over time, so check current browser and platform requirements before finalizing a favicon set.