A small picture in my twentytwelve header

Install a Custom CSS plugin.
http://wordpress.org/plugins/search.php?q=custom+css

Upload a 72×72 image, and get the image url to use in code below.

This code is for logo to the left of site title and description

/* ===== begin logo ===== */

.site-header h1 a:before {
	content: "";
	display: block; width: 48px; height: 48px;
	margin: 0 auto 12px;
	background-image: url("http://dummyimage.com/72x72/ff0000/ffffff.png");
	background-size: cover;
}
.site-header h1 { margin-bottom: 0; }

@media screen and (min-width: 600px) {
	.site-header h1 a:before {
		width: 72px; height: 72px;
		position: absolute; top: 0; left: -96px;
	}
	.site-title, .site-description { position: relative; margin-left: 96px; }
}

/* ===== end logo ===== */

This is for logo image to the right (what asked for in the OP)

/* ===== begin logo ===== */

.site-header h1 a:after {
	content: "";
	display: block; width: 48px; height: 48px;
	margin: 24px auto 16px;
	background-image: url("http://dummyimage.com/72x72/d2e6f2/ffffff.png");
	background-size: cover;
}
.site-header h1 { margin-bottom: 0; }

@media screen and (min-width: 600px) {
	.site-header h1 a:after {
		width: 72px; height: 72px; display: inline-block;
		position: absolute; margin: 6px 0 0 24px;
	}
	.site-title, .site-description { position: relative; }
	.site-description { display: inline-block; }
}

/* ===== end logo ===== */

Just FYI, it’s better to post a support question about Twentytwelve theme in its own sub forum (you could go there from theme’s main page actually)
http://wordpress.org/support/theme/twentytwelve

For second block of code above:

add

right: 0;

into it at the same line that has

position: absolute;

Please note that you are editing theme main stylesheet directly. It’s better to move all the modifications to Custom CSS plugin or Childtheme stylesheet now than later.