Logo

You might say

Preserve the brand's core shape, choose Logo variants for desktop, mobile, and dark backgrounds, and verify each context with screenshots.

A brand mark used to identify an organization, product, or serviceA Logo can appear in a website header, mobile navigation, on a dark surface, or in promotional material through different variants, while its core identity stays consistent. It helps people recognize the brand; it does not own page navigation or browser-system icons.

Know first

Header Image

wordmark

How one brand mark adapts to page contexts

VVibeHubBrand master

VVibeHub☰

A field guide to web terms

The core mark stays recognizable while the lockup adapts to width and background.

How Logo variants preserve identity

Wide and symbol forms fit different spaces: A desktop header can use a horizontal Logo, while a narrow navigation may need a symbol or compact form. Arrangement and color can change, but the core shape, proportion, and identity should remain recognizable.

Include the background and host area in testing: Light, dark, and crowded navigation widths affect contrast, cropping, and legibility. Verify the Logo in the real header, not only as an isolated image.

Quick checkChoose the best answer

A horizontal Logo crowds the navigation on a narrow screen. What should you do?

Use the defined compact or symbol Logo and verify it separately on narrow and dark surfacesKeep shrinking the horizontal wordmark until it fits beside the navigationReplace the Logo entirely with a menu icon and make people infer the brand from navigation

You can say this to an AI Agent

Preserve the brand's core shape and choose suitable Logo variants for the desktop header, mobile navigation, and dark backgrounds. Verify that the Logo does not crowd navigation and remains recognizable, using separate screenshots. Do not change the Favicon or toolbar action icons as a side effect.

Learn next

1Header→2Favicon→