Logo Placeholder Generator — Instant SVG Placeholders for UI Prototyping
A logo placeholder is one of the most-needed assets in any UI project: it fills the nav bar, app header, or email template with a correctly-sized, brand-colored block while the real logo is being designed. This tool generates inline SVG with configurable dimensions, background color, text label, font size, and border radius — and outputs a data URI you can drop directly into an img src attribute or CSS background-image without any file hosting.
The SVG is base64-encoded and embedded directly in the HTML attribute. No network request is made — the browser renders the placeholder from the inline data.
Why Placeholder Logos Matter in Prototyping
Prototypes and client presentations rarely have final brand assets ready. Using a real logo from a screenshot or a random PNG introduces mismatched dimensions and inconsistent styling that distracts from the layout review. A generated SVG placeholder at the correct dimensions lets stakeholders evaluate spacing, hierarchy, and navigation structure without getting distracted by wrong imagery. It also prevents NDA issues — you do not need to share actual brand files with developers during the early build phase.
SVG vs PNG for Placeholders
SVG is the clear winner for placeholder assets. An SVG placeholder is infinitely scalable — it looks sharp on retina displays, in PDF exports, and at any zoom level without any file size increase. A 200×50 SVG placeholder is typically 200–400 bytes; an equivalent PNG is 5–15 KB. SVG also supports text labels natively, so the placeholder can display its own dimensions or a content descriptor ('NAV LOGO', 'BRAND MARK') without rasterizing. When embedded as a data URI, the SVG adds negligible weight to an HTML file.
Different Placeholder Shapes by Use Case
The shape of a logo placeholder signals its intended context. A wide rectangle (200×50) represents a horizontal wordmark or combination mark in a navigation bar. A square (64×64 or 128×128) represents an app icon, favicon, or avatar. A circle is common for profile photos and brand marks used on social platforms. A tall rectangle (100×200) is used for sidebar or vertical navigation logos. Generating the right shape ensures the layout responds correctly — padding, alignment, and flex/grid behavior all depend on the placeholder's actual dimensions.
Using Data URIs in HTML and CSS
A data URI can be used anywhere a URL is accepted. In HTML: <img src="data:image/svg+xml;base64,...">. In CSS: background-image: url('data:image/svg+xml;base64,...');. In React or Vue, assign the URI to a variable and pass it as the src prop. Data URIs are self-contained — they work offline, in email clients (for static SVGs), and in PDF exports. The one limitation: data URIs cannot be cached by the browser across pages the way hosted files can, so they are best used during development and replaced with hosted assets in production.
Common Logo Dimensions by Use Case
- Favicon: 16×16, 32×32, or 64×64 — used in browser tabs and bookmarks.
- Navigation bar logo: 150×40 to 220×60 — horizontal wordmark or combination mark.
- App icon: 512×512 or 1024×1024 — used in app stores and home screens.
- Social media avatar: 400×400 — displayed as a circle on most platforms.
- Email header logo: 600×150 — wide banner logo at the top of marketing emails.
- Apple Touch icon: 180×180 — iOS home screen shortcut icon.
How to Use a Data URI Placeholder
- HTML img tag: Set src to the data URI — no external request, no file hosting required.
- CSS background: background-image: url('data:image/svg+xml;base64,...') works in any CSS property that accepts a URL.
- React / Next.js: Assign the data URI string to the src prop of an img or next/image component.
- Figma: Paste SVG code directly via Place Image, or drag a saved .svg file onto the canvas.
- Email templates: Embed the SVG inline in the HTML — most email clients render static SVG as a data URI in an img tag.
Frequently Asked Questions
What is a logo placeholder?
A logo placeholder is a temporary SVG block — usually showing abbreviated text like 'LOGO' or company initials — inserted into a UI mockup where the real brand logo will eventually appear. It lets you design and prototype layouts before final brand assets are ready.
How do I use a generated placeholder in HTML?
Copy the data URI output and set it as the src attribute of an img tag: <img src="data:image/svg+xml;base64,..." alt="Logo">. The browser renders it identically to a hosted image file — no server request needed.
What is a data URI?
A data URI encodes file content (like SVG markup) as a base64 string and embeds it directly in an HTML attribute or CSS property value. Syntax: data:[mediatype];base64,[data]. The browser decodes and renders it without making a network request, making it ideal for self-contained prototypes.
Can I generate placeholders in multiple sizes at once?
Generate each size separately using the width and height fields. Common sizes: nav logo 200×50, app icon 512×512, favicon 32×32, social avatar 400×400, email header logo 600×150.
How do I use a placeholder SVG in Figma?
Copy the SVG code output, then in Figma use File → Place Image or paste the SVG directly into a frame. Alternatively, save the code as a .svg file and drag it onto the Figma canvas. SVG elements remain editable as vector shapes in Figma.
What is the standard size for a favicon?
The minimum favicon size is 16×16 px. Modern browsers prefer 32×32. High-DPI (retina) displays use 64×64 or larger. Apple Touch icons for iOS home screen shortcuts require 180×180 px. Most sites provide multiple sizes via separate link tags.
What is the difference between a placeholder and a wireframe?
A wireframe is a low-fidelity layout sketch of an entire page or screen, usually in greyscale. A placeholder is a specific asset-level substitute — filling the space where a real logo, image, or icon will go within that wireframe or prototype. Placeholders live inside wireframes.