Badge Maker

Badge Maker: turn a photo into a wearable round badge, but the export is really a precisely-sized PNG

Badge Maker is a fully free, local-only tool. The "badge" it makes is a tinplate pin badge (a physical button), not the small "status badge" you see on a profile page. But both end up as a precisely-sized image. The tool crops a photo into a circle, adds a metal rim and text, then exports a print sheet with bleed and cut lines at 300 DPI — its size is not arbitrary, it is derived from the spec, the bleed, and the DPI. Once you understand that conversion, you can make both a correct physical badge and a correct avatar, cover, or icon.

All processing happens in the browser via Canvas; the image is never uploaded, so it protects privacy and previews instantly. It suits creators who print their own merch or event materials, and designers who also need social images and icons in one pass.

What actually defines a badge spec? Finish, bleed, and with-bleed

Three sizes matter in print: the finished diameter is the final cut circle (e.g. 58mm); the bleed is the extra ring outside the finish — cutters are imperfect, so any artwork within 2–3mm of the edge gets trimmed, and you must leave room; the with-bleed diameter = finish + bleed on both sides, and that is the real edge length of your delivered file. In this tool the specs 32/44/58/75mm are finished diameters, with with-bleed diameters of 36/48/64/81mm.

Pixel output for all four specs (300 DPI, with-bleed square PNG)

Formula: with-bleed pixels = with-bleed diameter(mm) × 300 ÷ 25.4. The table gives the full export parameters at the default 300 DPI; font sizes use the tool's default 11% ratio:

Spec (finish)	Bleed	With-bleed	With-bleed square(px)	Cut circle(px)	Safe radius(px)	Font(px,11%)
32mm	2mm	36mm	425	378	165	41.6
44mm	2mm	48mm	567	520	236	57.2
58mm (default)	3mm	64mm	756	685	319	75.4
75mm	3mm	81mm	957	886	419	97.5

Note: the "safe area" is the ring inset 2mm from the cut line (shown as a light-green dashed circle by the tool); text and key artwork should sit inside it — cutter error may reach outside the safe area but must never reach inside it. A 58mm image has 75px text on a 756px canvas because it is meant to be printed and read on a physical object, not used as a small on-screen graphic.

Social image specs (Open Graph, Twitter, GitHub — international standards)

A badge is physical, but you often post the same art as an avatar or cover. Each platform defines its own card size; the canonical references are the Open Graph protocol, Twitter Cards, and schema.org. GitHub uses its own social preview:

Platform / standard	Recommended size(px)	Aspect	Notes
Open Graph (shared link cards)	1200 × 630	1.91:1	Open Graph protocol; Facebook, LinkedIn, iMessage
Twitter / X Card (large)	1200 × 600	2:1	summary_large_image primary
Twitter / X Card (legacy)	1200 × 675	1.78:1	near the older 1.5:1 framing
schema.org ImageObject	1200 × 900 (min 696 × 696)	4:3	Google recommends ≥696px for rich results
GitHub Social Preview	1280 × 640	2:1	repo header preview

These sizes are unrelated to the round badge, but they belong to the same "image spec" family: pick the target platform's canvas before you start, and you avoid a lot of rework.

Status-badge (shields.io-style) spec

The little "build passing / version" badges in docs are different from a pin badge, yet the "made with calc-tools.top" mark this tool adds is the same family of small badge. These status badges follow a de-facto standard (from shields.io):

Parameter	Value	Notes
Total height	20px	standard height of one status badge
Font	11px Verdana	vertically centred, scales proportionally
Corner radius	3px	rx of the rect
label / value blocks	label grey bg + dark text, value blue bg + white text	left block names it, right block shows the value; colours customizable
Char width	~7px / character	total length estimated from both text blocks
SVG vs PNG	SVG vector (lossless, CSS-scalable); PNG raster (blurs when upscaled)	embed SVG in README / docs

The last row is the key difference: SVG is vector and never blurs at any size; PNG is raster and loses sharpness when scaled. That is why status badges are almost always SVG, while this tool's print sheet is PNG (it needs exact pixels).

favicon and app-icon sizes (cover the platforms)

To turn a brand into a site or app icon, one size is not enough — each system pulls a different tier. The tiers below map to the PNG this tool exports:

Size(px)	Typical use	Platform / context
16 × 16	browser tab favicon, address bar	universal
32 × 32	legacy IE, Windows taskbar	Windows
48 × 48	desktop icon	Windows
180 × 180	Apple Touch icon (home screen)	iOS
192 × 192	manifest icon (mdpi baseline)	Android / PWA
512 × 512	manifest largest tier (xxxhdpi)	Android / PWA

Start from the largest tier (e.g. 512) and downscale to the smaller tiers, so the small icons do not pick up aliasing from a second downscale.

Safe margin and minimum readable size: what your export becomes after platform scaling

Social images get shrunk hard in the feed. Using a "40px title / 24px body on the canvas" example, the table reverse-computes the on-screen size from each platform's typical feed width — body text often drops below the ~14px readable floor:

