How do you add a “Built by” badge to a website?
Three lines of HTML, pasted before the closing body tag. Here is the whole thing, free, no strings:
<!-- BuiltByBadge --> <a href="https://yoursite.com" rel="me" style="position:fixed;right:16px;bottom:16px;font:500 13px/1 system-ui;color:#faf8f4;background:#1a1815;padding:9px 14px;border-radius:99px;text-decoration:none"> <span style="color:#7c85f0">●</span> Built by @yourname</a>
Change the href to wherever you want people to land, change the handle, done. It renders as a small dark pill in the bottom-right corner of the page. It weighs about 200 bytes, makes zero network requests, and works on every site and framework because it is just an anchor tag.
Where should the badge link?
One place, forever. The badge’s whole value is that every site you ship points at the same URL, so the link keeps working no matter how old the site is. A hub page works best: one page with your face, a line about you, and everything you’ve built. If you don’t have one, a personal site or your strongest project is fine to start; you can point future badges at a hub later without touching old ones, as long as the URL you pick now is one you’ll keep.
Why not use a script or a widget?
Because a script is a dependency and a credit line shouldn’t have dependencies. A script can load slowly, break, or die with the service that hosts it, and search crawlers mostly don’t execute JavaScript, so a script-drawn badge is invisible to them. The static version is a real link on the page: it counts as a backlink, it renders instantly, and it will still work in ten years. I wrote up the full comparison in what crawlers actually see.
Can I put my photo in it?
Yes, and it’s worth it. A face turns a credit line into a person. Add one image tag inside the anchor, still static, still three lines:
<!-- BuiltByBadge --> <a href="https://yoursite.com" rel="me" style="position:fixed;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;font:500 13px/1 system-ui;color:#1a1815;background:#fff;border:1px solid #d9d3c5;padding:6px 14px 6px 6px;border-radius:99px;text-decoration:none;box-shadow:0 2px 10px rgba(26,24,21,.08)"> <img src="https://yoursite.com/me.jpg" alt="" width="22" height="22" style="border-radius:50%"> Built by <span style="color:#2b35c5">@yourname</span></a>
Host the photo on your own domain so it never breaks. The one cost is a single small image request.
What does rel="me" do?
It marks the link as pointing to another page about you. Mastodon and other IndieWeb tools use it to verify identity: put a rel="me" link on your site pointing at your profile, and back, and the two confirm each other. It costs nothing to include and quietly makes the badge part of your identity across the web.
Do I have to maintain it?
No, and that’s the point of doing it this way. The badge only knows one URL. Everything that changes, new projects, new photo, new bio, changes on the page it links to. If you use an AI assistant to build sites, the BuiltByBadge skill automates the whole thing: it sets up your hub in one conversation and then asks, each time you finish a site, whether you want your badge on it. But the snippet above is yours either way.
Built by