Summary
A badge generator is a tool that combines a shape, an icon, a short title and your colors into one small graphic. To make a badge free and privately here, type a Title of up to 12 characters, pick one of 12 icons, choose Circle, Square, Shield or Hexagon, set the Background, Text and Border colors, and press Download SVG (scalable) or Download PNG. The badge is built in your browser as a single SVG, so nothing is uploaded; you can check the Network tab in DevTools.
The SVG is a vector file that stays sharp at any size. The PNG is transparent outside the badge outline and can be saved at 1x, 2x or 4x the on-screen size, so a 120 pixel badge exports as 120, 240 or 480 pixels square. The preview, the SVG and the PNG all come from the same drawing, so the file you save matches what you designed. If you need an exact brand color first, the color code converter turns HEX, RGB, HSL and CMYK values into one another.
Table of Use: Badge Ideas and the Settings Behind Them
| Use case | Settings to choose | File to download |
|---|---|---|
| Course or skill level | Title "Level 3", Subtitle "Python", Trophy icon, Shield shape, Size 200 | SVG for a website, or PNG at 800 x 800 px for slides |
| Staff or speaker marker | Title "STAFF", Subtitle "Summit 2026", Star icon, Hexagon shape | PNG at 4x for programmes and printed name tags |
| "New" or "Sale" shop sticker | Title "NEW", icon None, Square shape, strong Background color | PNG at 2x to lay over product photos |
| Icon-only reward | Clear the Title, leave the Subtitle empty, pick Gold medal, Circle shape | SVG or PNG; the icon is drawn large and centred |
| Starting point for a website icon | Circle shape, Size 200, one short word or a single icon | PNG at 4x (800 x 800 px), then convert it to ICO |
Features
- Four shapes. Circle, Square (with softly rounded corners), Shield and Hexagon, each with a border about one twentieth of the badge size thick, and never thinner than 3 pixels.
- 12 icons or none. Star, Trophy, Target, Check mark, Heart, Fire, Gem, Glowing star, Thumbs up, Military medal, Gold medal and Sports medal. With no title or subtitle the icon fills the badge centre.
- Title and subtitle. Up to 12 and 20 characters. Text that would spill past the edge is shrunk automatically to fit.
- Three color pickers for Background, Text and Border. A warning appears when the contrast ratio between text and background falls below 3:1. As of October 2026, the W3C's WCAG 2.2 (success criterion 1.4.3) asks for 3:1 for large text and 4.5:1 for normal text at level AA.
- Two downloads. badge.svg for a scalable vector, and badge.png at 1x, 2x or 4x. The Size slider runs from 60 to 200 pixels, so the largest PNG is 800 x 800 pixels.
- Private by design. The drawing and the PNG conversion happen on your device; nothing is uploaded.
What it does not do: there is no logo upload, no custom font, no gradient or see-through fill, and the title and subtitle each take one line. For those, download the SVG and finish it in a vector editor.
How to Use the Badge Generator
- Under Content, type the Title (up to 12 characters) and, if you want one, a Subtitle such as a year or level.
- Under Icon, click one of the 12 icons, or None for a text-only badge.
- Under Shape, click Circle, Square, Shield or Hexagon.
- Under Colors, set Background, Text and Border. If the low-contrast note appears, make the text and background further apart in lightness.
- Drag Size to choose 60 to 200 pixels.
- Click Download SVG (scalable), or pick a pixel size in the menu beside Download PNG and click it. If a browser cannot create the PNG, the tool says so and you can download the SVG instead.
Who Can Use It
Teachers and trainers can make level or reward badges for a class or course and hand out matching awards from the certificate generator. Event organisers can build staff and speaker markers, then add entry passes from the ticket generator, name stickers from the label generator and a scannable code from the QR code generator.
Shop owners can make "New" stickers for listings, and designers can open the SVG in Figma, Inkscape or Illustrator to restyle it. To match a palette, sample colors from a logo with the image color picker or the web color picker.
After exporting, resize the PNG with the image resizer, reduce its file size with the image compressor, place it on a photo with the image overlay tool, or make a website icon with the PNG to ICO converter or favicon from image tool.
FAQs
How do I make a badge online for free?
Type a Title of up to 12 characters and, if you like, a Subtitle of up to 20. Pick one of 12 icons or None, choose Circle, Square, Shield or Hexagon, set the Background, Text and Border colors, and drag the Size slider between 60 and 200 pixels. The preview updates as you type. Press Download SVG (scalable) or Download PNG when it looks right. No sign-up is needed.
What is the difference between an SVG badge and a PNG badge?
An SVG is a vector file: it is described by shapes and text, so it stays sharp at any size and suits websites, print and design tools such as Figma. A PNG is a fixed grid of pixels that opens everywhere, including chat apps and slide decks. Here the PNG can be 1x, 2x or 4x the badge size, up to 800 x 800 pixels.
Is my badge uploaded anywhere?
No. The badge is built as an SVG in your browser and the PNG is drawn on a canvas on your own device, so the title, subtitle and colors you choose stay there. The tool makes no network request with your design, which you can confirm in the Network tab of your browser DevTools while you click the download buttons.
Why does my long title look smaller than the subtitle or other badges?
The title normally uses one eighth of the badge size as its font size and the subtitle one twelfth. The tool measures the text first, and if the title would be wider than about 72% of the badge, or the subtitle wider than about 60%, the font shrinks until it fits, down to a minimum of 4 pixels. The download uses exactly the same layout as the preview.
Will the icons look the same on every device?
Eleven of the icons are emoji; the check mark is a plain ✓ text character drawn in your Text color. In the SVG file the emoji are drawn by the emoji font of whichever device opens it, so Apple, Windows and Android versions differ slightly. The PNG is rendered when you export, so it keeps the icon exactly as your browser drew it. Choose the PNG when the precise icon style matters.
Can I make a badge with a transparent background?
Partly. The PNG is transparent outside the badge outline, so the corners around a circle, shield or hexagon show whatever sits behind the badge. The shape itself is always filled with the Background color, because the color pickers have no opacity setting. If you need a see-through fill, download the SVG and change its fill in a vector editor.
Can I add my own logo or image to the badge?
Not in this tool. The icon slot offers 12 built-in emoji icons or None, and text uses Arial or the nearest sans-serif font on your device. To add a logo, download the PNG and combine it with your artwork in any image editor, or place it on a photo with the image overlay tool. The SVG can also be edited by hand.