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, 2005: Introducing 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.

Comments

This is great. What better way to truly standardize the icon than to start using it on sites now! Thanks!

Sweet Matt, very sweet.

It’s great news that MS are trying to standardise things, especially taking other peoples ideas and using them.

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.

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…

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!

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?

Nicely done Matt. Thanks for sharing the files with the masses. I’m sure I can find a good use for them 🙂

This is excellent. I’ve downloaded this pack and will deploy them on my sites as soon as tonight! Thanks Matt

I just want to say, great job with the icons and the very clear instructions on how to edit them in photoshop.

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?

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.

Way to beat everyone to the punch. Downloaded. And I thought I was going to have to make one of these for myself.

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.

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.

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.

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 <a href="http://digg.com/design/Download_Illustrator_and_Photoshop_versions_of_the_*new*_standard_feed_icon&quot; rel="nofollow">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.

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!

I would like to echo the call for a SVG version. I think much more should be done to bring SVG to WIndows,

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.

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!

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…

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.

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.

@Matt Brett – I think your right. Dreamhost would have definitely been slow.

I tried dreamhost, and I hated it.

Impressive stats indeed.

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. 🙂

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.

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

An SVG version would be nice to add. The feedicons.com site claims there is one in there, but there isn’t.

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.

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…

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.

@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?

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!

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

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

Great icons! May they become standard and let no-one care about RSS 1 (or 2 or 0.9) or whatever. Hooray!

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

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.

that missing tag should show thus:

<link type="application/rss+xml" rel="alternate" href="…" />

Are you not escaping HTML here??

@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.

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.

@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?

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.

I’m on Windows Server 2003 (both SP1 and straight Server 2003) at the moment. Unfortunately I’ve not had a chance to give it a run on XP because my XP box died, so I’ll try and ressurect it sometime soon.

The error it gave me was something along the lines of, "Can’t open file as it was created with a version later than this one", or at least something very close to that. It seemed strange to me as well, but it’s not the first time I’ve had this specific error before. First time on this OS though.

I’ll try redownloading the package and see if it helps any. If not, I’ll test it out on an XP box and see if that makes any difference. 🙂

@Travis: It was all of the .eps and .ai files, and for some weird reason the .psd files too. I’m going to see if redownloading and opening the legacy files works. Thanks for the suggestion.

Well Matt since you want to know who’s added the icon to their sites – I’ve done so now. Thanks for the very cool icon.

I had to make it non-clickable initially (just use it to draw attention to the feed section) as I’ve provided options for people to choose full, excerpts or headlines only feed, but when they do then it appears again, fully clickable.

Thanks again.

Did I miss something or does feedicons.com not have it’s own feed? 🙂

Great idea and thanks for the icons.

I’ve added the feed icon to my blog and will eventually change the color to something more compatible with the site’s design.

I believe that it looks very nice. Thanks Matt!

The most important thing here is to make a standard, for non-tech people.

I hope Mac will use an orange-ish icon too!

Well done Matt! It’s pretty cool to see an idea get kicked up by someone who really has a vision for it. It’s obvious that most everyone is on board with this. Count me in as well. Time to go clean up some templates.

