yahew.com The 88x31 button

The 88x31 button

GeoCities, 1997. An ad unit that became a friendship token, and a standard that lived in an HTML attribute rather than in any file.

1. The wall

Some examples, 200 of them, from three public archives. Every one of these pointed at somebody's website.

Best Viewed with Any BrowserAny Browser, with a magenta 'a'Any Browser, with a blue 'a'Best Viewed WITHViewable With Any BrowserBest viewed with ANY BrowserANY BROWSER, green on blackBEST viewed with EYESSite Best Viewed With A Computer MonitorAlways Best Enjoyed With, animated globeBest viewed With LINKSBest viewed with YOUR browserCatscape Meow! 2.0, a Netscape parodyGetFirefoxFirefoxFIREFOXFirefox, purpleTake back the webFirefox logo, animatedFirefox Now! NEWLynx Enhanced, with a bobcatLynx EnhancedLynx Friendly, with a black catLynx/386 EnhancedLYNX Now!Lynx/APC BobcatMacLynxDOWNLOAD THE CODEMozilla dinosaur, animatedMOZILLA Now!Netscape Ahora!Netscape NOW!NETSCAPE NOW! 3.0Netscape Now! 4.0OPERA 5 Free browserNeoCities.org, THE WEB IS YOURSAOL Instant Messenger, Click Here!Made on Amiga, animatedPower up your PC with BeOS, animatedNeoCities.org, THE WEB IS YOURS, pinkCommodore 64 Now!fortunecity.comPreviously on FortuneCityGeoCities Area 51, with an alienGeoCities, a red G over a city skylineGEOCITIES with Korean letteringGeoCities FHP, animatedGeoCities, orange on blueGeoCities Japan, 'Japan's largest community site'GEOCITIES, mirroredGeoCities, city skylineGEOCITIES, redGeocities, with a blue globeGeoCities, with a blue globeGEOCITIES, globe on blackGEOCITIES, teal on blackGEO CITIES, gold on blackGEO CITIES with a globe, pulsingGEOCITIES, animated splashStart With Us, GeoCitiesHosted By HoloNetNeocities, THE WEB IS YOURSNeoCities.org, THE WEB IS YOURSNeoCities.org, THE WEB IS YOURS, bluetripod, animated redMade with Macromedia DreamweaverGet Macromedia Shockwave PlayerGet Adobe Acrobat ReaderAloha Book guestbookAltaVista, with a mountain rangeAltaVista DownloadPOWERED BY AMDAmFTP Now!AMIGA FRIENDLYAmiga OS3, animatedAPACHE mod_perlPowered by APACHE 2.0Atari 2600 Now!e-Web Engine HTML Editors, with a red antBuilt with Microsoft NotepadFREE JAVA CodeBrain.comCursors by CometzoneTracked by TheCounter.comMADE WITH CASCADING STYLE SHEETSMADE WITH CASCADING STYLE SHEETSMADE WITH CASCADING STYLE SHEETSCSS is difficultCSE HTML Validatordebian POWEREDDONATE to PHP-NukeMade with GNU Emacs the right waycreated with EMACSSITE CREATED WITH Emacsemacs Now!Created with FRONTPAGE 2002Graphics by GimpGimp, FREEFree Guestbook by GuestWorldHacker POWEREDMaintained using HomeSite 2.0HTML Editor Now!HTML 3HTML 3HTML 4.01 Transitional<I><DREAM><IN><HTML>HTML ValidatedHTML VALIDATORPOWERED BY HTMLworldLINUX Now!, with TuxMade with WindowsMADE WITH A MACmade with Bracketsmade with LoveMADE WITH MediatorMade with NeocitiesMade with Notepad2made with viMade with Web pluscreated with Microsoft NotepadphpPowered by RubyThis site powered by vimKenn Neskitt's WebEditATARI Web-RingSomethin Awful BYOB webringSEGA Genesis dev ringSELECT BUTTON WEBRINGSelf-Insert webringWebSiteRing, Old-Site of the Day<Worlds> WEBRINGBest Viewed 800 x 600Save Animaniacs Now!AGPLv3 Free SoftwareThe Anti-Button CampaignAOL BROWSER No!Bandwidth Conservation SocietyBest 1024x768Best Viewed 1024x768 16Bit ColorHelp Stamp Out Spamming0U75K1R7 P4R4D1C3, green leetspeak pixel textOur Angel, Neocities <30x0961h, rendered as a barcode10 AM, with a PokeballBWE, with a globe and hearts1300wishesNightbug, green on black1441ml, with an anime figuresecret cottage, with an anime figure88888, red on black, animatedICE CUBE 3ATER2003 HORLEN AVE, a street sign22yk01, with a green clover25nightcord, anime eyes on pink2AIN net2cool4fP, pink on black2Dgorillaz2 Hearts Become 1, with two creatures39friend3DShamei blog410, white flowers4/3, a star-eyed face on black4leaf, with a rainbow617NET7STATION8BALL BICE9b39, The CafeAdDesigner.comAILANTHUS RECORDINGSamazon.com, and you're doneAppleGarden, a Japanese graphics siteFREE LOOK UP ASCIIcatGRADE ABeekeeping of UkraineFreakyFreddie's Free FunhouseBookmark this Page!booksbgCMD094SiteAdmin, a Russian site catalogChess, with a boardCLICK HERE!Club Nintendo ArchivesDoom2StuffLynn GoldGet Spear Now!b-Maxjoell websitea woman's face with a red logoDream GardenToiale lightLinkyBlogMeersalz Insel, VACANCIESmoonkittyMIKE TenayNew World.Personally ComfyI am Proud to be an AmericanRaceBuilderRogue Spear news, animatedAOL 4 BIZ Enterprise, America Onlineanimated text banner, gold on black