Platform / context	Canvas width(px)	Typical shown width(px)	Scale	40px title shown(px)	24px body shown(px)
Open Graph desktop feed	1200	476	0.40	15.9	9.5
Twitter / X desktop large	1200	506	0.42	16.9	10.1
WeChat article (phone)	900	414	0.46	18.4	11.0
Xiaohongshu feed card	1080	337	0.31	12.5	7.5
GitHub repo header	1280	640	0.50	20.0	12.0

Note: on a Xiaohongshu card a 24px body shrinks to only 7.5px, far below the readable floor. The fix: put titles and key text in the large centre zone, keep body copy short, or bake the text into the big image instead of relying on it being read after scaling. To check whether a foreground colour stays clear on a small image, use this site's colour contrast checker.

Export format: PNG transparency vs JPEG size vs SVG lossless

Dimension	PNG	JPEG	SVG
Transparency	yes	no (filled white)	yes
Scaling	raster, blurs up	raster, blurs up	vector, lossless up
Size	medium (lossless)	smallest (lossy)	text, tiny
Typical use	badge / transparent sticker / mark	photo sheet to shrink (A4 PDF embed)	status badge / logo

This tool exports PNG for preview, single, and A4 sheet (print needs exact pixels); the A4 PDF embeds a JPEG (quality 0.92) to keep the file small. If you want to turn an image into embeddable code, see image to Base64. For colour work, go back to the colour picker to sample exact colours first.

DPR 2x / 3x export: how many pixels for a retina screen

High-DPI screens (Retina / high-DPI phones) render at a device pixel ratio DPR: a 44px UI element needs 88px of image at DPR=2 to stay sharp. This tool's preview defaults to 1024px (@1x); 2048px is @2x. The table gives the three tiers for common sizes:

UI CSS size(px)	@1x	@2x	@3x
16	16	32	48
32	32	64	96
44	44	88	132
48	48	96	144
180	180	360	540
192	192	384	576
512	512	1024	1536

The rule is direct: export pixels = display size × DPR. A 512px favicon master shows at only 16px in a tab, and the browser auto-picks the @1x–@3x tier; but when you export your own PNG, multiply by DPR for high-DPI devices.

Three real examples (using the tool's default parameters, numbers from above)

Example 1 (single exact size): keep the default 58mm spec and click "Export single exact-size PNG". With-bleed 64mm × 300 ÷ 25.4 = 755.9 → rounded to 756 × 756 px; the inner cut circle is about 685px and the safe radius about 319px; at the default 11% text ratio the font is about 75px. That is the precise file for the print shop.

Example 2 (A4 sheet auto-clamp): default 58mm, count 20, gap 3mm. The A4 printable area is limited by an 8mm margin, and at 756px per cell it fits at most 2 columns × 4 rows = 8 badges; asking for 20 is auto-clamped to 8 (block about 1547 × 3129px, ~467px side margins and ~190px top/bottom). To fit 20 at once, use 32mm (up to 35) or 44mm (up to 15) instead.

Example 3 (text scaling and @2x retina): the same image at the default 1024px preview has a finished circle faceD = 1024 × 0.74 = 757.8px and text about 83px. For retina sharpness pick 2048px (@2x) and the text scales to about 166px. If you switch to 32mm for the same image, the single faceD is only 378px → text about 42px, about 45% smaller than the 75px at 58mm, so for small specs keep the arc text short or raise the ratio to stay legible.

Frequently asked questions

Q: What pixel size is the single exact-size PNG at the default 58mm spec?
A: with-bleed 64mm at 300 DPI exports as 756 × 756 px; the cut circle is about 685px and the safe radius about 319px; the default 11% text is about 75px.

Q: Why does the A4 sheet default to 20 badges but only export 8?
A: the A4 printable area is limited by an 8mm margin; at 58mm the 756px cell fits at most 2 × 4 = 8. Asking for 20 is auto-clamped to 8 (block about 1547 × 3129px). Use 32mm (up to 35) or 44mm (up to 15) to fit more.

Q: How big is the arc text by default, and is it legible at 32mm?
A: font = finished circle × 11%. About 75px at 58mm and about 42px at 32mm (about 55%). The physical diameter is smaller so the text is smaller; keep it short, raise the ratio, and stay inside the safe area.

Q: When is transparent background useful, and does it work with the realistic metal effect?
A: transparent background applies only to Preview export, making the area outside the badge transparent — good for stickers or avatar overlays. But the realistic effect paints a metal rim and base, so the badge body is never transparent; single and A4 sheets also fill white to stay opaque. For a purely transparent round image, turn off realistic and use the plain circle crop.

Q: What is the cut-precision difference between the PNG and the A4 PDF?
A: both use the same 300 DPI pixels (A4 = 2480 × 3508 px) and the cut circle and bleed lines land identically. The packaging differs: PNG is a bitmap for re-editing; the A4 PDF embeds a JPEG (quality 0.92) sized to exact A4 physical dimensions (595.28 × 841.89 pt), so size will not drift on a print shop's screen.

For QR merchandise workflows read the blog QR code generator guide; for colour work use the colour picker to sample exact colours, the colour contrast checker to verify legibility, and image to Base64 to turn an image into embeddable code.