How to add a "made by" badge to your website, and what to link it to
A 'made by' badge is the small 'by Your Name' tag in the corner of an indie product. It takes ten minutes to add and it is one of the few pieces of marketing that keeps working after you stop thinking about it. This covers where it goes, what it says, a static version you can paste today, and the one decision most people get wrong: what happens when somebody clicks it.
By Utkarsh Kushwaha · Published
Why makers put their name on the corner of the page
The habit spread through the indie hacker community after a 2020 write-up by Jakob Greenfeld. He had put a tiny 'by Jakob Greenfeld' badge in the lower-right corner of the landing page for Gum Spy, one of his products. Shaan Puri found his work through that badge and mentioned it on a podcast, and Greenfeld wrote afterwards that he had made dozens of sales and picked up hundreds of new followers and newsletter subscribers 'only thanks to the tiny badge'. He credited the badge's code to Pieter Levels, who had been doing the same thing on his own products.
That is one story, and nobody should expect a podcast mention from a corner link. The mechanism it shows is the ordinary one, though, and it holds at any size: a product with a person visibly behind it gives a curious visitor somewhere to go next. Most visitors ignore the badge. The few who click are the ones asking 'who made this, and what else have they made?', and they are the best visitors you will get all day.
It works especially well when your customers are other makers and developers, because to them a name on the corner reads as a peer, not a company. It works less well on a product that deliberately looks like a large company, where a personal signature undercuts the look you chose.
Where to put it
Bottom corner, fixed to the viewport, on every page. Fixed, because the visitor you want is halfway down a page using the product, not at the footer. Every page, because most traffic lands on a deep page from search or a shared link and never sees your homepage.
Pick the corner by what already lives there. Chat widgets, cookie banners and 'back to top' buttons almost all sit bottom-right, so if your site has any of them, use bottom-left. On a phone, check that the badge does not cover a sticky call-to-action bar or the last item in a mobile menu; a badge that steals a tap from your own interface is costing you more than it earns.
Keep it small: one line of text, optionally a 20px avatar, and a tap target of at least 32px tall so it can be hit on a phone without being hit by accident. Hide it when printing.
What it should say
'by Your Name' or 'made by @handle'. Both read as a signature. Avoid 'Powered by', which reads as a vendor credit, and avoid anything that sounds like an offer, which reads as an ad and gets ignored like one.
A photo helps more than you would expect. A face is recognisable at 20px where a name is not, and it answers 'is this a real person' before the visitor has read anything. Use the same photo you use on X or GitHub, so the person who clicks through sees the face they just saw.
A static badge in plain HTML
This is the whole thing for one site: an anchor, fixed to the corner, with its styles scoped to one class. Paste it before the closing body tag and change the name, photo and link.
One caveat that bites more often than it should. Because it lives in the host page's DOM, the site's own CSS applies to it. A global rule such as img { display: block } or a reset that restyles every anchor will quietly break its layout, so check it on every site you paste it into, not just the first. Rendering the badge inside a shadow root is the way to make it immune, at the cost of needing a few lines of JavaScript.
<a class="made-by" href="https://yoursite.com" target="_blank" rel="noopener">
<img src="https://yoursite.com/avatar.jpg" alt="" width="20" height="20">
by Your Name
</a>
<style>
.made-by {
position: fixed; right: 16px; bottom: 16px; z-index: 50;
display: inline-flex; align-items: center; gap: 8px;
min-height: 32px; padding: 6px 12px 6px 6px; border-radius: 999px;
background: #fff; color: #111; text-decoration: none;
font: 500 13px/1 system-ui, sans-serif;
box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}
.made-by img { display: inline; border-radius: 50%; }
@media print { .made-by { display: none; } }
</style>What to link it to, which is the decision that matters
Most badges link to the maker's X profile. It is the obvious choice and it wastes most of the click. The person who clicks a 'made by' badge has just used something you built and liked it enough to wonder who you are. The question in their head is 'what else has this person made?', and an X profile answers a different one: what you have posted this week. Your other products are in there somewhere, a scroll away, below a thread about something else.
Link to a page that answers the question actually asked: every product you have shipped, one line each, with your socials underneath for the people who want to follow. A personal site with a projects list does this. So does a single hand-written page. Either one is better than a profile on a platform you do not control, whose layout is built to show your latest posts rather than your work.
Better still is not making them leave. If the badge opens a small panel in place, listing your other products right there on the page, the visitor can see the list without abandoning what they were doing. That is a larger change than a static link, and it is the difference between a badge that gets someone to follow you and a badge that gets someone to try your next product.
When the static version stops being enough
The badge above is exactly right for one site. The trouble starts at three or four. If the badge lists or links to your products, every new launch means editing it on every site you have ever shipped, in whatever framework each one was built with, and redeploying each of them. In practice nobody does, and the badge on your oldest project quietly advertises a list from two years ago.
The fix is to keep the list in one hosted place and have a small script on each site read it, so shipping something new is one edit and every existing badge updates by itself. You can write that script yourself in an afternoon, or use a hosted maker badge; the comparison guide on this site covers both, including the free options.
Questions people ask about this
Does a 'made by' badge hurt conversions?
Not measurably when it is small, in a corner and out of the way of your own buttons. What hurts is placement: a badge that covers a sticky call-to-action on mobile, or that looks like an ad, costs clicks on the thing you actually want people to press. Put it where nothing important lives and it is simply ignored by the people who are not interested.
Should the badge link be nofollow?
On your own products, no. A link from something you made to a page about you is exactly the kind of honest link search engines expect. It is different on sites you build for clients: Google's spam policies name widely distributed links in the footers or templates of many sites as a link scheme, so on client work use rel="nofollow" and your plain name as the link text, never keywords.
Can I add a 'made by' badge to Webflow, Framer or WordPress?
Yes. Any platform that lets you add custom code before the closing body tag can carry one: in Webflow and Framer it is the site-wide custom code setting, in WordPress a footer HTML block or a child theme. The install guides on this site give the exact setting for each platform.
Left or right corner?
Whichever one is empty. Bottom-right is the convention, but it is also where chat widgets and cookie notices live, so on any site that has one of those, bottom-left is the better corner.
Where Make Taksh fits
Make Taksh is one line of code you paste into each site you own. It renders a small badge in the corner that lists everything you have shipped, reading from one hosted list, so adding your next project is one edit and every site you have already installed it on picks it up within minutes. It is under 8 KB, renders in a shadow root so it cannot touch your CSS, sets no cookies, and draws nothing at all if it fails to load.