Feed your Image via Atom or RSS

♦ Posted by Jeff Starr in Graphics, HTML

Updated January 11, 2025

This quick tutorial explains how to add images to both Atom and RSS feeds. Although both formats allow for image-inclusion, feed-reader support for image-display is currently quite limited in most browsers and applications. Hopefully, that will change in the near future..

Images for Atom Feeds

Images included within Atom feeds must have a ratio of either 1:1 or 2:1. There are no other restrictions as to file type or size. Use the <icon> XML element for URL’s targeting 1:1 images. Otherwise, use the <logo> XML element for URL’s targeting 2:1 images. Either element should be placed in the <feed> element:

<feed>
	<icon>http://domain.tld/path/icon.ico</icon>
	<logo>http://domain.tld/path/logo.gif</logo>
</feed>

Images for RSS Feeds

RSS supports images with a maximum width of 144px and maximum height of 400px. If no dimensions are specified, 31px will be the default value for width and 88px the default value for height. Icons (.ico) are currently not supported in RSS specifications. In RSS, it is possible to include additional image data via specified XML elements. Here is a complete example, commented with explanations for each image element:

<channel>
	<image>
		<url>http://domain.tld/path/site_logo.jpg</url> // *required! - the URL of the image
		<title>The alt attribute of the image</title>   // *required! - the image alt attribute
		<link>http://domain.tld/my_blog/</link>         // *required! - the URL of the website
		<width>111</width>                              // the image width
		<height>33</height>                             // the image height
		<description>An amazing website</description>   // the link title attribute
	</image>
</channel>

Customize as desired!

About the Author

Jeff Starr = Web Developer. Book Author. Secretly Important.