2. What you are looking at

A link with a face. Eighty-eight by thirty-one, usually under three kilobytes. Everything interesting about it is who made it, and why.

It started as browser advocacy

Netscape Now buttonNetscape Now 3.0 button
What the program handed out

Netscape ran a badge program, archived from May 1996, which gave you a graphic and told you exactly what to write underneath it:

This site is best viewed with Netscape Navigator 2.0. Download Netscape Now!

Pages rendered differently in different browsers, badly. A badge told you which one the author built for.

Then the free hosts made it universal

GeoCities buttonOfficial GeoCities button
The price of the space

GeoCities gave away web space, and the price was a link. From their member terms, last modified 22 November 1996:

The only code that we require to be on all of your html pages is a reference back to GeoCities.

They asked for a link and handed you an image, measured from the archive at 88 by 31. Millions carried one because the landlord required it. That is how a size becomes a habit.

The ad industry wrote the number down

88 × 31
The size they wrote down

On 10 December 1996 the Internet Advertising Bureau and CASIE announced the first voluntary standards for banner advertising: eight sizes, of which the smallest is 88 x 31, the Micro Button. Read what the committee says it did, though:

the Standards and Practices Committee of the IAB with input from CASIE has used market data to examine the full range of banner types [...] and sizes currently in use.

They cataloged the size. They did not set it. The badge came first and the ad unit was named after it.

And then people took it off all three of them

Made with Notepad buttonBuilt with Notepad button
What people made instead

Chaz Boston Baden ran one of the earliest pages of homemade buttons. His explanation, revised April 1997, is still the best one anybody has written:

It's all Netscape's fault.

