Adding badges to my website
Published on
Updated on
I’ve been coming across more neocities websites recently. It’s really cool how many people there hand craft their HTML and CSS to really make a website theirs. One idea I’m stealing for my website is adding web badges.
These web badges are often small images that shows a product or message. Historically, it dates back to when Netscape in 1996 made the Netscape Now! badge.
Since then, the Geocities picked it up and standardized many of the web badges to have a pixel size of 88x31. These badges are sometimes animated as GIFs, though they usually don’t hold dynamic information.
In recent times, we’ve seen badges hold dynamic information such as code coverage on GitHub. Also, Wikipedia has Userboxes that people can add to their User Pages to show dynamic information about themselves. Ruben’s User Page showcases many of these.
Though to get started with my own website, I decided to look primarily at the traditional 88x31 style web badges. Looking around the web, there are some webpages that have large listings of web badges:
https://capstasher.neocities.org/
From there, we can (1) pick the ones we like (2) download them, and (3) upload them to our webserver. We can then create the img tag in our footer to showcase them.
<img width="88px" height="31px" src="/badges/fedora.gif" />