Backwards compatible Silk Set icons with Fireworks

Download Icons Now

Most of you will be only too familiar with the problems associated with Internet Explorer 6 and alpha transparent PNG images. It's inability to correctly render semi-transparent pixels (alpha channels) mean that web developers constantly have to use javascript hacks to remove the ugly blue border which appears around these graphics.

This situation is bearable if you are using only a few PNG files in your design, but what if you have a design that uses many smaller images, such as icons? When this happens you can quickly find yourself having to "fix" numerous instances of the dreaded "blue border" in IE6, which is not only inconvenient but can also really slow your website's rendering speed.

For example, here at DeepBlueSky we regularly use the fantastic Fam Fam Silk icon set by Mark James. It's a brilliantly useful set of 16x16 png files which make full use of the alpha-transparent format. It's great for modern browsers, but it produces unacceptable results in IE6.

The Solution

Thankfully however, there is a method for exporting png files which contain alpha transparent pixels so that they look acceptable in IE6 whilst still looking great in modern browsers. This solution has been well documented and effectively removes the problem of the "blue border" in IE6 allowing you to drop in your png icons without having to worry about backwards compatbility.

I've used Adobe Fireworks to create a PNG-8 versions of the whole Silk Set icon library making it  "backwards compatible" in Internet Explorer 6. Modern browsers get the full alpha channel experience whilst IE6 gets an acceptable compromise similar to that seen when you don't specifiy a Matte colour on transparent .gif graphics.

Download

You can download the full IE6 Silk Set (with kind permission from Mark James) direct from here. All the original licenses still apply so please see Mark's site for full details.