The New Standard Feed Icon
Monday, December 19th, 2005
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.
Update December 22, 2005: Introducing FeedIcons.com - the new home for our little orange friend!
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 seen 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!
142 people have had something to contribute so far.
Very cool.
Thanks, Matt!
Reply
niceee Matt,
sorry i didnt reply on aim I was sleeping
Thanks for the icons.
Reply
One word.
Trailblazer.
Reply
Cool! Good work on the icons.
Reply
Free stuff. So very nice. Give this man a raise!
Reply
This is great. What better way to truly standardize the icon than to start using it on sites now! Thanks!
Reply
Sweet Matt, very sweet.
It’s great news that MS are trying to standardise things, especially taking other peoples ideas and using them.
Reply
Absolutely brilliant Matt. Thanks very much…
Reply
Great stuff!
Reply
Going to use this on the new design , thanks.
Reply
The only stumblng block I see for mass adoption is that Safari uses a blue RSS icon in the address bar to denote sites with feeds. This goes back to when everyone was indicating their feed with the “horrid” buttons.
I agree that using feed is much easier for non-tech people to understand. Part of the big problem with RSS is that you have to explain the acronym and the technology first before you can talk about the benefits and use of it.
Reply
Wow, thanks for all the positive feedback! I’m stoked you guys like what I’ve done here.
@Kevin: I agree that something will need to be done there for sure. Opera shows the same icon in the address bar as Safari. Man, would it ever be great if everyone jumped on board for this! Looking at the positive side… Microsoft adopted it. And I don’t think anyone saw that coming! Here’s hoping…
Reply
Hate to be negative, but always thought that icon was too easily confused with wireless…
Reply
Excellent! I’ve updated the build-in rss UI in our open source cms umbraco with this. It will come in the final release of 2.1 in this week!
Great job!
Reply
sweet deal. thanks for the open source my friend.
as for the wireless comment, i think the icon indicates more of a “broadcast” meaning. or waves in water, or a radio signal. i think it’s pretty appropriate for the syndication idea.
although the icon does little to stop normal people from giving me weird looks when i talk about subscribing to a feed.. what’s going to take rss to that next level?
Reply
Nicely done Matt. Thanks for sharing the files with the masses. I’m sure I can find a good use for them
Reply
SWEET, you really nailed it.
Thx for the icons, nice work.
Reply
Great stuff, I’m going to pass this on!
Reply
This is excellent. I’ve downloaded this pack and will deploy them on my sites as soon as tonight! Thanks Matt
Reply
great work,, gave me some inspiration for the whole site colors
Reply
I just want to say, great job with the icons and the very clear instructions on how to edit them in photoshop.
Reply
I don’t get it. There was already a standard icon representing RSS feeds, so why is this icon (beautiul as it is) going to save the day?
Reply
Nice work.
Could you provide an SVG or EPS version? I can’t open Adobe Illustrator files.
Reply
Good work. I too worry about what Apple will do. Its hard for them to adopt things like this, especially when they already have something in place. They might, but i guarentee it will be blue, thats why they used the blue rss icon in the first place. Orange clashes with their UI.
Another trick to changing the color of the PSD is to just adjust the hue of the complete image, then you can get it anyway you want.
Reply
Way to beat everyone to the punch. Downloaded. And I thought I was going to have to make one of these for myself.
Reply
The illustrator version doesn’t scale well. The broadcast lines don’t stay in proportion. Doing a “Outline Stroke” on the lines in Illustrator would solve that issue.
Other than that these are great.
Reply
People should not be encouraged to change the colour. Whilst the old icons had their misgivings, the orange stood out for a reason: to alert people to a new feature that otherwise is very anonymous because it has no UI.
Reply
Yeah, I have to agree with pd. Why on earth would you encourage people to change the color?!?!?! Everyone’s excited about MS adopting the logo and then you want to make it easier for people to change the color? Does not compute.
Reply
Thanks this gregoreus
Reply
Excellent work Matt.
Reply
Holy shit - digg really does drive insane amount of hits in a matter of hours! Things are slowing down now, but over the past 6 or so hours, this post has seen 10,000+ hits (7,000+ uniques). That’s just insane! The server held up great - I don’t think that would have been the case if I was still with DreamHost. Anyway, I’ll have to thank TWhid for submitting my article.
Thanks to everyone who’s left a comment or emailed me in regards to this post - I sincerely appreciate it!
@Scott: The problem is that there are numerous ways to identify feeds. There really isn’t a single standard. I’m hoping that this icon can become that standard.
@Bart: I sure can. I’ll do a revision of the package and will add EPS versions along with some image previews. There’s some non-designers out there that have emailed asking for images as they don’t have Photoshop or Illustrator.
@Kevin: You’re right, it doesn’t scale well… unless you enable an option. I will add this to the readme. Click the arrow on the Transform toolbar and you’ll see some options - enable “Scale Strokes & Effects” and it’ll scale properly.
@pd/Anonymous: I disagree. I think the symbol itself is recognizable enough that people will be able to easily identify it regardless of it’s colour. The fact of the matter is - it’s orange. Orange is not the prettiest colour in the rainbow. I for one, would not add an orange icon to my site, no matter what it is. I know I’m not alone here as I’ve seen the typically orange RSS/XML buttons in various colours and even shapes. People are going to customize it - that’s a fact. I’m just providing a ‘tool’ to make it easier for people to do so.
Reply
W00t!
Reply
changing the color dosen’t exactly make it much of a standard…
Reply
Yeah. I’d like to have an SVG version too.
I’m working with inkscape on linux.
Reply
Orange is the most beautiful color in the world.
http://images.google.com/images?q=oranje
Reply
Im gonna start using them on my site now, never really liked calling it RSS because of the difficulties explaining what it stands for and everyone can relate to an image. No matter what language they speak!
Reply
I would like to echo the call for a SVG version. I think much more should be done to bring SVG to WIndows,
Reply
Rock on Matt. Thanks for taking the time to make this happen, it’ll help spread the common symbol for feeds I’m sure.
One problem though: I can’t open the .AI files in Fireworks.
I don’t use Illustrator for vector work, and Fireworks can’t import .AI files (unless they’re in Illustrator 8 format I believe). Any way you could save them as .EPS format so those of us without Illustrator could get at them?
Thanks.
Reply
Great work Matt.
Reply
I couldn’t agree with you more that web site owners would be wise to exclusively use this button to represent web feeds and immediately cease the use of XML, RSS, and other similar approaches. This will greatly improve the awareness and understanding of subscription based services via web feeds for the masses.
Great work helping this happen!
Reply
Fantastic job, Matt!
Using it on my site already. =)
Reply
Matt, congrats on the digg!
Reply
I’ve had it on mine since the day it was announced, but apparently the majority of the “RSS” people aren’t adopting the change from what I’ve seen but it’s prolly just cause they haven’t heard about it. Now the masses, that’s another story…
Reply
Thanks a ton for these! I’ve posted about them on my blog along with a little tutorial for editing the color in Paint Shop Pro.
Reply
Great move to try and standardize. Don’t know if it will work but milliions in advertising will probably help “standardize” the tech for newbies.
Reply
@Matt Brett - I think your right. Dreamhost would have definitely been slow.
I tried dreamhost, and I hated it.
Impressive stats indeed.
Reply
Thanks. Now the hard part is to decide on the color. Neither orange or pink do it for me. I do like the blue on this page, so maybe I’ll do that.
And to think, I’ve finally gotten non-bloggers at work to understand rss; now I have to start all over.
Reply
Nice ones thanks for sharing
Reply
I whole heartedly agree…cheers!
Reply
Guessing tabbed browsing is next?
Kidding, nice to see this occuring.
Reply
It’s like a 9rules leaf no matter what color u can still know it’s 9rules.
Reply
Very good idea. Thanks a lot for the icons.
Thank u.
Reply
Ahhh, roll on the open source icon revolution! These are great - ten thumbs up.
Reply
Hey Matt. Thanks for the icons - I’ve added them to my dinky blog. Keep up th great work!
Reply
Great Idea! Im going to put it on my blog
and post about it.
Reply
coooool
Free stuff rocks. Good idea on starting this little “campaign”.
Thank you.
Reply
This is a great way to help people make their ideas more accessible. Keep up the good work; also posted to my blog.
Reply
seems like a lot of work, and even some cost to doing this. (cost of domain, your time, etc).
icon looks great, i enjoy it. however, what will u do when the next “big” thing comes around? …buy another domain, create more work for yourself and hope to get lots of hits to ur site?
good luck.
Reply
matt - great work. just the other day I got rid of all my stupid RSS, Add to Yahoo, Add to Google, ATOM, XML, icons and replaced them with a single Feedburner icon.
Think I’ll see if I can swap out the Feedburner icon with yours.
the power of web2.0 is simply del.icio.us
keep up the good work
– bdeseattle
Reply
Very nice! Thanks for making the vector file available.
Reply
An SVG version would be nice to add. The feedicons.com site claims there is one in there, but there isn’t.
Reply
Thanks! I was just bellyaching on my own blog that this new “standard” icon was not available in anything but 16×16.
As the developer of a corporate intranet blog/wiki, I need at least 48×48 to swap out our current lame “feed” icon, and now I have one. Let’s hope the FF and IE teams use your icon file as the “standard” one, it’s a lovely rendering.
Reply
Really splendid work. I have waited for this since I saw that entry by Microsoft. I will certainly use this at my site in one way or another…
Reply
I could not get http://feedicons.com/download/feed-icon.zip because the server returns:
“403: Forbidden!
The server understood the request, but is refusing to fulfill it. Authorization will not help and the request SHOULD NOT be repeated.”
Perhaps this is a permissions issue on the server, but I think this is an error worth correcting soonish.
Reply
@J.B. Nicholson-Owens: You will now be known as my official-unofficial QA person.
Thanks for pointing out my mistakes (seriously!). Not sure what happened with the SVG version. I must not have overwritten the file on the server, or something? I fixed it right away after reading your comment.
The 403 was an .htaccess conflict. I had set it so only feedicons.com could link directly to the file to prevent people from linking directly to it. Then when I added the enclosures to the feed, I should have made an acception but forgot. I assume that’s where you were trying to download it from?
Reply
Hi Matt. Download button leads to an error message.
Reply
Cool - I’ll implement this in my new site (currently beeing developed…)
Reply
Thanks. It’s up now at mozillalinks.org
Reply
Thanks for this! I had a rant over at my site (http://www.nczonline.net/archive/2005/12/283) complaining that finding feeds are too difficult on sites. This should help a lot!
Reply
awesome thxs a lot, found ya via drweb.de
Reply
Added your icon to my site now and given you some advertisement at my swedisg blog. It looks really good and was an excellent addition to my site. Thank you again!
Reply
The icon is just great! But why don’t you provide buttons of different widths? Because sometimes, you have several feeds (rss, itunes, videoroll), and the only way to make a difference between them is to add some text on the left. I tried myself to do it, but it’s a bit hard because i’m not a graphical designer.
Cheers
Nadir
Reply
Great idea! Keep up the great work!
Reply
I have recently come across RSS and decides to implement it into my site at some point. After a while I found your http://feedicons.com site and found out I could customise the icon. What I coulnt find was how to actually make the icon appear how i want it to on my site. Whats the code i need. Mail me back please.
Thanks
Reply
Great icons! May they become standard and let no-one care about RSS 1 (or 2 or 0.9) or whatever. Hooray!
Reply
Very cool idea
Reply
So when is apple gonna jump on board?
Reply
one of the brightest initiative i have seen to facilitate understanding of RSS. It deserved a post http://ouriel.typepad.com/myblog/2005/12/standardizing_r.html
Reply
Well done! I’ve updated my icons.
Reply
thanks, matt.
great initiative. great choice of colors.
however, what about a black-and-withe-version for those of us in love with the dark side of the moon?
and maybe also one in grey/withe?
could you possibly add that to your collection?
manymany thanks in advance
from miss.gunst
Reply
I’m one of the cool kids, finally!!! lol
http://www.neworleansblack.com look at the bottom of the page.
Reply
Some feedback regarding feedicons.com: One of the stated goals is to “Eliminate confusion”. The website is confusing, though.
It would be clearer if you didn’t use the icon as the website’s favicon (which does NOT work for RSS feeds).
Also, how about setting the alternate link tag (), so browsers can automatically show the feed where their users expect (e.g. Firefox’s address bar)?
Finally, you’re using the functional feed icon, undescribed (as in mystery meat), in what appears to be a download section, rather than under “stay in the loop,” which is where I looked for it.
Reply
that missing tag should show thus:
<link type=”application/rss+xml” rel=”alternate” href=”…” />
Are you not escaping HTML here??
Reply
dude, you gotta fix this right away! I could put anything here, but I’ll be nice:
Reply
Oh Good, looks like it’s just selective HTML. Sorry to be alarmed. Nevermind.
Reply
@Rob: Talk a deep breathe. Relax. Caaaaaalm blue ocean. Alright, we good? Ok…
What would you suggest I use for the site’s favicon if not the icon the site is representing? Some feed readers use the site’s favicon to distinguish it from others. Ala Net News Wire and FeedDemon.
There is no main feed, yet. The only feed that’s on the site is for the download package - which is why it appears where it does and not in the ‘In the loop’ section. There’s a title tag on the icon describing what it is. Which is also why there’s no link tag for it.
Once again - this site is merely a placeholder. A full site is in the works.
Reply
Brilliant. And beautiful! I am absolutely on board! =)
Reply
Well Matt.. that’s all fine and dandy. However, I feel it might be a good idea to let you know that they have a problem opening with the CS1 suite for whatever reason.
Probably my own fault for not upgrading yet, but, I thought I’d give you a heads up.
Terrible shame, I wanted to add themt o the new layout I’m planning on my site. Nice idea, though.
Reply
@Ben: That’s strange. I’ve had people test all the way back to Photoshop 6 without problems. I was originally using shape layers, but older versions of PS had problems rendering them. I decided to change to a single layer with the merged image at various sizes for compatibility reasons.
What OS are you running? And what is the error message you receive when the files fail to open?
Reply
Is it just the .ai and .eps files? I had the same problem (Illustrator CS1, OSX 10.3.9) but the “-legacy” versions opened fine. All the .psd files are opening just fine for me in Photoshop CS1, too.
Reply