We've seen how easy it is to add our own theme to jQuery Mobile using ThemeRoller. Now we're going to add a little more spice to our Notekeeper application by creating a custom icon. The directions in this section will be specific to Photoshop but any graphics application capable of exporting transparent PNG files should be acceptable.
Before we create and use an icon, we should first understand how jQuery Mobile uses icons and applies them. In the theme you just created there are several image files present (themes/images). Open
icons-36-black.png in the graphics editor of your choice. Zoom in on both of them to 400% or so and you should see something very similar to the following ...