The New Standard Feed Icon

On December 14, the Microsoft RSS Team made an announcement on their blog. This announcement is extremely important on many levels and I’m really surprised there hasn’t been more talk about it. And as such, I figured I would take this opportunity to jump all over that shit and try and get things moving! So what was so important, you ask?

I’m excited to announce that we’re adopting the icon used in Firefox. John and Chris were very enthusiastic about allowing us (and anyone in the community) to use their icon. This isn’t the first time that we’ve worked with the Mozilla team to exchange ideas and encourage consistency between browsers, and we’re sure it won’t be the last.

I was pretty excited myself, when I read the post. Partly because there is a chance we might see an end to those horrid XML and RSS buttons. But mostly because Microsoft is doing the right thing. They realize Mozilla has already established an identity for syndicated content through Firefox and listened to what users had to say about their proposed icons.

So there I was – content that something might happen and assumed it would be months, maybe even years before we see people rolling the icon out in other applications and websites across the ol’ intarweeb. Then I stumbled upon Asa Dotzler’s post. Asa’s a part of the Mozilla Foundation – founder/leader of the Mozilla QA and Testing program as well as co-founder of the Spread Firefox project.

Something as small as a name or icon choice can make a big difference in how approachable a new feature is. I’m encouraged that we’re further distancing browsers from the awful “RSS” as a feature name and icon identifyer. We don’t call web pages “HTML+CSS+JavaScript Pages” and we don’t identify them in the browser using little icons containing “HTML” and “CSS” acronyms; We shouldn’t do it for feeds either.

Did he hit the nail on the head, or what? After reading that paragraph alone, I was all fired up and ready to help enforce this new standard. I keep calling it that – knowing full well that it’s not… yet. But it will be and now’s the time to help push it along to ensure it becomes a standard.

Mozilla has done a great job of making feeds more accessible. They presented an icon to identify a site that had content that could be syndicated and made it easy to use by introducing Live Bookmarks. Now it’s our turn! By our, I mean web site designers, developers, bloggers… anyone who contributes to a website in any way. Do away with those disgusting orange buttons, start using “feed” for all kinds of syndication and drop one of these icons on your site. Oh… you don’t like orange? Dude, me neither! And this is where I do my part…

I’ve taken the 32×32 icon presented on the MS blog and reproduced a vector version. There are no size restrictions, since it’s vector. You can go as big or small as you want and it’ll look great! The lines can scale as you resize, so everything stays in proportion. It’s easily customizable for anyone who is familiar with Adobe Illustrator or Photoshop. I’ve put together a little package containing 18 files. 14 PSDs in different sizes ranging from 16×16 to 128×128. They come in the default orange and grayscale for those who would prefer to customize them to match their site – as I’ve already done. There’s also 4 Illustrator files. Both colour variations which come in 2 versions of Illustrator – CS2 and 10 for those running older versions.

Download the Feed Icon Package from feedicons.com

Customizing the icon can be done one of 2 ways. If you’re familiar with Illustrator, definitely use it to manual edit the colours. It’s easy enough – there’s 2 strokes and a 3-tone gradient, that’s it. If you’re not an Illustrator user, you can use the PSDs and the “Color Overlay” layer style to add colour to the grayscale versions. As you can see from the examples to the left, the Illustrator method comes out cleaner with more variation in colour. But if you’re going with a smaller version, you can hardly notice a difference. Instructions are included in the readme file.

I hope there’s others out there that see the positive side of this and are willing to help enforce this new standard. If you do add the icon to your site, drop me a comment or email – I’d love to see it on your site!

Here’s to the future of a shitty-syndication-icon-free internet! Now, go!

Update December 22, 2005Introducing FeedIcons.com – the new home for our little orange friend!

Update June 16, 2006: Proposed guidelines have been published by Mozilla Foundation’s executive director, Frank Hecker. They include visual guidelines as well as basic terms of use.