HTML5 logo signals the future of the web is upon us

The W3C introduced an HTML5 logo a couple of days ago. It suggests they now feel the time is right to really push the use of the various open web technologies this logo represents. I was interested to see how the logo went down online and if it has any chance of surviving.

Although the W3C released this logo, they have stated that it’s not the ‘official’ HTML5 logo. They are first waiting to see the reaction it receives and if the community embraces it, they will then adopt it. A decision should be made in the first quarter of 2011. Though it will be interesting to see what they do if there is a continued negative reaction to it – just how would they choose and introduce the ‘official’ logo that would need to replace it.

'HTML5 logos

Mono and colour versions of the HTML5 logo.

As well as a selection of logo versions to download from the W3C HTML5 logo page, there is also a badge builder, that allows you to select the various technology classes relevant to your site, to be added onto a custom logo for you to use. The HTML5 logo is licensed under Creative Commons Attribution 3.0 Unported, so can be used freely.

It should be noted though that it does not imply validity or conformance. Therefore, perhaps the W3C are more interested in promoting HTML5 as an idea with this logo, than it is in actually encouraging its use at this stage. As for what the logo actually represents, here are a couple of quotes that the W3C had to say on the matter:

The logo is a general-purpose visual identity for a broad set of open web technologies, including HTML5, CSS, SVG, WOFF, and others. In addition to the HTML5 logo there are icons for eight high level technology classes enabled by the HTML5 family of technologies. The icons can be used to highlight more specific abilities, such as offline, graphics, or connectivity.

Imagination, meet implementation. HTML5 is the cornerstone of the W3C’s open web platform; a framework designed to support innovation and foster the full potential the web has to offer. Heralding this revolutionary collection of tools and standards, the HTML5 identity system provides the visual vocabulary to clearly classify and communicate our collective efforts.

'HTML5 logo classes

Icons for the eight high level technology classes (from left to right): semantics / offline & storage / device access / connectivity / multimedia / 3d, graphics & effects / performance & integration / css3.

'HTML5 logo t-shirt

The HTML5 logo even has an accompanying t-shirt (and very nice it is too).

Ocupop, the company responsible for designing the logo, not only shared some of the processes involved in designing the logo (as can be seen in the images below), but they also had this to say about the logo, its use, and why they chose orange as its main colour:

Formal and fun, forward and fully evolved, this HTML5 logo is imminently extensible yet refreshingly complete - the W3C encourages you to use it as-is or build on it to make it even better. Just like the technology it lives amidst, setting a common and comprehensive baseline is just the beginning.

Why orange? Orange is a very hot, fast, and striking color, but not nearly as intimidating or aggressive as red. Orange implies excitement, yet with undertones of caution. Orange grabs your attention, but doesn’t scream for it. In Chinese color theory, orange is the color of organization. In medieval heraldry, orange was symbolic of strength and endurance. Sexy with a safety net, organized, powerful and lasting. HTML5, this logo, and orange go quite well together.

'HTML5 logo process by Ocupop

HTML5 logo development process and sketches by Ocupop.

Soon after the W3C announced the new logo on their site it wasn’t long before the internet was abuzz with the news. What followed was a mix of those that liked it, those not bothered either way and the more vocal contingent that were quite negative. It just seems to be the trend now that whenever a high profile logo or rebrand gets launched there are people eager to criticise. I’m not even convinced all of them actually dislike the logo, I think many just jump on the bandwagon and enjoy thinking up witty put downs.

Besides the comments, there were also those quick to create their own version of the logo. Amongst them, were those showing technical merit, such as recreating the logo with just CSS, and others having some fun by taking well known existing logos and crossing them with the new HTML5 logo, to make hybrid designs (see below). At least it shows the logo has made some sort of impact and inspired people enough to do these alternate versions.

'HTML5 logo mixes

HTML5 logo created using CSS by Stu Greenham (above left) and HTML5 logo meets Rawkes by Phil Banks (above right).

'HTML5 logo mixes

HTML5 logo meets Transformers (above left) and the Twitter Fail Whale (above right).

I believe the W3C and Ocupop have put together a logo that people generally will want to have on their sites. They seem to have gone for a look that wouldn’t look out of place on many of the sites being built today. And the fact that people are encouraged to reimagine the logo as they see fit, is quite refreshing and will allow them to adapt it to their own site.

Personally, I like the logo and its accompanying identity system. The look and feel fits with the technology it represents, plus it’s bold, fun and easily recognisable. Whether or not it does get adopted officially by the W3C, we will have to wait and see. Though I’m sure we’ll be seeing this logo all over the internet soon (at least for the time being), especially as more and more sites use HTML5 as standard.

About the author

Paul Galbraith is a logo and brand identity designer, working with startups, small businesses and entrepreneurs in the UK, USA and beyond.