Stackboo.

Free tool

Directory Badge Generator

Make a Featured on badge for your directory or your site: choose the text, an icon or your logo and the colours, then download it as an SVG or PNG and paste the HTML.

Runs in your browser: nothing you type is sent to us.

Icon
Colours
Shape

Your badge

Featured on Your Directory
On a light page
Featured on Your Directory
On a dark page

232 by 64 pixels. The SVG stays sharp at any size; the PNG is 696 by 192 for places that do not take SVG.

Show it on your site

Upload the file to your own site, then paste this where the badge should appear. Fill in the two addresses and the code updates.

<a href="https://yourdirectory.com/?ref=yoursite.com" target="_blank" rel="noopener" title="Featured on Your Directory">
  <img src="https://yoursite.com/badges/featured-badge.svg" alt="Featured on Your Directory" width="232" height="64" />
</a>
The example addresses are placeholders: replace them with your own.

How it works

  1. 1

    Write the badge

    Set the small line (such as "Featured on") and the name, then pick an icon or add your own logo.

  2. 2

    Choose the look

    Start from a colour preset, adjust the three colours, and check the badge on a light and a dark page.

  3. 3

    Download and paste

    Save the SVG or PNG, upload it to your site, and paste the ready-made HTML where it should appear.

Questions

What is a directory badge?

A small image, usually "Featured on" plus a name, that a product shows on its own site to say it is listed in a directory. The directory gets a link back from every product that shows it, and the product gets a mark of where it appears.

Why would a directory ask for a badge?

A badge on the product's site is a backlink to the directory, and it shows visitors that the product is listed somewhere. Many directories give a free listing to products that show their badge, and a paid one to products that do not.

Which file should I use, SVG or PNG?

Use the SVG where you can. It stays sharp at any size, it is tiny, and it works in an image tag on any page. The PNG is for places that only take a normal picture, such as some email tools, forums and slides. It is drawn three times larger than the badge so it stays sharp on high resolution screens.

How do I put the badge on my site?

Upload the file to your own site, then paste the HTML from the tool where the badge should appear, with the two addresses filled in. The HTML links the badge to the directory page and gives the picture a size and a text description, so the page does not jump while it loads and screen readers can read it.

Can I use my own logo?

Yes. Choose a PNG, JPEG, WebP, GIF or SVG picture under 400 KB and it takes the place of the icon. It is read by your browser and drawn into the badge on your computer. It is never uploaded to us.

Will the text look the same on every computer?

The badge uses the clean sans-serif font each device already has, so the letters can look a little different from one device to the next while the layout stays the same. If you need identical letters everywhere, download the PNG, which is a fixed picture.

Is anything I type or upload sent to you?

No. The badge is made in your browser and nothing is stored or sent to us.

More free tools

One email a week

The AI products that launched this week and the top of last week's board. No ads in it, and you can leave with one click.

We use your address only for this email. See the privacy policy.

Launching a SaaS or AI product?

List it on Stackboo for free. It is ranked by votes, not budgets, and reviewed by a person.