Netscape [...] started it all, with their "Netscape Now!" buttons. Other people started making their own buttons, using the same style but substituting their own graphics and text. (Many of them kept the "Now!" lettering, as that's part of the joke.)

The shape got borrowed from an ad, then filled with a person. That is the turn.

What it turned into was a currency

Once anyone could make one it stopped being a credential and became an exchange, with a standing rule: host the file yourself.

I would ask that you upload my banner to your own site, and I will return the favor for you.

Sailor Io, GeoCities Tokyo/2666, snapshot 1999-02-03

Chaz's companion page is titled "Hazel's Friends and Acquaintances." Twelve of these, every alt just a first name. An ad unit used as a list of friends.


3. The size was never in the file

Everything above assumes these are all 88 by 31. Nineteen of the 200 are not, and you cannot tell by looking, because the size was never enforced by the image. It was enforced by two attributes that people typed by hand and asked each other to remember.

Site Best Viewed With A Computer MonitorBest viewed With LINKSLynx Friendly, with a black catNetscape Ahora!Netscape Now! 4.0OPERA 5 Free browserNeoCities.org, THE WEB IS YOURSAOL Instant Messenger, Click Here!Power up your PC with BeOS, animatedNeoCities.org, THE WEB IS YOURS, pinkAltaVista DownloadPOWERED BY AMDAPACHE mod_perlGraphics by GimpFree Guestbook by GuestWorldmade with LoveThe Anti-Button Campaign25nightcord, anime eyes on pink2AIN net

The 19 files that are not 88 by 31

FileActuallyWhat it says it is
best_viewed_with_monitor.gif 97 x 31 Site Best Viewed With A Computer Monitor
bestviewedlinks.gif 96 x 32 Best viewed With LINKS
lynx.gif 90 x 32 Lynx Friendly, with a black cat
netscape_ahora.gif 90 x 30 Netscape Ahora!
netscapenow40.gif 88 x 30 Netscape Now! 4.0
opera.gif 90 x 30 OPERA 5 Free browser
2bit-neocities.png 97 x 31 NeoCities.org, THE WEB IS YOURS
aim.gif 88 x 32 AOL Instant Messenger, Click Here!
beos_now_anim.gif 90 x 30 Power up your PC with BeOS, animated
button-NeoCities-5.png 88 x 30 NeoCities.org, THE WEB IS YOURS, pink
altavista2.gif 90 x 33 AltaVista Download
amd_powered.gif 85 x 30 POWERED BY AMD
apache-mod_perl.gif 90 x 30 APACHE mod_perl
gimp.gif 90 x 31 Graphics by Gimp
GuestWorldbutton.gif 87 x 31 Free Guestbook by GuestWorld
madewithlove.gif 91 x 33 made with Love
anti_button.gif 88 x 32 The Anti-Button Campaign
25nightcord.png 88 x 24 25nightcord, anime eyes on pink
2ainnet_2.png 88 x 30 2AIN net

Sixteen of sixteen period buttons carry both width and height. Across 707, 59 and 39 buttons on three modern collections, exactly one does, and it writes width="88px", which is not valid in a presentational attribute. Copied from CSS habits, by people who never had to type WIDTH=88.

Verbatim, geocities.com/SiliconValley/9422, snapshot 1999-01-28

<IMG SRC="netscape.gif" ALT="Netscape 3.0+" BORDER=0 HEIGHT=31 WIDTH=88>
<IMG SRC="iexplore.gif" ALT="IE 3.0+" BORDER=0 HEIGHT=31 WIDTH=88>
<IMG SRC="geocities.gif" ALT="Geocities" HSPACE=10 BORDER=0 HEIGHT=31 WIDTH=88 ALIGN=ABSCENTER>

Verbatim, owlman.neocities.org, fetched 2026-08-04

<textarea rows><a href="https://owlman.neocities.org"><img src="https://owlman.neocities.org/OwlMan/Banners/owlmanbanner8831.gif"></a></textarea>

A valueless rows, and no width, no height, no border, no alt. border=0 was never decoration: without it a linked image drew a two-pixel blue link border. It was a fix, and it stopped being typed when the bug it fixed stopped mattering.


4. The one pixel that got copied wrong

So the size was a request, and nobody was requesting the number Netscape wrote down. Their published specification does not agree with the file they shipped.

Netscape Now!

netscape_now.gif, measured from the file header: 88 x 31, GIF, 128 colors, single frame, 1,948 bytes.

Netscape Now Usage Guidelines, archived 1996-10-26

Minimum Size. The minimum size of the Netscape Now button is 88 by 32 pixels. The button may be displayed at a larger size, but all elements of the button must be increased in size proportionally.

Netscape's own pages said HEIGHT=31. The file is 31. The spec sheet said 32. The web copied the file, never the sheet.

Same document, two paragraphs later

No Alteration Allowed. The Netscape Now button must not be altered in ANY way. Do not shrink it; take it apart; change its proportions, color, or font; or otherwise alter it from the Netscape-supplied version.

Termination. Netscape reserves the right to immediately terminate permission to use this button to anyone not following these guidelines as determined solely by Netscape's judgment. Netscape may visit participating sites to check on compliance.

It required an application, could not be altered or combined with other graphics, and came with a mandatory sentence and link. Everything at the top of this page is that button, altered. This culture is formally a mass violation of the terms it came from.

Six days earlier: the EFF Blue Ribbon Campaign, archived 1996-10-20

All Web users are strongly encouraged to place a Blue Ribbon graphic on their servers. NOTE: You do NOT need to ask for permission to use these graphics.

Two badge programs, six days apart, with opposite terms. One required an application. The other told you to take it. The one people copied for thirty years is the one that told them not to.


5. There was no button wall in 1999

Roughly 950 archived URLs across sixteen GeoCities neighborhoods, Angelfire and Tripod. Not one carries a wall of 88x31 buttons. The wall is a revival-era form. Every page counted:

PageImagesCarrying 88 and 31
1999 geocities.com/SiliconValley/9422 7 3
1999 geocities.com/SiliconValley/1000 15 2
1999 geocities.com/Vienna/9326 20 2
1999 geocities.com/SiliconValley/9348 56 4
2000 geocities.com/Area51/1029 9 1
2001 geocities.com/SiliconValley/9014 26 3
2026 likehome.neocities.org/links 39 1
2026 urist.neocities.org/buttons 59 0
2026 anlucas.neocities.org/88x31Buttons 707 0

What a 1999 page had was a cluster of two to four: browser, host, guestbook, webring. The record in the sample is four. Each was a claim about how to view the page, not a portrait of its author.

Nobody in the period called it a button, with two exceptions

No heading anywhere in the period sample contains the word "button". The vocabulary was link, links, webring, award, banner. A sweep of 500 more pages for the string "88x31" returned nothing.

you could put our banner (not really a banner actually, it's more like a button) at one of the corner in your web site. [...] The size of this banner (button) is 88 X 31.

Info Site, geocities.com/Tokyo/4467, snapshot 2000-05-22

Preferable sizes for banners are more or less 340x50 pixels. For buttons, more or less 88x31 pixels. But if not, I guess I'll just deal with it^^

"Release", a Cardcaptor Sakura fansite, snapshot 2009-08-06

Nobody in 1999 wrote <h2>88x31</h2>. Every button page today does. The vocabulary is entirely retrospective.


6. Make one

Every default below is a measured median from the corpus, not a taste call. This encodes a real GIF89a in the page, with no library, and hands you the file. Two of the makers the archives currently recommend export a PNG named .gif.

Your button at actual size actual size
Your button at four times size
4x

encoding...

Drop an image here, or choose a file. It stays in your browser.

About 24 by 24, smaller than a favicon. One bold shape, no fine detail, no text. A silhouette survives; a photograph turns to mush.

Ground
Ink
Flash to

And the part that made it a currency

Save the file to your own server, then paste this. The ritual was never the image, it was copy it to your server first: spend your own disk on someone else. It is why so many still resolve.

Chaz Boston Baden asked for two things in 1997: copy them to your server first, and put width=88 height=31 in the IMG tag. Both are still asked, by people who never heard of him.

YAHEW! Old Web Guide

And here is ours, if you want it. Save it to your own server and paste this, the way everybody up there asked you to.


Field marks

How to spot a real one.

made with Love91 × 33

Ten percent of them are the wrong size

Files measure 90x30, 91x33, 97x31, 88x24. They looked identical because the attribute overrode the file.

left 0 · right 0 · top 0 · bottom 0

No padding, anywhere

Median gap between border and nearest content pixel is 0px on all four sides. At 31 tall nobody could afford any.

outsetinset

Bevels push out, never in

Outset beats inset 35 to 1 in one sample, 62 to 1 in the other. And a bevel is 2px: at actual size 1px reads as noise.

Any Browser, with a magenta 'a'256 colors

Three quarters are anti-aliased or dithered

The "hard pixel edges" rule is a 2008 blinkie instruction, not a 1990s one. Only 9% stay inside the 216 web-safe colors.

e-Web Engine HTML Editors, with a red ant2 frames

The animation is a color flash, not a marquee

38% of animated buttons hold every shape still and strobe the palette. Scrolling text is 1 in 101.

24 px icon · 64 px type

Icon left, text right is one button in seven

Type-only is 36%, full-bleed art 38%. The original netscape_now.gif has no split at all.

What it solved, and what took it

A row of these said what your site was made with, who you read, and who would point back. Two kilobytes, and it belonged to you, because you copied the file onto your own server.

What replaced it is a row of rectangles you did not make, pointing at places you did not choose, counting something you cannot see. That is a contrast in form, not a documented cause: nobody wrote down that share widgets killed button walls. What is datable is stranger. Netscape ended support on 1 February 2008, so the most-copied button on the web spent its last years pointing at a product that no longer existed.

A link with a face, and somewhere of your own to keep it.

Back to the directory

Sources, and what is deliberately absent

Prev Teletext & Minitel Next The blinkie