Logo Preview in Website Headers

The short answer

A website header logo preview is a mockup that shows a logo in a site's top bar, at the size it will actually appear, against the header's background, and next to the navigation it will share space with. It tests fit and legibility. It is not a deliverable file. The preview itself is usually a raster image, such as a screenshot or a flattened mockup, even when the logo placed inside it is true vector artwork.

How a header mockup differs from other logo previews

Print and product mockups, such as business cards, signage and packaging, mostly show a logo at a comfortable size on a physical surface. A header preview is screen-based and usually small. It also has to account for conditions that change while someone uses the site. A logo can look strong on a stationery mockup and still struggle in a narrow navigation bar, so the header preview is often where a layout problem first shows up.

What a header preview should reveal

Legibility at reduced size: whether thin strokes, small lettering or fine detail survive at header scale.
Lockup fit: whether a horizontal version suits the header better than a stacked or icon-only version.
Contrast: how the logo reads on light, dark or transparent headers, including headers placed over a photo or hero image.
Header states: whether the logo still works if the header shrinks, changes color or becomes sticky on scroll, when the site uses those behaviors.
Spacing: how much clear space the logo keeps next to menu items, search fields and buttons.
Narrow screens: whether the mark stays recognizable in a compact mobile header, or whether a simplified variant is needed.

Vector artwork, embedded raster images and raster previews

Three different things are often called "the logo" when a header mockup is involved. Keeping them apart matters, because only one of them is the editable source.

Asset | What it is | What it means for the header

Vector artwork | Shapes defined as paths and fills | Scales cleanly and can be exported to SVG or to raster sizes as needed; colors are editable if the file is well structured

Embedded raster inside a vector-format file | A bitmap image placed inside an SVG, PDF, AI or EPS container | Looks like a vector file but blurs or pixelates when scaled; the paths you would need to edit do not exist

Raster preview or mockup | A PNG or JPG picture of the logo in a header scene | Useful for review and approval, but it is a picture of the result, not source artwork

A file extension alone does not prove that a file contains editable vector paths. To confirm, open the file in a vector editor and switch to an outline or wireframe view, or look for placed image objects in the layers panel. In an SVG, you can also read the markup directly. Path elements describe vector shapes, while an image element points to bitmap content.

<!-- Vector shape: scales cleanly and can be edited -->
<path d="M10 10 L90 10 L50 80 Z" fill="#1a1a1a" />

<!-- Embedded bitmap: an SVG wrapper around a raster image -->
<image href="(embedded bitmap data)" width="200" height="60" />

Once a preview has been approved, the live header needs a real file exported from the vector source. SVG is a common choice for web headers because it stays sharp on high-density displays. If the site or platform needs a raster fallback, export it from the vector master at a higher resolution than its display size. Do not re-save the mockup screenshot for this.

Watch the lettering. If an SVG logo still relies on live text, visitors who don't have that font may see a substitute typeface. Converting the lettering to outlines avoids this, although the text then can no longer be edited as type. Keep an editable master alongside the outlined export.

Downloading is not the same as permission to use

Several separate permissions can apply to a header mockup:
• The mockup template has its own license, which may limit commercial use or redistribution.
• A logo you can download, for example from a company's press materials, may come with usage guidelines that forbid recoloring, distorting or redrawing it.
• The fonts in a wordmark are often licensed separately from the artwork.
• The logo may be a trademark, which limits how and where it can appear regardless of who holds the file.
Check each of these before you modify the artwork or publish it on a live site.

What this overview cannot confirm

No evidence was supplied about a specific logo, mockup template, tool or platform. For that reason, this article gives no recommended pixel dimensions, file-size targets, prices or tool comparisons. For those details, consult your website platform's or theme's header specifications, the license terms of any template you use, and the usage guidelines that come with the logo itself.