To put an image/logo in the header you do not need to use a custom icon, just place an img tag within an absolutely positioned container:
<header data-role="header" id="top" data-icon="myimage">
<span style="position: absolute; left: 0; top: 0;"><img src="http://lorempixel.com/38/38/business/2/" alt="" /></span>
<h1>Page Title</h1>
</header>
In this example, I am using a SPAN absolutely positioned to the top left corner of the screen. You can adjust LEFT and TOP or the margins to place it as desired.
To create custom icons in jQM 1.4, use the :after pseudo tag:
.ui-icon-myimage:after {
background: url(http://lorempixel.com/38/38/business/1/) 50% 50% no-repeat;
background-size: 38px 38px;
background-color: transparent;
border-radius: 0;
}
Setting the background to transparent and border-radius to 0 removes the rounding and the gray background disk.
To display the icon inline (not on a button), you can do this:
<span class="ui-icon-myimage ui-btn-icon-notext inlineIcon"></span>
Then add CSS for inLineIcon:
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
DEMO of both image in header and inline custom icon