Origins in Web 1.0
In the late 1990s, when Yahoo! was a manually curated folder directory and Google was just starting out, discoverability on the web was community-driven. Webmasters relied on Webrings and Link Exchanges to direct traffic.
Instead of text links or giant banners, developers settled on a compact standard size: 88 pixels wide by 31 pixels tall (often written as 88x31). It was small enough to fit on any sidebar, header, or footer, and lightweight enough (usually under 2KB) to load over slow 56k dial-up connections.
The Netscape & IE Browser Wars
The format exploded during the browser wars. Netscape Navigator and Microsoft Internet Explorer would distribute "Best viewed with..." badges, which web creators placed on their sites as a badge of honor (or compliance).
Following that, software utilities (Winamp, ICQ, Notepad), tech movements (Valid HTML, Made with Linux, Anti-Flash), and personal fanlistings began making their own badges. If you loved a band, a anime series, or a text editor, you displayed its 88x31 button on your site.
Design Characteristics of Classic Badges
Classic 88x31 badges had a highly distinct visual language:
- Outset Borders: Standard 3D gray beveled edges, imitating Windows 95/NT system windows.
- Monospace & Pixel Fonts: Font rasterization was coarse, so pixel-aligned fonts like Silkscreen and Tahoma (at 8pt size) were used to guarantee readability.
- Text Outlines (Strokes): Due to dark and noisy backgrounds, designers drew 1px solid black borders around white texts.
- Dithered Gradients: Color palettes were limited, leading to pixelated, textured dither patterns.
- High-Contrast Animation: Blinking alerts, scrolling marquees, and flashing colors.
Frequently Asked Questions
Why are they exactly 88x31?
There is no official W3C specification that defined the 88x31 size. It emerged naturally in Netscape's layout designs and became a de-facto standard due to its aspect ratio (roughly 2.8:1), which fit perfectly on early 640x480 and 800x600 screen resolutions.
How do I display my button on my Neocities/IndieWeb site?
Once you design and export your button, host it on your site and share it with others using this standard HTML snippet:
<a href="https://yoursite.com" target="_blank"> <img src="/images/button.gif" width="88" height="31" alt="My Web Button"> </a>
How does OneStopSite export sharp animated GIFs?
Unlike older tools that take screenshots of standard web pages, OneStopSite uses a modern HTML5 canvas. It compiles frame buffers into an LZW-compressed GIF stream in real time, guaranteeing exact color accuracy and pixel sharpness.
Ready to build your retro web badge?
Open Editor now