The proposal for a Geotag Icon was floated in a blog post entitled A web standard icon for geotagging by Bruce McKenzie, who moved from in-car navigation to geocaching and then revisited geotagging—inspired by David Hall.
The final product is very much a community-designed icon, including significant contributions from Chris Messina (red!), Stephen Weber (globe), Mullenkedheim and HBuzacott on GeoTagging Flickr (angled pushpin, partial globe), and Ricardo (rounding with style!).
The original proposed colours were brown (#996633 and #cc9966), which seemed to make sense on a number of points. Firstly brown is a very “earthy” colour, and geotagging involves sticking virtual markers into the Earth. As such, brown might provide a further visual cue as to the purpose of the icon (not a feature of the feed, OPML, or Share icons). Brown did not seem a popular choice for an icon, so it would be distinctive. However, at 16px light browns looks indistinct or “muddy” with low contrast against the white pin, while darker browns look too deep.
Much of the subsequent design used reds (we went with #990000 and #cc0000), although concerns were expressed that there are a number of other red icons. Additionally red could potentially be confused with the orange of the feed icon, and is associated with alerts/ warnings.
Ultimately the community preferred red.
The pushpin and globe
The final design comprises two elements that combine “tag” (the pushpin) with “geo” (the globe).
The pushpin is an icon in its own right. Sticking them into maps is so typical that it gets a mention in the dictionary (OS X):
Pins with round heads look like keyholes when outlined in an icon, confusing our intention. Pushpins with sharply-angled bases look like a symbol for the ladies room or a Lilliputian ballerina when outlined at a small size. Hence the pushpin at a 45 degree angle with a curved base element.
As much as we’d like to see continents or grid lines on the globe at 512px, they just don’t scale down to 16px at all well—the size at which the icon is likely to see the most use. Globes feature in a number of icons, but again at 16px tend to look pretty much the same—like well-fed bullet points.
The final design uses a partial globe; the rest of the globe is suggested by the curvature. Overlying the pin on the globe completes the illusion that the pin has been stuck into it.
At 16px the design scales down very well, with no pixel-by-pixel editing required (shown magnified):