Logo Preview in Website Headers
What a website logo mockup shows, how it differs from testing a vector logo in a live header, and what to check before using a free PSD mockup download.
Contents
The short answer
A website logo mockup is a presentation template that places your logo into a simulated web page, usually a browser window with a header, navigation and some page content. Most are layered image files, often Photoshop PSDs, with a placeholder layer such as a smart object where you insert your artwork. The result shows how the mark reads in a header context: its scale against navigation text, its spacing, and its contrast with the background. A mockup is a raster preview image. It does not change your logo file, test how the logo renders in a real browser, or prove that the artwork is vector.
What a header preview can tell you
- Whether the logo stays legible at the reduced size typical of a site header
- Whether a horizontal or stacked version fits the header shape better
- How the mark balances against menu items, buttons and other header elements
- Whether contrast holds on the header background, including light and dark variants
- Whether thin strokes, small text or fine detail disappear when the logo is scaled down
- How the logo looks to a client or stakeholder before a site is built
Static mockup versus a live header test
A mockup is a fixed image, so it shows one layout at one size. A live test, where the logo file is placed into an actual page or prototype and viewed in a browser, shows how it behaves across screen widths, on high-density displays and when a header collapses into a mobile menu. A practical approach is to use a mockup for presentation and early judgment, then confirm in a live or prototype header before treating the logo as ready for the web.
Vector artwork, embedded raster and raster previews
The terms matter because a mockup can look sharp while hiding problems in the source file.
| Type | What it is | What it means for a header preview |
| Vector artwork | Shapes defined as editable paths, as in a properly built AI, EPS, PDF or SVG file | Scales cleanly to any header size and can be recolored or adjusted |
| Embedded raster image | A pixel image placed inside a vector-format file | Carries a vector extension but behaves like a pixel image; it can blur or pixelate when enlarged and cannot be edited as paths |
| Raster preview | A flattened image such as a PNG, JPG or the exported mockup itself | Useful for showing the design; not a substitute for the source artwork |
A file extension alone does not confirm editable vector paths. Opening the file in a vector editor and inspecting the artwork, for example by viewing it in outline mode, is the reliable check.
Preparing the logo for a header preview
- Use the vector master as the source, and export from it rather than from an earlier preview image
- Prepare the layout variants a header may need, such as horizontal, stacked and a simplified icon for small spaces
- Prepare versions for light and dark header backgrounds
- Keep consistent clear space around the mark so it is not crowded by navigation
- Convert text to outlines or confirm that the font license covers the intended use
- For the website itself, an SVG exported from clean vector artwork is a common choice; for dropping into a PSD mockup, a high-resolution PNG with transparency or a placed vector file may be required, depending on the template
Using free website logo mockups
Free mockup downloads, including free PSD templates, vary in what they allow and what they contain. Being able to download a template is not the same as being permitted to use it commercially, modify it or redistribute it.
- License terms: personal versus commercial use, attribution requirements and limits on redistribution
- Contents: whether the template includes photos, fonts or interface graphics that carry their own separate licenses
- Software: a PSD with smart objects needs an editor that supports them for the placeholder to work as intended
- Resolution and layout: whether the header area suits the proportions of your logo
- Editability: whether the background, header color and placeholder can be adjusted to match your project
The logo placed into the mockup has its own rights question. Previewing your own or a client's logo is routine; showing a third party's logo, or modifying its artwork, fonts or trademark, requires permission from the owner regardless of the mockup's license.
Evidence gaps
No specific mockup sources, prices, file specifications or license terms were verified for this article. The guidance above reflects general principles of vector artwork and file preparation. Check each template's license and contents directly before using it, especially for client or commercial work.