I’m working on an HTA to generate KML files from a given CSV.  I’ve set a goal for myself to keep everything contained in the one HTA file.  Being HTML / CSS and VBScript, this is easy for the most part.  Images and icons are a little harder though. But not impossible!

For images, look at Data URI schemes.  I’ll borrow Wikipedia’s example here:

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

It’s a bit longer than the usual <img src=”image.png” alt=”Image”> tag. But it allows for images in an HTA without additional files.  The way it works is by taking the file you want to embed, and converting it to Base64.  There are several online tools to do this, but I’ve been using this command line utility for the sake of bandwidth.

Once you have the blob of Base64 data, start an image tag with the src attribute set to “data:image/png;base64,” and append the data afterward.  The first part is needed to tell the browser what the image type is, and the encoding.  The image type doesn’t need to be PNG, any type can be used as long as the MIME type is changed accordingly.  Data URI’s work for most media types, so other things besides images can be embedded this way.

Note that because HTAs are rendered in IE, you’ll need to be aware of your target audience for this to work.  IE8 only supports data URIs up to 32KB.  IE7 and IE6 compatibility is not there, although it may be possible through this MHTML /CSS hack.  I’ll have to test it once my HTA is ready to go.

Now for Icons.  I found this piece of information on the MSDN page for the HTA Icon property.  The solution is to use the copy command, which will append the icon data onto the front of the HTA.  Before the HTML starts.

First, add this line to your HTA to specify the icon. If you have an hta: application tag already, you can add the “icon=”#”” line to it:

<hta:application icon="#">

Then, open a command prompt, and use this command, substituting the appropriate names:

copy icon.ico /b /y +original.hta originalWithIcon.hta

The + before original.hta tells the copy command to append that file onto the file being copied. With originalWithIcon.hta being the output file. /b tells copy that icon.ico is a binary file. And /y just suppresses the overwrite messages.

At this point, if you open the new HTA in a text editor you’ll see some unreadable characters before the HTML starts. That is the icon data.  With that embedded, the icon will now appear in your system tray when you run the file.  Unfortunately (at least on Windows XP) it doesn’t show up in Explorer.

Now you have an HTA with embedded images and Icons!