Badge Designer and Branding

Badge Dimensions

The badge has a fixed height of 72 pixels.

The width is configurable between 240 and 640 pixels.

The default width is 340 pixels.

The application constrains width values during badge generation.

Fingerprint Length

The Fingerprint Length setting controls how many hexadecimal characters appear in the badge identifier.

Setting	Value
Minimum	6 characters
Maximum	40 characters
Default	18 characters

The identifier is derived from a SHA-256 hash of normalized badge artwork.

It is not a random identifier.

The fingerprint is displayed in uppercase hexadecimal.

Fingerprint Considerations

Short fingerprints are easier to display but have a greater chance of collisions.

Longer fingerprints provide more identifying information.

The complete SHA-256 artwork hash remains in the embedded attestation even when the visible identifier is shorter.

Badge Label

The Label field defaults to:

Verified

You can replace it with another label appropriate to the badge.

Examples:

Authentic
Certified
Official Publisher
Trusted Partner

A label is descriptive text, not proof of certification by any outside organization.

Italic Formatting

The label renderer recognizes <i> and <em> elements.

For example:

Official <em>Publisher</em>

The application converts supported italic formatting into SVG text spans.

Other HTML elements and attributes are not preserved as functional HTML.

Colors

BadgeMax Pro provides six color controls.

Control	Purpose
Background	Main badge background
Checkmark background	Circular checkmark background
Text Color	Label and fingerprint text
Bevel Stroke	Badge border and logo border accent
Monogram BG	Monogram background
Monogram Text	Monogram lettering

Colors are selected using browser color inputs.

Logo Modes

None

Creates a badge without a logo.

URL Image

Enter an image URL in the Logo Image URL field.

The SVG includes an image reference pointing to that resource.

Supported URL protocols are HTTP and HTTPS.

Data URLs are also accepted by the implementation.

Monogram

Enter one to three characters.

The application converts the monogram to uppercase and displays it inside a rounded square.

You can customize its foreground and background colors.

Embedding an Image

The Logo Image URL section includes:

Embed as Data URL
Choose file…
Revert to URL

Embed as Data URL

This option fetches the supplied image and converts it into a data URL.

The remote server must allow the cross-origin fetch when applicable.

If CORS blocks the request, the application reports an error.

Choose File

Select an image from your device.

The application reads it using FileReader and converts it into a data URL.

This allows the image bytes to be included directly in the generated SVG.

Revert to URL

If the logo field contains a data URL, Revert to URL clears it so you can enter a normal image URL.

It does not automatically restore the original remote URL.

Remote vs Embedded Images

Method	Advantage	Consideration
Remote URL	Smaller SVG	Requires the external image resource
Embedded Data URL	Self-contained logo data	Larger SVG
Monogram	No external image dependency	Limited to short text

Interactive Fingerprint

Each fingerprint character is placed in its own SVG group.

The badge includes CSS for hover and keyboard-focus effects.

Interacting with a character can enlarge and emphasize it while also affecting neighboring characters.

The exact appearance depends on the browser's SVG and CSS support.

Live Preview

Changing designer inputs triggers a preview rebuild after a short delay.

The preview is rendered in an SVG object element.

A preview update does not automatically display a successful verification state.

Use Generate Badge to request the built-in verification check.

Artwork Integrity

The badge's artwork hash is calculated from a normalized representation of the SVG.

Changes to included artwork or styles can invalidate the recorded hash.

Regenerate and re-sign the badge after making design changes.

Important: A badge's appearance does not establish authenticity by itself. Authenticity depends on the cryptographic checks and trust in the issuer's public key.