Very interesting post Matt. I am new to your blog and I very much like it. I am one of the founders of StepWebZ.com (http://www.stepwebz.com) an online provider of content tools and web tools for webmasters and bloggers. We have just released a syndication button that bloggers can put on their site. This button is basically the same that the "Add to my Yahoo!" button except that it allows readers to display the feed’s content on their on site or blog. We have designed a first version of the button see page below
http://www.stepwebz.com/stepwebz_button.asp
but we would love to come up with another version that would become the standard button for the syndication of RSS content on another site. Maybe you and your readers can give us some ideas. If you are interested in desiging the standard version of the "Syndicate my content on your site" button please contact me at stepwebz.com. Regards

I support the idea ov having a standarized feed icon.

Once recognized and used all over the web we’ll all immediately discover if a site has a stream to subscribe to, no matter wehwre we are or wnat labguage we speak.

I was happy to hear that Microsoft adopted the Firefox idea.

Thanks Matt for a brilliant and beautigful support site for the icon.

Thanks for the heads up Marc. Excellent news!

Haven’t had time to check my feeds yet today… or yesterday for that matter.

I’m back agin. Can’t help myself 😉

I have incorporated the FeedIcon in my blog and written yet another article outlining the benefit of a standard icon there. I have also include a "Shameless Promotion…" to demonstrate the eleganse of the icon.

Check it out!

This is a great idea. It resolved a niggly question for me about dasBlog – why does it use both RSS and XML buttons and what’s the difference?

However, it would be nice if we had a standard for dealing with the different types of feeds (Atom/CDF) without having to go through a 3rd party service.

A suggestion I would make is that the PSDs would be far more usable if they had not been flattened (ie: preserve the layers to separate symbol from background).

Matt, I just tried following your instructions for changing color in Photoshop and when followed literally I end up with a solid red icon. I can’t find any layer setting combination that results in anything else.

Admittedly, I’m not an advanced Photoshop user, so it is not clear to me which step in the instructions is missing.

However, when I try experimenting with a few things, tt does complain that the application used to create the smart object does not exist.

Perhaps your instructions assume the entire CS suite is installed and not a stand-alone installation of Photoshop? I’m using CS2, btw.

Well,at the expense of looking stoopid, if we don’t have little buttons/icons that read "RSS Feed" on a Web site, what do we call it?

Hi Matt! Thanks for the very nice feedicons!

However, if the color of background is too bright, then icon is obtained illegible…

: (

It is possible this to correct?

Alexey,

If you download the whole batch of FeedIcon’s, surely you could use one of the differently colored icons.

I use a white backgound on my blog, that’s fairly bright, I’d say.

Then I use the orange icon which I think is clearly readable nad rexognizable as a feed.

Petit,

I bore in mind not the background of page, where to place feedicon, but the color of the background of feedicon itself.

But i already could itself select the suitable color so that icon would look normally!

Thanks, Matt!

I totally agree with you, RSS and XML and all the definitions you can find on the web are not clear, and thousands of people still don’t understand What is XML , RSS ans Syndication.

It is so simple, but there is only a fewnumberof websites and Blog which explain that easily.

I definitively adopt this Icon.

The Web should be a simple and easy place for all…

I am having this same problem :

"Matt, I just tried following your instructions for changing color in Photoshop and when followed literally I end up with a solid red icon. I can’t find any layer setting combination that results in anything else.

Admittedly, I’m not an advanced Photoshop user, so it is not clear to me which step in the instructions is missing."

I am also using Photoshop CS2. There is no color picker within the overlay option. Since I am a Photoshop beginner I am lost on how to properly perform the color change.

Great icon though!

Thanks for giving the impulse to establish a standardized icon for RSS – (besides, a lot more appealing than the white RSS/XML on orange background). It looks like IE 7 will use it, like Firefox, to signify the presence of an RSS feed on a page / site.

Anything that contributes to making the web a friendlier place for its overwhelmingly non-techie crowd is good – Congrats!

(PS: remains to convince the Opera Software guys to jump on the wagon – they use white over blue)

I think it’s better to use Hue/Saturation in Photoshop to change the color of the icon, but you decide

This is so cool, you rock, I was sick of the plethora of multi-phrase icons everywhere. So simple. Now it’s on the google toolbar!

Why does Opera state this :

Regarding the old RSS icon: Mozilla would like us (and other users of it) to sign an agreement on the use of the feeds icon. We fully respect their rights to the icon and will not use it as long as this isn’t sorted out.

I thought it would be for everyones use ?

@Sascha: This is the first I’ve heard of any agreement that has to be signed. Mozilla is most definitely working on a terms of use agreement that will be attached to the icon, but as far as I know, you simply have to follow the guidelines. Which from what I recall, Opera were within.

I haven’t heard from Mozilla on this topic for a few weeks now so things may have changed. I hope this isn’t the case, though.

I stand corrected. I just took a look at the draft I received at the beginning of May and it states that you must return a signed copy of the terms of use agreement to Mozilla if you distrubute software or hardware or are a web service that uses feeds.

The online version of the TOS doc and the Visual Identity Guidelines are still incomplete. As soon as they’re done, I’ll post links.

You said:

"if you distrubute software or hardware or are a web service that uses feeds"

I am sure you mean: "that uses Mozilla Feed icon".

RSS (-feeds) are standard and not owned by Mozilla. 😉

best greetings

I just took a look at the draft I received at the beginning of May and it states that you must return a signed copy of the terms of use agreement to Mozilla if you distrubute software or hardware or are a web service that uses feeds.

Please provide the exact quote.

The online version of the TOS doc and the Visual Identity Guidelines are still incomplete. As soon as they’re done, I’ll post links.

How long will that be?

Inspired by your advocacy, I’ve become an internal evangelist to get my company’s UI to standardize on these icons for our feeds. If I’ve now got to tell upper management that they need to sign a TOS with Mozilla or redesign the graphics, well I want to know as much as possible, sooner rather than later.

I’m feeling quite betrayed by this decision; I thought this was part of the altruistic spirit of open-source. Now I feel like the victim of a bait and switch.

From http://www.hecker.org/mozilla/feed-icon-guideline… , Visual Guidelines:

"The feed icon should be displayed in its entirety on either a solid light or dark background (avoid mid-tone or strongly colored backgrounds). The feed icon should not be displayed in parts, with color variations, or with other elements superimposed on top of the icon."

[…]

"The feed icon should not be displayed in modified form or in ways that visually compromise the icon. In particular, the icon should not be displayed

"* in a color other than orange (or black where the use of orange is not possible)

"* with the colors of the icon inverted (e.g., white used instead of orange and vice versa)

"* in a different orientation (i.e., rotated or flipped relative to the standard orientation)

"* with the "rounded square" element of the icon replaced by a circle, triangle, or any shape other than that used on the original background

"* with the corners of the "rounded square" element of the icon made sharp rather than rounded.

"* with a drop shadow or any other type of border different than that used in the original icon"

So much for those nice colorful icons. May those draft guidelines get thrown out quickly.

Well, Hecker explicitly states "some of the versions of the icon hosted on [feedicons.com] don’t fully conform to the proposed visual guidelines"

Who’ll blink first?

@Lis Riba: There will always be icons of various colours on feedicons.com and most likely, icons smaller than 16×16. That size is simply too large to use inline with text.

Reading over that post, it seems their concern is more with applications than with web sites’ feed icons. They want the icon to be more consistant across feed readers and the like. In one of the comments he says,

"On the issue of icon color, there may be two different answers for two different groups. The first group is comprised mainly of people supplying feed-enabled applications (e.g., news aggregators, whether stand-alone or integrated into other apps) or operating equivalent online services (e.g., web-based aggregators). For these types of applications I think it’s more important to have a standard color, to help orient new users.

"People just using the icon on their own web sites (e.g., bloggers and others)…are going to have more variation in web site color schemes, icon types, and so on; that’s just a fact of life. […] I think one can justify putting a lower priority on standardizing the icon color for web sites, and allowing more flexibility in icon color."

So I don’t think we have much of a problem here. 🙂

[…] Feed Logo The standardisation of a web feed logo is adopted from Firefox when the Microsoft RSS team made an announcement about it. Here’s how it looks […]

[…] syndication icons used on blogs and podcasts all around the Interweb. From there I found a link to a post by Matt Brett describing a bit about the history of the little orange icon, including notes from the Mozilla and […]

[…] feed icon which became a major step in standardizing its appearance. Designers like Matt Bratt offered downloads of the vector image which soon appeared on thousands of […]

[…] feed icon which became a major step in standardizing its appearance. Designers like Matt Bratt offered downloads of the vector image which soon appeared on thousands of […]

[…] Matt Brett » The New Standard Feed Icon It’s easily customizable for anyone who is familiar with Adobe Illustrator or Photoshop. I’ve put together a little package containing 18 files. … […]

[…] to do, was get get people talking about my blog and my work again. It’s been a while since I’ve done something or rolled out a project that’s received a lot of attention, and my previous design was […]