Favicon vs. Submark: Which Logo Version to Use

The short answer

A submark and a favicon are different things. A submark is a compact secondary version of a logo, usually an initial, monogram, symbol or simplified emblem. A favicon is the small icon that browsers show in tabs, bookmarks, history lists and similar places. A submark is often the best starting point for a favicon, but it is not automatically a finished favicon. If the submark stays clear at very small sizes, use it. If its detail, thin lines or text blur together, create a further simplified favicon version based on it.

What each version is for

Aspect | Submark | Favicon

Role | Brand asset in a logo system | Interface icon for a website or web app

Typical uses | Social avatars, stamps, packaging details, watermarks, merchandise, compact layouts | Browser tabs, bookmarks, history, pinned sites, some home-screen shortcuts

Display size | Varies, from small to fairly large | Very small, often only a few dozen pixels across or less

Level of detail | Can keep moderate detail and sometimes short text | Needs bold, simple shapes with little or no fine detail

Delivered as | Vector master plus raster exports for specific uses | Vector source plus browser-ready files such as SVG, PNG or ICO

The practical difference is scale. A submark is designed to represent the brand when the full logo will not fit. A favicon must work at the smallest common display size, where even a well-designed submark can lose legibility.

How to decide which version to use

• Use the submark as the favicon if it reads clearly when previewed at tab size on both light and dark browser themes.
• Simplify the submark if it contains thin strokes, small counters, outlines, gradients, taglines or multiple letters that merge at small sizes.
• Drop text in the favicon when the submark includes words; a single initial or symbol usually holds up better.
• Thicken strokes and increase spacing rather than shrinking the submark proportionally.
• Check contrast: a dark mark on a transparent background can disappear on a dark tab bar, so a solid background shape or a lighter variant may be needed.
• Use the full primary logo as a favicon only if it is already a simple symbol; wordmarks and horizontal lockups rarely work at this size.

Why the vector source matters

Both the submark and any derived favicon should be built from a true vector master, because simplifying shapes, adjusting stroke weights and exporting multiple sizes is far easier with editable paths. Be careful, though: a file ending in SVG, AI, EPS or PDF is not proof that it contains editable vector paths. These formats can hold an embedded raster image, a flattened preview or a mix of vector and pixel content. Open the file in a vector editor and confirm that the shapes are made of selectable paths before relying on it as the source for a favicon.

The same distinction applies to the favicon itself. An SVG favicon can scale cleanly in browsers that support it, but only if it actually contains vector shapes. PNG and ICO favicons are raster files, so they should be exported from the vector master at each required size rather than enlarged from a small image. Many sites provide a vector favicon alongside raster fallbacks because browser and platform support varies.

Rights and permissions

Being able to download a logo file does not mean you are allowed to modify it or turn it into a favicon. Simplifying a submark changes the artwork, and the logo may also involve licensed fonts and trademark rights. If you are working with your own brand, check that your agreement with the designer covers derivative versions. If the logo belongs to someone else, get permission from the owner before altering or using it.

Evidence gaps

No information was supplied about a specific logo, submark or brand, so this article cannot judge whether a particular submark will work as a favicon. It also does not cover exact required file sizes for each browser or platform, since no verified specifications were provided. Confirm current requirements in the documentation for the browsers and platforms you target, and test the actual artwork at its real display size before finalizing.