Add a Logo to your Feed
Many complain that RSS and Atom have taken away the possibility to maintain your personal brand. For the most part, that's true. With so many people consuming content via RSS, I'm surprised anyone even knows who writes this stuff anymore. Many of the feed readers out there will snarf up your favicon, so at the very least, you should try to have one of those in place.
You can also add a path to an image in your RSS or Atom feed.
That's right. Both formats allow for you to specify a URL to an image. Then, it's up to the feed readers to decide how to use or present that information. Here's the slightly disappointing part. Bloglines seems to be the only one in my limited testing that actually supports the use of this custom image. Google Reader, Newsgator Online and Netvibes were the other ones I tried that ignored it. Even still, it's nice to know that even a minority of my readers are able to see a small piece of personal branding each time they read my feed.
Adding the necessary code to an RSS feed should be fairly straightforward but, depending on your blog tool of choice, may require you to access the files via other means besides a fancy web admin. Wordpress, for example, will likely mean FTPing into the server whereas MovableType has the feeds as index templates.
Adding to an Atom Feed
The Atom specification details two separate XML elements that can contain a URL to an image: icon and logo. For icon, it indicates that the image should have a 1:1 ratio and should be appropriate for small sizes. Not much more is spelled out, such as appropriate image types. For logo, the spec says that the image should have a 2:1 ratio but doesn't give any recommendations to how large or small the image should be.
The icon and logo elements will appear within the feed element:
<feed>
...
<icon>http://example.org/favicon.ico</icon>
<logo>http://example.org/logo.jpg</logo>
...
</feed>Adding to an RSS Feed
The RSS specification is a little different in that you can only specify an image and not an icon for your feed. However, there's a lot more metadata that you can provide with the image. The image element resides within the channel element and has three required elements that must be contained within it: url, title, and link. The url is the image URL. The title is used as the alt attribute if the image is used in HTML. Finally, link should be the URL of the site. The title and link of the image will likely be the same as the title and link for the channel.
There are three additional elements that can be used: width, height, and description. Width and height are the dimensions of the image. The description would be used in the title attribute of the link if rendered in HTML.
Now, the RSS specification is a little more specific when it comes to possible image sizes.
Maximum value for width is 144, default value is 88.
Maximum value for height is 400, default value is 31.
Here's an example of how the image stuff might look in your feed:
<channel>
...
<image>
<url>https://snook.ca/img/rss_banner.gif</url>
<title>Snook.ca</title>
<link>https://snook.ca/jonathan/</link>
<width>111</width>
<height>32</height>
<description>Snook.ca features tips, tricks, and bookmarks on web development</description>
</image>
...
</channel>Better than nothing
Despite the lack of support in most RSS readers, I still think it's a good idea to include it. And for you stat junkies out there, when a Bloglines reader accesses your feed, it'll load the image from your server. Now, you can get a more accurate picture of how many people are actually reading your feed.
(If you feel like reading this in Kazakh)
Conversation
I hate no idea logo was part of the Atom spec.... SWEET! Thanks Jonathan!
Ugh... Had no idea. Had! Blasted typo gnomes.
I think FeedDemon shows the images too.
I use thunderbird which shows the entire site except just the post. Very handy since I get to see the comments aswell :)
I included an image URL from the start; I think its well worth adding that little piece of branding to go along with the feed.
Incidentally Waggr shows the image, and is nice and simple. Shame they haven’t kept up with the times and that it doesn’t seem to work properly in some browsers.
Even MIX, the aggregator I'm developing for Excite Europe, shows the icon in the feed viewer.
Anyway, it does not rely on the feed tags for icons, cause they're so rarely used in the feed sources. Instead, we have a server-side script who directly retrieves the favicon from the site.
Just a note: I was wondering why your favicon did not shows in the MIX, so I've found your image is about 22k heavy! We had chosen to put a limit of 20k for icon weight. Now we've arranged it at 25k. But maybe you'd better optimize your favicon to avoid this kind of risk.
Andrea: my favicon is so large because it's a true icon format. It has 16x16, 32x32 and 64x64 embedded within it. But thanks for the heads up. I might drop the 64x64 to get it under 20k.
I understand a developer's purpose of providing the most scalable solution for his brand image. But consider a 20k icon is simply "socially" unscalable: in a composite sources context, when an aggregator's user must easily download some Megs of icons, something doesn't works.
In that context, the desired information is no more than half a kilobyte. Instead, the response given is 40-50 times heavier.
What can we do?
Is there any public standard one can use to specify in his markup a reference to the most lightweight version of his icon? Honestly, I don't know any.
Or should we define and spread a proper microformat to correctly solve this issue?
Awesome tip, thanks Mr. Snook.
I have a favicon plugin that includes the favicons in the rss/atom feeds. I didn't know about the logo, I will play around with my plugin to add some support for that. Thanks for the info!
I use SPB Insight for WM5, and it does support feeds icons. Newsbreak doesn't :(
I was looking for a way to put a favicon on my feed.
I use Firefox to read feeds (mine too) and it is really a pitty that this is not possible.
:(
Or is it?
If you're referring to the live bookmarks feature, I think you might be out of luck.
does sage show those icons?
or maybe somebody can give me a link to a feed that already have such an icon. would be great to check. nice idea + tutorials. thx
@Luis Correia: When you click on a link in Live Bookmarks, the favicon appears next to that link. But it doesn't appear for any other links in that feed until you click them too, and when you next open Firefox the default icon comes back.
Logos in the feeds would look brilliant, this was expected though, readers will see a new innovation sooner or later, maybe the live blog won't be much read as much as feeds would with these pimps.
Hi guys,
I'm new here and I'm not an expert as you are... I would to build an ATOM feed to share info about users of my community but I woudn't waste my spare time... In fact, I want to insert some URLs pointing personal photos. Now I read on that blog that some readers could have some problems in displaying photes larger than a certain dimension. Please, could you tell me the best Feed that fully support image browsing (of any dimension). Thank you for your attention.
Thanks alot, i'll certainly put this into action - PROPS to you for this!
Thanks for informations. adding logo to my feed.
Stumbled across this article while looking for something else, thanks for posting.
It is very good thing. Is any bodn know any thing about B3B? new system for Web shop. Or ip6? In our company need some one who wont tu create nice web pages contact as
So I followed the instructions, and entered the code (changed to my site and images) in my feed-rss.php, feed-atom.php and feed-rss2.php files in the wp-includes folder of my WordPress 2.6.5 folder on my webserver. No matter if I use jpg, gif or png for the image (always 16x16 in size, and always feedicon.xxx) the image does not show up on Bloglines. Am I playing with the right section of WordPress? Should I perform some other changes? Thanks.
@Chef Mesilati: I took a quick look at your feed and your feed image is looking for http://images.palettedome.com/rssicon.gif which is generating a 404. Fix that and you'll likely solve your problem.
Thanks for the quick response. Although there was compatibility in name between the php files and the image files, I reverted both to look for rssicon.gif - and updated all relevant code accordingly. What I realized is that in Bloglines' left-hand list of blogs I am subscribed to the logo does not appear - just a "white paper" icon, whereas on the right, when I am in the blog, the small icon appears on the top right corner. I tried to figure out the behavior by looking at other blogs I am subscribed to, and realized that the top right corner image in the right frame is actually a different image than the one that is by the blog name on the blog list in the left frame. Any idea what parameter is the logo in the left menu?! Hope I am clear in my explanations - not sure of the right terminology to use. Thanks in advance.
Chef: I would assume the other icon may be the favicon but I don't know the ins and outs of Bloglines well enough to answer that question. Sorry.
Ok. This is actually not the favicon, because right clicking it and choosing properties (Firefox) tells me this is the feedlogo.gif. My assumption is that the icon on the left is actually a blogline "invention" - or - the other option is that maybe this is the actual favicon, and I am going to put one in my feed directory - maybe it will change it!
Thanks anyways. Chef Mesilati.
I like this site, its got some interesting content but in regards to your article, I wonder how this looks on smartphone/tablet RSS/Atom readers since they are becoming very popular? anyone tried this?
@Rashed: It's up to the RSS reader to pull in those images. Unfortunately, these days, I see the feed graphic used less and less. I'd consider it obsolete at this point.